I'm stuck again with css positioning. I would like to create a page which shows one in the middle, surrounded by 10 other ones. Of course, it should look the same on every resolution (mobiles excluded).
But as i change the screensize, the site keeps on changing its look.
HTML
<div class="wrapper" id="wrapper">
<div class="element" id="element-1">Lorem1</div>
<div class="element" id="element-2">Ipsum2</div>
<div class="element" id="element-3">Lorem3</div>
<div class="element" id="element-4">Ipsum4</div>
<div class="element" id="element-5">Lorem5</div>
<span class="break"></span>
<div class="background" id="background"><span>Neologizmo</span></div>
<div class="element" id="element-8">Ipsum8</div>
<div class="element" id="element-9">Lorem9</div>
<span class="break"></span>
<div class="element" id="element-10">M10</div>
<div class="element" id="element-11">M11</div>
<div class="element" id="element-12">12</div>
</div>
CSS
http://nopaste.info/f6d200c414.html
Oups, already accepted an answer :$
Well anyway, since I was working on it, here is a generic solution. The idea is that you always have numberOfsquares/2 -1 squares at the top and bottom, and always one square on the left and one square on the right.
here is a fiddle: http://jsfiddle.net/PyU87/
It will display depending on the wrapper size which depends on the browser size. So this would also work on smartphones.
How does this work? You said you didn't want layouts to change as the screen changes size so I made it use fixed widths and be inside a wrapper so that can't happen.
DEMO
#wrapper {
width: 450px;
height: auto;
padding: 10px;
}
div {
width: 100px;
height: 100px;
border: 1px solid #000;
float: left;
margin: 5px;
}
#background {
width: 212px;
padding: 0;
}
Related
I'm looking to learn how I can position images in CSS, multiple ones, without affecting my footers position, size, etc.
I coded some CSS I thought would work, but it messed up my footers position. (It wouldn't stay at the bottom.)
So, I fixed that issue but found the code I wrote for the image position messed with the footers position.
I don't really know how, but I would like to have my images positioned, perhaps by px/space.. they just need to look good in a row spaced.
The example is in red, is how I want it to look.
look here for an example of how I want it to look.
HTML
<div class="batesimg">
<p><strong>Bates</p></strong>
<div class="shadow"> <!-- makes a shadow, surrounding the characters picture. -->
<img src="images/bates.png" alt="Bates" width="150" height="150"> <!-- defines the img -->
CSS
/* Bates profile picture. */
.batesimg { /* or whatever class name works for you */
position: auto;
left:250px;
top:250px;
margin-right: 500px;
}
NOTE, the css above isn't positioning the image how i want it, showed in the image example, can someone help me positiong the image like i have it in my example image?
Thanks!
You want to repeat same type of pattern of name,img and descriptions. We will call this 'card'. Now you have two problems in hand.
1) Placing multiple cards in page. For this use some layout like flexbox.
2) Setting inside of card properly..
/*1st Problem*/
#flex-container{
display: flex;
flex-wrap:wrap;
width: 600px;
justify-content: space-around;
}
#flex-container>div.card{
flex-grow:0;
flex-shrink:0;
}
/*1st Problem ends*/
/*2nd Problem*/
.card{
width: 200px;
height:calc(200px + 2em);
}
.card>.name ,.card>.desc{
width: 100%;
text-align: center;
}
.card>div.img{
position: relative;
margin-left: 25px;
width: 150px;
height: 150px;
border-radius: 100%;
}
/*2nd Problem ends*/
.card:nth-child(1) div.img{background-color: red;}
.card:nth-child(2) div.img{background-color: green;}
.card:nth-child(3) div.img{background-color: blue;}
.card:nth-child(4) div.img{background-color: yellow;}
/*Centering Content*/
#flex-container{
margin: 0 auto;
/*top,bottom both zero.. and left,right both auto..
handling margin is complicated..read about them
*/
}
<div id="flex-container">
<div class="card">
<div class="name">Name1</div>
<div class="img"></div>
<div class="desc">Desc1</div>
</div>
<div class="card">
<div class="name">Name2</div>
<div class="img"></div>
<div class="desc">Desc2</div>
</div>
<div class="card">
<div class="name">Name3</div>
<div class="img"></div>
<div class="desc">Desc3</div>
</div>
<div class="card">
<div class="name">Name4</div>
<div class="img"></div>
<div class="desc">Desc4</div>
</div>
</div>
For any other problem visit Flexbox
How to size/wrap a div container around an image inside It? Where float: right and margin-left: auto are potentially causing issues.
I'm struggling to get a div to be sized by wrapping properly around the image inside it. Please have a look at the example I'm referring to here:
Link to Example
(Might be worth playing around with the window size to help explain my problem)
I'm practicing with Bootstrap for the first time. The red blocks on each side are grid blocks 1 and 12, with the blue, and green sections filling the remaining 10. The big orange rectangles are responsive images that I want to be kept central spaced 20px apart at all times.
Using Chrome's "Inspect Element" (or similar) - If you inspect the orange rectangle on the right hand side, and have a look at the container div (class="container-img-r") - This div is wrapping around the orange image exactly how I wanted (albeit including the invisible border). But I'm not having much luck achieving the same result with the div container for the orange image on the left side (it still fills the blue parent element)
I've played around with different options for float/margins/position but can't seem to crack it.
Here's the CSS I have for the relevent content:
.container-img-l {
/* float:right; ??? Nothing I tried here seemed to make a difference */
}
.container-img-r {
float:left;
}
.item-pos-l {
margin-left:auto;
border-right:10px solid transparent; /* Margins just collapsed when resizing window */
height:323px;
width:510px;
}
.item-pos-r {
float:left;
border-left:10px solid transparent;
height:323px;
width:510px;
}
The reason for me wanting the div to accurately wrap around the responsive images is that I want to overlay some more CSS content over the images, scaling/re-positioning automatically as the window/device size changes (Click here and you'll clearly see where I'm hoping to implement this responsive style).
Maybe there are clashes with the Bootstrap CSS at play but I'm out of ideas.
Your first link doesn't remotely look like the html you want to make responsive. It would be best to learn responsive and fluid (no pixels heights or widths if possible) css before attempting to modify a framework you are unfamiliar with. Also, you have an error in your html - validate it to make sure you've closed all your elements. Also indent and comment all your code and avoid the use of inline styles.
Demo: http://jsbin.com/wazanu/2/
http://jsbin.com/wazanu/2/edit -- edit link
CSS:
body {background:#eee}
.header {padding:20px;}
.portfolio-grid .col-sm-6 {
margin-bottom: 30px
}
.img-wrapper .title {
text-align:center;
}
#media (min-width:768px) {
.img-wrapper {
position: relative;
overflow: hidden;
}
.img-wrapper img {width:100%;}
.img-wrapper .title {
position: absolute;
text-align:left;
bottom: -90px;
padding: 0 20px 20px 20px;
height: 150px;
background: red;
transition: all .5s ease-in-out;
}
.img-wrapper .title h3 {
margin: 0;
height: 60px;
line-height: 60px;
}
.img-wrapper:hover .title {
bottom: 0
}
}
HTML:
<header class="header text-center">
My header
</header>
<div class="container">
<div class="row portfolio-grid">
<div class="col-sm-6">
<div class="img-wrapper">
<img src="http://placekitten.com/g/400/300" class="img-responsive center-block" alt="">
<div class="title">
<h3>Title of Project</h3>
<p>Content about project goes here</p>
</div>
</div>
</div>
<!--/.col-sm-6 -->
<div class="col-sm-6">
<div class="img-wrapper">
<img src="http://placebear.com/g/400/300" class="img-responsive center-block" alt="">
</div>
</div>
<!--/.col-sm-6 -->
<div class="clearfix visible-sm"></div>
<div class="col-sm-6">
<div class="img-wrapper">
<img src="http://placekitten.com/g/400/300" class="img-responsive center-block" alt="">
</div>
</div>
<!--/.col-sm-6 -->
<div class="col-sm-6">
<div class="img-wrapper">
<img src="http://placekitten.com/g/400/300" class="img-responsive center-block" alt="">
</div>
</div>
<!--/.col-sm-6 -->
</div>
<!--/.row-->
</div>
<!--/.container-->
I have two divs with two images:
<div id="div1">
<div id="div2">
<img src="img1" />
</div>
<img src="img2" />
</div>
Second one is some smaller than first. How can I put second image on first image without using
#div2{
position: absolute;
}
I need to get similar result but without using position absolute property;
The main issue is that there are a lot of other elements, in parent div, not only div2.
Negative margins
You can do lots with negative margins. I've created an example with just two images without any divs.
img {
display: block;
}
.small {
margin: -202px 0 0 0;
border: 1px solid #fff;
}
.small.top {
position: relative;
margin: 0 0 -202px 0;
}
<img src="http://www.lorempixel.com/300/300">
<img class="small" src="http://www.lorempixel.com/200/200">
And some text
<img class="small top" src="http://www.lorempixel.com/200/200">
<img src="http://www.lorempixel.com/300/300">
And some more text
My question to you is why must you do this WITHOUT
#div2 {
position: absolute;
}
If the problem you are encountering is because it's absolute to the page and not the div then make sure #div1 has the following:
#div1 {
position:relative;
}
Its not a good approach to use negative margins. Especially when email templating, gmail reject negative margin and positions. So another way is
<div class='wrapDiv' style='width: 255px;'>
<div class='divToComeUp' style='
float: left;
margin-top: 149px; width:100%;'>This text comes above the .innerDiv
according to the amount of margin-top that you give</div>
<div class='innerDiv' style='width:100%; height:600px'>
Inner div Content
</div>
</div>
You could nest div2 inside div1:
<div id="div1">
<img src="\img1.png" />
<div id="div2">
<img src="\img1.png" />
</div>
</div>
It doesn't stay where I want it, look at this:
<div style="float: left; width: 30%">
<img src="{avatar}" alt="" />
</div>
<div style="float:right; width: 70%; text-align: left">
{message}
</div>
<div style="clear:both"></div>
Internet Explorer:
Mozilla Firefox:
I want the text to be in the top (tried vertical-align: top), and i'd like the image to be in the white box in IE.
Hope someone more skilled can help me out.
Thanks!
Can't figure out the problem :/
Edit: Added whole code
* { padding: 0; margin: 0; }
body {
font: 11px Geneva, "Trebuchet MS", Arial, Verdana, sans-serif;
width: 999px;
background: #EFEFEF;
}
#content {
width: 400px;
}
.thread-content {
padding: 5px;
border: 1px solid #CECFCE;
background: #FFF;
}
div.header {
border: 1px solid #CECFCE;
background: #FFF;
margin-bottom: 10px;
}
<div id="content">
<div class="header">{title}</div>
<div class="thread-content">
<div style="float: left; width: 30%; padding: 5px">
<img src="{avatar}" alt="user avatar" />
</div>
<div style="float: right; width: 70%; text-align: left">
{message}
</div>
<div style="clear:both"></div>
</div>
</div>
Be sure the margin of both are set to 0:
<img src="{avatar}" alt="" style="float: left; width: 30%; margin: 0px"/>
<div style="float:right; width: 70%; text-align: left; margin: 0px">
{message}
</div>
<div style="clear:both"></div>
As css can be really tricky, some other solutions to try:
Let both float left, should make no difference.
Make sure the border doesn't increase the size.
Descrease the width of one a bit, IE is stubborn.
This happens because the sum of the (external) widths of the two floating divs is larger than the internal width of the external box, so they don't fit in the same row.
Try increasing the width of the external div, decreasing its padding, decreasing the width or margin or padding of the internal boxes.
Code works fine when I tried it. You sure there isn't any padding or margin on the image or the text? That would mess up the percentages you're using. If you have it examine the image and text in Firebug to see what styles are being applied.
When you say width: 30% or width: 70% it implies the width of the content inside the div excluding the padding, border and margin of the div. Looking at the images I am sure you have added some padding etc to both divs. Also I do not see any 'background: #fff' in your code, so I am not sure which one is the 'white' box.
Ok, did I get voted down because I used a table?
I am not by trade a designer, I am actually a programmer and I know there are hard-core css designers that cringe at the idea of using a table layout but it seems to works for me. The graphic designers that I work with give auto generated table layout from fireworks to work with which is a real pain.
Anyway the way I personally would try to accomplish the dersired effect though pure css would be more like.
<html>
<head>
<title>SandBox</title>
<style type="text/css">
#outerDiv
{
margin:0;
background-image:url(myImage.gif);
background-position:top left;
background-repeat:no-repeat;
padding-left:30%;
min-height:200px;
background-color:#777777;
}
#innerDiv
{
background-color:#333333;
}
</style>
</head>
<body>
<div id="container" style="width:500px;">
<div id="outerDiv">
<div id="innerDiv">content goes here</div>
</div>
</div>
</body>
Note: I am not a designer. I also made this a wiki. So please edit or at least leave a comment if you going to vote down.
I want to create a simple box with a header bar containing a title and some tool buttons. I have the following markup:
<div style="float:left">
<div style="background-color:blue; padding: 1px; height: 20px;">
<div style="float: left; background-color:green;">title</div>
<div style="float: right; background-color:yellow;">toolbar</div>
</div>
<div style="clear: both; width: 200px; background-color: red;">content</div>
</div>
This renders fine in Firefox and Chrome:
http://www.boplicity.nl/images/firefox.jpg
However IE7 totally messes up and puts the right floated element to the right of the page:
http://www.boplicity.nl/images/ie7.jpg
Can this be fixed?
Specify width in outermost div.
If that width in your content div means this is the total width of your box, simply add it to the outermost div, and (optionally) remove it from content, like this:
<div style="float:left; width: 200px;">
<div style="background-color:blue; padding: 1px; height: 20px;">
<div style="float: left; background-color:green;">title</div>
<div style="float: right; background-color:yellow;">toolbar</div>
</div>
<div style="clear: both; background-color: red;">content</div>
</div>
This is just a quick answer, so I hold my hands up if it doesn't quite work. I think Marko's solution will probably work if you just add min-width rather than width. If you are trying to cater for ie6 as well, you may need to use a hack, as min width is not supported by ie6 and it's descendants.
So this should work with IE7 and other modern browers. Set the min-width to whatever is appropriate.
<div style="float:left; min-width: 200px;">
<div style="background-color:blue; padding: 1px; height: 20px;">
<div style="float: left; background-color:green;">title</div>
<div style="float: right; background-color:yellow;">toolbar</div>
</div>
<div style="clear: both; background-color: red;">content</div>
</div>
I fixed it using jQuery to emulate the behaviour of the non-IE browsers:
// IE fix for div widths - size header to width of content
if (!$.support.cssFloat) {
$("div:has(.boxheader) > table").each(function () {
$(this).parent().width($(this).width());
});
}
Try putting position:relative; to parent-element and to the child-element. It solved the problem for me.
Got to know recently that the right floated elements need to be appended with the divs before the other elements. This is the easiest fix without adding a line of change.
<div style="background-color:blue; padding: 1px; height: 20px;">
<div style="float: right; background-color:green;">title</div>
<div style="float: left; background-color:yellow;">toolbar</div>
</div>
Make this <div style="background-color:blue; padding: 1px; height: 20px;> the parent of the 2 floating divs also clear:all