I have a site that has a fairly complicated footer, see http://www.roadsafetyforchildren.co.uk/, not really sure how to attempt to build it:
I've split the image up into two parts, the first part below needs to be horizontally centered but sit below the content:
The second part needs to repeat horizontally but stay in line with the image above.
Therefore the two images needs to look like the first image at the top of the question.
I can match the two images up IF the content div above it has a fixed height. The problem is the content div NEEDS to be flexible to grow/shrink with the content. Therefore the image at the bottom of the content div moves up and down the page depending on the size of it.
How can I keep the two images lined up with a flexible content div above it?
P.s There's a lot of answers but don't think a few of them have understood the question.
Seems straight forward to me, you will need two divs:
<div id="content">
<div id="inner_content">
<!-- Append image to very bottom -->
<img src="city" width="" height="" alt="" />
</div>
<!-- Background image of hills goes here -->
</div>
CSS is straight forward..
#content { width: 100%; background: url('hills.png') repeat center bottom; }
#inner_content { width: xx; margin: auto; }
try this:
html, body { margin:0; padding:0; min-height:100%;}
html { background: #color url(repeteable.jpg) center bottom repeat-x; }
body { background: white url(footer.jpg) center bottom no-repeat;}
Whatever <div> the content is in should be height:auto and have a background image of five or so pixels high by whatever width and should repeat-y in the css, and the <div class="footer"> should be float:left. That way the footer will always be below the content, and whatever height the content is will have a repeating background.
No need to mess with PS, except to create the bg image for the content.
This would be the bg image for content div, and repeat-y so it repeats from the top down:
And the footer image:
And if you make the 'background repeat' image a png, you could make the drop shadow opaque to accommodate the change in the body bg image.
You can position a background inside an element:
div#footer {
background: url('roadpic.jpg') bottom center no-repeat;
}
<div id="content">your content goes here</div>
<div id="footer">...</div>
which will keep the footer div below the content at all times.
You will need a common anchor point for both the backgrounds. Between a horizontally-resizable window and a content area that is less than 100% of the window width, the only point that can remain constant between the two containers is the horizontal centre of the body.
So your hills background will need to be centred on the body or some other container that has 100% of window width. The road image can either be fixed-position inside a fixed-width centred container (shown in the example below), or centred inside a centred variable-width container.
The resulting CSS will be something like this:
div#wrapper {
width: 100%;
background: url(hills.jpg) center bottom repeat-x #fff;
}
div#content {
width: 800px;
margin: 0 auto;
/* background can be offset to the left or right if the width is fixed
if not it must be centred */
background: url(road.png) right bottom no-repeat;
}
And the HTML:
<body>
<div id="wrapper">
<div id="content">
<p>Some content here</p>
</div> <!-- content -->
</div> <!-- wrapper -->
</body>
The backgrounds of both the containers will have same anchor point and they'll move together as the window is resized!
Because #content is a child of #wrapper, they'll remain aligned vertically because #wrapper will get taller as #content gets taller (unless #content is a float, in which case you'll have to use the :after clearing trick; or if #content is position:absolute, you'll need to align them manually or with javascript).
Related
I have a problem about bottom alignment of a div and I don't find any solutions.
All div are contained in a main div, one is left floated and all other must be place on the right of it;
Just one of them it must be bottom aligned, but trying with position absolute and bottom tag it's placed over the floated one.
CSS:
#container {width:730px;position: relative;min-height:120px;}
#image_box {width:220px; float:left; padding-right:10px;background:#222;color:#FFF;}
#box_dx1 {width:500px;background:#666;}
#box_dx2 {width:500px;padding-top:10px;background:#999;}
#box_dx3 {width:500px;padding-top:10px;background:#CCC;}
HTML:
<div id="container">
<div id="image_box">Box Sx Image <br>Row<br>Row<br>Row<br>Row<br>Row<br>Row</div>
<div id="box_dx1">Box Dx Title</div>
<div id="box_dx2">Box Dx Description</div>
<div id="box_dx3">Box Dx Param</div>
</div>
Moreover div's heights are variable, image_box is optional(cannot exist) and text of box_dx2 could wrap under the image_box.
Any ideas?
Thanks!
If the height of box_dx1, box_dx3 and image-box is always going to be same, you could just set a min-height for box_dx2. That way, if you add more content to box_dx2 it will eventually become taller than the image and text will wrap around it. In your example it would be something like:
#box_dx2 {
width: 500px;
padding-top:10px;
background:#999;
min-height: 70px;
}
jsFiddle
However, if the height of those boxes isn't fixed, maybe the easist thing is to calculate the min-height using some jQuery.
Im trying to have a blueprint layout wich is 950px so I do something like the image below:
Like regular the 950px container ( right box ) is floating center page
Now I'm in the need of having a #menu div floating left towards this 950px box, it should be positioned left to this #container 950px div and have a fixed width.
How can such a thing be accomplished? I tried already several css tricks to no avail, i know there is liquid layout but then the space between #menu and #container will become to big I want that space to be fixed like in below example say 20px the blueprint default.
anyone knows how to make this happen and have the divs stay on page even when screen resizes?
if i understood your question this will do what you want:
body, html
{
width: 100%;
}
<div style="margin: 0 auto; width: 1100px">
<div style="width: 150px; float:left;">
menu
</div>
<div style="width: 950px; float:left;">
right part
</div>
</div>
I am new to Css. I have an HTML page.
<body>
<div id="viewer">
<div id="flow">
<img src="images/beatles.jpg">
<img src="images/blink.jpg">
<img src="images/doves.jpg">
<img src="images/flash.jpg">
<img src="images/floyd.jpg">
<img src="images/jurassic.jpg">
<img src="images/naked.jpg">
<img src="images/prodigy.jpg">
<img src="images/xx.jpg">
<img src="images/zabiela.jpg">
</div> <!--end of <div id="flow"> -->
<ul>
<li id="left">
Left
</li>
<li id="right">
Right
</li>
</ul>
</div> <!--end of <div id="viewer"> -->
</body>
Each image is 200x200. Now i am confused with the css of it. Here i show it step by step
#viewer {
width:700px;
height:220px;
padding:100px 0 30px;
margin:auto;
border:1px solid #000;
position:relative;
}
You define width and height of main Div. Define padding, means each element that is place inside div will place 200px from top, no sapce from left and right, 30px space from bottom of div. Also i want to ask here we define position relative. Is it relative with respect to body or html?
We didn't define the #flow div width and height. So it calculated by the padding. The #flow div width is same as the #viewer width, but place 30px below from top of #viewer div, it's height is 190px, place 30px above from bottom. Please tell me if i am wrong.
#flow:after {
content:"";
display:block;
height:0;
clear:both;
visibility:hidden;
}
Now we are defining content that we want to enter after the #flow div. We set it's visibility hidden, means it is there, taking up the space but not showing. Is it? The thing that i want to ask here is this, that we are using clear:both here. What are we clearing here? we didn't set any float property in the #viewer div?
Now comes the confusing part
#flow img {
display:block;
margin-left:-165px;
position:relative;
top:-15px;
left:245px;
float:left;
background-color:#fff;
}
Now we are setting images, that are in the #flow Div. First thing that i notice which is confusing that if i set it's top property to 1px. Then it align with respect to # flow div. Which is fine because it's position is relative, and it is inside #flow div, so it is aligning with respect to #flow div.
But when i change it's left property to 1px. Then it goes beyond the both divs(#viewer and #flow). Align itself somewhere between the mid of scree left corner and left of div. Why it is happening. If it's position is relative, then it should remain inside the #flow div. This is my confusion.
Also images are shrink to accommodate inside the div. I think it's because of the dov size. That each image is 200x200. Our #flow width is 700px only.
Another thing we set margin-left:-165px;. Right now images are arrange horizontally and also shrink to accommodate in the div. But if i change to margin-left:165px;. Then images are expand vertically and all images are shown. Images are not shrink. Also we set top:-15px;. When are we set values in negative?
It's not an assignment or homework. I am just practicing and i want to know how things are working. Here are the remaining css
#viewer li {
list-style-type:none;
position:absolute;
bottom:10px;
}
#left {
left:20px;
}
#right {
right:20px;
}
Thanks
A good start to find out how the css works is to install firefox with firebug. In firebug, you can hover over elements to see their styling.
Secondly, I would place the images in li tags for better organization.
I have a centered container layout with a right fixed nav div. To make the fixed nav stay in place when viewport resizes it's set up in some nested divs. Problem is the nav div ends up infront of the content. I can change the z-index order but I want both content and nav to be accesible as in being able to "mark" text for example. Any ideas on this? Below is link to code and and an image showing the layout structure
http://jsbin.com/aliru5/3/edit
You are making this more complicated than it needs to be, try this:
<div id="container">
<div id="content"></div>
<div id="nav"></div>
</div>
#container {
margin:0 auto; /* center container in browser */
overflow:hidden; /* clear floats */
width:900px
}
#content {float:left;width:640px}
#nav {float:right;width:240px}
i have this piece of code
<body>
<? while.. (blah blah blah){ ?>
<div class="product">
something
</div>
<? } ?>
</body>
and the css file is
.product{ width:350px; float:left; }
the problem is that body doesn´t have a width, well... actually it has, 90%, but my problem is on the different resolutions, it works perfect for me (1680px width) but when i switch to 1024 as example, the products seems to be off (aligned to the left)
is there any posibility to center those divs with a non static with on their parent container?
If you want multiple divs, all centered as a group, you'll have to wrap them in a parent div, then center that using margins.
Your other option would be to make them display: inline; and use text-align: center on the body to center them. (Or consider making them spans, which default to inline)
if you turn floating off, you can use
margin-right: auto;
margin-left: auto;
If you declare a width in percentage for the div, and then do margin-left:auto;, margin-right:auto;, would that be OK?
You could give the images some left and right padding and that should make your images centered.