<div id="header"> Header content </div>
<div id="content"> Content </div>
#header {
background-image: url("/Content/Images/bg.png");
background-repeat: repeat-x;
float: left;
height: 45px;
margin: 0;
width: 960px;
z-index: 10;
}
#content {
background-image: url("/Content/Images/separator_shadow_both.png");
background-repeat: repeat-y;
float: left;
margin: -4px 0 0;
padding: 0 10px;
width: 940px;
z-index: 9;
}
Header div have background that have 45 px height - 41 pixel solid color and bottom 4px is transparent shadow. I want that shadow to show above the content. I put content div margin top -4px to crawls under header div, but he appears above instead below of div1. z-indexes are set different... Is it z-index problem or header background can't be positioned above content?
Thank you
The z-index property is only relevant for positioned elements. Solution: Set position: relative on #header. You don’t even need the z-index since positioned elements always render on top on non-positioned ones.
Related
On this page: http://www.chronicallyhappy.nl/
I added a "footer-wrap" div to the "footer" div (in the footer.php of the Wordpress theme). Then in CSS I added a background image to the "footer-wrap" div. The problem: it keeps showing below the background color for the "footer" div. I tried adding "position:relative" and "z-index" values for both divs, but no luck.
This is the result I want to achieve: http://nl.tinypic.com/r/2hhdcwn/8
What am I doing wrong?
My CSS:
.footer-wrap {
padding-top: 19px;
background: url("../style/img/golfjes.png") repeat-x top left;
clear: both;
position: relative;
z-index: 5;
}
.footer {
width: 100%;
padding: 65px 0 31px;
border-bottom: 4px solid #C71A4E;
border-bottom-left-radius: 20px;
border-bottom-right-radius: 20px;
position: relative;
z-index: 1;
}
Thank you so much!
Stefaan
you should put the ribbon in the footer, not wrapping it around, and position it top minus a few pixels. As you have the footer within the wrap, and it has a background color, it overlaps with its bg.
so what you need is:
<footer div with background color>
<ribbon div positioned a bit top minus>
</ribbon div>
<footer content>
</footer content>
</footer div>
I have a DIV which has a red dotted border all around:
HTML for the DIV:
<div id="certificate" style="text-align:center;display:none;">
<img src="imgflo_topleft.png" id=img1 />
<img src="imgflo_bottomleft.png" id=img2 />
<img src="imgflo_topright.png" id=img3 />
<img src="imgflo_bottomright.png" id=img4 />
//OTHER texts will go here but it should not interfere with the images
</div>
CSS:
#certificate {
width: 900px;
margin: 0px auto;
border: 2px dotted red;
padding-right: 5px;
padding-left: 5px;
text-align: center;
}
Image to be placed on each corner of DIV:
Outcome:
You can do this with background images, without creating extra elements.
See this fiddle.
.cert {
min-width: 212;
min-height: 166;
background:
url(http://i.stack.imgur.com/ghI7u.png) left -106px top -83px no-repeat,
url(http://i.stack.imgur.com/ghI7u.png) right -106px top -83px no-repeat,
url(http://i.stack.imgur.com/ghI7u.png) left -106px bottom -83px no-repeat,
url(http://i.stack.imgur.com/ghI7u.png) right -106px bottom -83px no-repeat,
white;
padding: 40px;
}
Also, you can combine the four corner images for faster downloads:
Set position: relative on your container div, and position: absolute on the images in conjunction with top, bottom, left, and right pixel values, i.e:
#img2 { position: absolute; bottom: 0px; left: 0px; }
Absolutely positioned elements are removed from the page flow and thus won't interfere with any other elements inside the container div (text, other graphics, headings and so on).
Or, if your container div is a fixed (set pixel value) size, just use background-image instead for all four corner images and save yourself some page loading time.
If your div has a fix width, you can manage it with two divs and two background images:
HTML:
<div class="topDiv">
<div class="botDiv">
content goes here
</div>
</div>
CSS:
.topDiv {
background: url( topImage.gif ) center top no-repeat;
}
.botDiv{
background: url( bottomImage.gif) center bottom no-repeat;
}
If your div has a fluid width, you could use the same technik, but then with four divs.
It's no clean method, but it works.
How do I center this container so that it is centered from the top, left, and right? I have tried what I have below but it won't work. Not sure what I am missing:
HTML:
<div class="box">
<p>This is a sentence.</p>
</div>
CSS:
.box {
background-color: #444444;
color: #888888;
margin: 0 auto;
position: absolute;
width: 1000px;
height: 20px;
}
Remove position: absolute; and it will center ..
This is because absolutely positioned elements are taken out of the document flow .. and because no other element is using the position property your div is relative to the root <html> element .. hence why it stays at the top-left of the viewport.
On the top of my page I have a background image as below ( http://jsfiddle.net/VnXxj/3/ )
<div id="header">
Register/Login
</div>
#header {
background: url("image.png") repeat-x scroll center bottom;
height: 37px;
padding: 0;
position: absolute;
top: 0;
width: 100%;
z-index: 2;
}
Instead of increasing the image's height in Photoshop, is there any way to add a 20px height div above the image?
I tried background: url("image.png") repeat-x scroll center bottom #888888; but the image it has a transparent ending and it mess it.
Thank you for this
try: #header { margin-top:20px; }
I believe this is what you want: http://jsfiddle.net/VnXxj/4/
EDIT: You might find this more useful as well. It's a bit more dynamic. http://jsfiddle.net/VnXxj/6/
Okey so basically I have:
<div id="content">
... content of arbitrary size ...
</div>
<div id="content_bottom"></div>
The style is:
#content {
background: transparent url(content_tile.png) center top repeat-y;
width: 800px;
}
#content_bottom {
background: transparent url(content_bottom.png) center top no-repeat;
height: 200px;
width: 800px;
}
content_tile.png is a 800x1 image (tiles vertically), and has transparency.
content_bottom.png is a 800x200 image.
Basically, I need to have the content_bottom.png image to replace the #content background image only on the bottom.
Having a negative margin on #content almost works, but since both images are transparent images, they overlap, and it should not happen.
I think that I need to make #content not to render its background on the last 200px on its bottom.
Any idea how I could do that ?
If you altered your markup slightly and used javascript you could do it with an absolutely positioned div that contained only the background. Then onload, set #repeating-background's height to (#content's height - 200px):
HTML
<div id="content">
<div id="text">
This is where your content would go
</div>
<div id="repeating-background"></div>
</div>
CSS
#content {
position: relative;
width: 800px;
background: url(content_bottom.png) left bottom no-repeat;
}
#text {
position: relative;
z-index: 2;
}
#repeating-background {
position: absolute;
z-index: 1;
top: 0;
left: 0;
width: 800px;
height: 1px;
background: url(content_tile.png) left top repeat-y;
}
Javascript (jQuery)
$(document).ready(function() {
$('#repeating-background').height($('#content').height() - 200);
});
create a third div, nested in #content, that is 200px height.