I have this code :
<div class="header_photo">
<div class="header_inside">
<div class="header_text">
Text
</div>
</div>
<div class="header_photo_transparent"> </div>
</div>
.header_inside
{
top: 0px;
left: 0px;
display: block;
width: 975px;
background: none repeat scroll 0% 0% transparent;
z-index: 4;
position: absolute;
}
.header_text
{
position:absolute;
bottom:15px;
width:500px;
z-index:201;
left:370px;
font-size:12px;
line-height:13px;
}
.header_photo_transparent
{
position:absolute;
bottom:0;
left:0;
width:960px;
height:64px;
background-color: red;
z-index:100;
}
and I'd like to display the string Text over the red background, without :
changing the z-index of header_photo_transparent;
without removing position:absolute from header_inside
In fact I don't see the string Text.
Why this behaviour? And how can I fix this trouble?
Z-index is not at fault, just remove the z-index and use the positioning. The positioning is out, not the layers.
http://jsfiddle.net/zaSKZ/1/
Related
Im trying to put a background image over an image.
Basically its to show if a 'user' has approved or denied something.
I want if approved to display a green tick over the users display image.
I tried to create it but what i have does not work.
This is what i have so far:
Html
<img class="small-profile-img accepted" src="http://www.image.com/image.gif" alt="">
CSS
.small-profile-img{
width:30px;
display:inline;
border:2px solid #000000;
}
.accepted{
background-image:url("tick.png") !important;
background-repeat:no-repeat;
background-position:right bottom;
z-index:100;
background-size:18px;
}
See jsfiddle for working example.
jsfiddle
The solution would be is to use wrapper with after pseudo element for accepted class:
.accepted:after {
content: '';
display: block;
height: 18px;
width: 18px;
position: absolute;
bottom: 0;
right: 0;
background-image:url("http://cdn1.iconfinder.com/data/icons/checkout-icons/32x32/tick.png");
background-repeat: no-repeat;
background-position: right bottom;
z-index: 100;
background-size: 18px;
}
HTML
<div class="small-profile-img accepted">
<img src="http://2.bp.blogspot.com/-KLcHPORC4do/TbJCkjjkiBI/AAAAAAAAACw/zDnMSWC_R0M/s1600/facebook-no-image1.gif" alt="">
</div>
http://jsfiddle.net/vpgjr/7/
Background images go behind foreground content. An <img> is foreground content.
The only way you could see the background image would be if the foreground image had translucent pixels over the background image.
The tick appears to be content (rather than decoration) though, so it should probably be represented as an <img> anyway.
<div class="image-container">
<img class="small-profile-img"
src="http://www.image.com/image.gif"
alt="">
<img class="approved"
src="tick.png"
alt="Approved">
</div>
.image-container {
position: relative;
}
.image-container .small-profile-img {
position: relative;
z-index: 2;
}
.image-container .approved {
position: absolute;
z-index: 3;
top: 50px;
left: 50px;
}
Why dont you use position:absolute
HMTL
<div class="wrap">
<img src="http://2.bp.blogspot.com/-KLcHPORC4do/TbJCkjjkiBI/AAAAAAAAACw/zDnMSWC_R0M/s1600/facebook-no-image1.gif" alt="">
<div class="inner"> <img src="http://cdn1.iconfinder.com/data/icons/checkout-icons/32x32/tick.png" width="18"/></div>
</div>
CSS
.wrap{
position:relative;
background:red;
height:auto; width:30px;
font-size:0
}
.wrap > img{
width:30px;
display:inline;
}
.inner{
position:absolute;
top:30%;
left:50%;
margin:-5px 0 0 -9px
}
DEMO
set
position:absolute
Then set left,top (bottom,right if needed) property.
yea, i'd go the other way around.
change the class of the img when it's accepted.
HTML:
<div class='holder'>
<img class='unaccepted' src="http://cdn1.iconfinder.com/data/icons/checkout-icons/32x32/tick.png" alt="">
</div>
CSS:
.small-profile-img{
width:30px;
display:inline;
border:2px solid #000000;
}
.holder{
width:40px;
height:30px;
background-image:url("http://2.bp.blogspot.com/-KLcHPORC4do/TbJCkjjkiBI/AAAAAAAAACw/zDnMSWC_R0M/s1600/facebook-no-image1.gif");
background-size: 100%, 100%;
background-repeat:no-repeat;
background-position:center;
text-align: center;
}
.accepted{
border:none;
display:inline;
}
.unaccepted{
display:none;
}
I'm trying to make fixed 100% but with a little frame around.
I just cant get it right, the frame would appear EITHER top/ bottom, or left/ right, but not from both sides...
Here's what I've got so far:
div.all_reviews{
background: url(../design/trans-gr.png);
position:fixed;
width:100%;
height:100%;
z-index:12500;
padding:15px;
}
div.wrap1{
width:100%;
height:100%;
background-color:#00AEEF;
}
EDIT:1 ALLRIGHT THEN, This is what I've gotten to so far:
http://jsfiddle.net/Hm7Mw/
div.all_reviews{
background: url(../design/trans-gr.png);
position:fixed;
width:100%;
height:100%;
z-index:12500;
overflow:auto;
}
div.wrap1{
display: block;
position:absolute;
height:auto;
width:100%;
min-width:962px;
bottom:6px;
top:6px;
left:0px;
right:0px;
}
div.wrap2{
margin:0px auto;
max-width:960px;
height:100%;
position:relative;
overflow:visible;
}
div.wrap3{
overflow:hidden;
height:auto;
min-height:100%;
width:100%;
position:absolute;
background-color: #FFF;
}
Again, it works perfectly with scrolling - ie,. I've made it scroll the whole thing, rather than what's inside the wraps.
However if I scroll it down, the padding at the bottom vanishes for some reason.
if I put overflow auto to the inner containers instead, then it would sort of 'fix' it, but they would have very ugly scrollbars in the middle of the screen- which I don't want.
HTML:
<div class="all_reviews">
<div class="wrap1">
<div class="wrap2">
<div class="wrap3">
(BLA)
</div>
</div>
</div>
</div>
</div>
You need something like this:
.onTopOfAll {
bottom: 0;
left: 0;
position: fixed;
right: 0;
top: 0;
z-index: 1;
/* Something else for style */
}
.onTopOfTop {
bottom: 15px;
left: 15px;
position: fixed;
right: 15px;
top: 15px;
z-index: 2;
/* Something else for style */
}
<div class="all_reviews">
<div class="wrap1">
<div class="wrap2">
<div class="wrap3">
/8Content/8
</div>
</div>
</div>
</div>
all_reviews{
background: url(../design/trans-gr.png);
position:fixed;
width:100%;
height:100%;
z-index:12500;
display:none;
}
div.wrap1{
display: block;
position:absolute;
height:auto;
width:100%;
bottom:25px;
top:5px;
left:-10px;
right:0px;
}
div.wrap2{
margin:0px auto;
width:100%;
max-width:940px;
min-height:100%;
position:relative;
}
div.wrap3{
overflow:auto;
height:100%;
width:100%;
position:absolute;
background-color: #FFF;
border:5px solid #CCC;
padding:5px;
}
Note to undo display : none with a script, and make the body fixed with overflow:hidden, so it doesn't scroll along the way on the background.
Try height and width of auto of div.all instead of 100%. You may need to add a height of 100% to your body.
your padding is adding some extra width in your div. You gave you div a width of 100% and as you applied the padding now the total width is 15px + 100% + 15px. If you can provide your html as well some idea about what you are going to do then it'll be helpful for rest of us to help you.
thanks.
I have a header that is larger than most screen widths. I centered that and I have the overflow hidden so when you expand your browser on a bigger screen more of it is visible. I also have 2 images on top of that, one floating right and one floating left. my problem is that the left image is in place floating left but the right image won't go all the way right. both if I put both images on the same z-index they just stack instead of floating right and left. Any suggestions? here is my css and html:
#triangleleft{
width:100%;
height:531px;
z-index:58;
position:absolute;
top:+53px;
}
#triangleright{
width:100%;
height:531px;
z-index:59;
position:absolute;
top:+53px;
}
.triangleleft{
background:url(Layer-58.png)no-repeat;
float:left;
margin-left:0px;
height:531px;
width:100%;
}
.triangleright{
background:url(Layer-59.png)no-repeat;
float:right;
margin-right:0px;
height:531px;
width:100%;
}
<div id="triangleleft">
<div class="triangleleft"></div>
</div>
<div id="triangleright">
<div class="triangleright"></div>
</div>
also here is the code for my header image that I think is screwing this up
#wrapper {
height:100%;
position: relative;
}
#Layer-57 {
position: relative;
height:529px;
background:#3b96a9 url(layer-57.jpg) top center no-repeat;
top:-529px;
overflow-x: hidden;
z-index: 57;
}
<div id="wrapper"> <div id="Layer-57"></div> </div>
replace your style with this
<style>
#triangleleft {
width:90%;
height: 531px;
z-index: 58;
position: absolute;
top: +53px;
}
#triangleright {
width:90%;
height: 531px;
z-index: 59;
position: absolute;
top: +53px;
}
.triangleleft {
background: url(Layer-58.png)no-repeat;
float: left;
margin-left: 0px;
height: 531px;
width: 100%;
}
.triangleright {
background: url(Layer-59.png)no-repeat;
float: right;
margin-right: 0px;
height: 531px;
width: 100%;
}
</style>
Revised Answer (previous answer removed for clarity's sake):
Looking closer at the leaderbe.com page you referenced in your comment below, I noticed that the HTML structure of the divs was quite different than what you had. You need to put the triangleright div inside the triangleleft div and use styles like follows:
See this jsfiddle: http://jsfiddle.net/uKrNT/2/
<div id="wrapper"> <div id="Layer-57">layer 57</div> </div>
<div id="triangleleft">
<div id="triangleright">
</div>
</div>
#triangleleft{
width:100%;
height:531px;
z-index:58;
position:absolute;
top:+53px;
float:left;
background:red url(http://www.leaderbe.com/images/diamond-left.png)no-repeat;
margin-left:0px;
overflow:visible;
opacity:.5;
}
#triangleright{
width:100%;
height:531px;
z-index:59;
float:right;
background:blue url(http://www.leaderbe.com/images/diamond-right.png)no-repeat;
margin-right:0px;
opacity: .5;
overflow:visible;
}
#wrapper { height:100%; position: relative; }
#Layer-57 { position: relative; height:529px; background:#3b96a9 url(layer-57.jpg) top center no-repeat; top:-529px; overflow-x: hidden; z-index: 57; }
I have following html. How can I get this so that dragDiv is shown on top of the image?
<div id="pnlContainer" class="container">
<img id="cropbox" src='1.jpg' />
<div class="dragDiv" id="dragDiv">
</div>
</div>
.dragDiv {
width:400px;
background-color:transparent;
border:2px solid #CCCCCC;
position:relative;
left:20px;
top:20px;
padding:0px;
margin:0px;
height:50px;
}
Currently, you're actually moving the dragDiv down and away from the image. If you just change your code to -20px and -20px on the .dragDiv css, it will be over the image.
Or, you could give the "pnlContainer" relative positioning, then absolutely position both the "dragDiv", and the "cropBox" - you shouldn't need z-index - just by positioning, the div will appear over the image in this case.
Either way is just fine. Bottom line is - positioning them correctly in this case will get the div over the image.
<style type="text/css">
#pnlContainer {
position: relative;
}
#dragDiv {
position: absolute;
top: 0px;
left: 0px;
width:400px;
background-color: transparent;
border:2px solid #CCCCCC;
position:relative;
left:20px;
top:20px;
padding:0px;
margin:0px;
height:50px;
}
#cropbox {
position: absolute;
top: 0px;
left: 0px;
}
</style>
You could make sure one element appears above the other using the Z-index CSS property:
alt text http://img13.imageshack.us/img13/9776/dviswheretogo.png
Blue is where the image of the corners will go
Green is a repeating image on the x axis on the top, all part of the same template!
And orange is a simgle image repeating on the y axis
For clarification here is what I've tried so far, i'm angry about this because when I use relative position it breaks because of an with background that is above! Anyway I need to define a height and width for each item!
.sheet {position:relative;
top:140px;
width:1000px;}
.tl {
background:url(../images/sheet_top_left-trans.png) no-repeat;
width:20px;
height:20px;
top:0px;
left:0px;}
.tm {
background:url(../images/sheet_top-trans.png) repeat-x;
width:960px;
height:20px;}
.tr {
background:url(../images/sheet_top_right-trans.png) no-repeat;
width:20px;
height:20px;
top:0px;
right:0px;}
.content {
background:url(../images/sheet_middle.png) repeat-y;
top:20px;
width:1000px;
height:400px;}/* Demonstration only, please remove later */
.bl {
background:url(../images/sheet_bottom_left-trans.png) no-repeat;
width:20px;
height:30px;}
.bm {
background:url(../images/sheet_bottom-trans.png) repeat-x;
height:30px;
width:960px;
bottom:0px;
left:20px;}
.br {}
and the html
<div class="sheet"><!-- Glass Effect Starts here -->
<div class="tl"></div>
<div class="tm"></div>
<div class="tr"></div>
<div class="content">Here we go again</div>
<div class="bl"></div>
<div class="bm"></div>
<div class="br"></div>
If I use absolute postitioning I can't make the bottom images stick to it! tho it works at the top!
Now I've found I way to do it that is cross-browser (even IE6 just don't use transparent PNG as I did) here we go:
HTML:
<div class="sheet">
<div class="top_sheet">
<div class="tl"></div>
<div class="tm"></div>
<div class="tr"></div>
</div>
<div class="middle">.</div>
<div class="bottom_sheet">
<div class="bl"></div>
<div class="bm"></div>
<div class="br"></div>
</div>
</div><!-- End of the sheet class -->
CSS:
.sheet {position:relative;
width:1000px;
top:10px;}
.top_sheet {width:1000px;
height:20px;}
.tl {float:left;
background:url(../images/sheet_top_left-trans.png) no-repeat;
height:20px;
width:20px;}
.tm {float:left;
background:url(../images/sheet_top-trans.png) repeat-x;
height:20px;
width:960px;}
.tr {float:right;
background:url(../images/sheet_top_right-trans.png) no-repeat;
height:20px;
width:20px;}
.middle {position:relative;
background: url(../images/sheet_middle.png) repeat-y;
width:1000px;
height:400px;}
bottom_sheet {width:1000px;
height:30px;}
.bl {float:left;
background:url(../images/sheet_bottom_left-trans.png) no-repeat;
width:20px;
height:30px;}
.bm {float:left;
background:url(../images/sheet_bottom-trans.png) repeat-x;
width:960px;
height:30px;}
.br {float:right;
background:url(../images/sheet_bottom_right-trans.png) no-repeat;
width:20px;
height:30px;}
Trying to use the same html you already have, here is something that seems to work pretty well.
Move the corners into an all encompassing top and bottom bar. And then float the respective corners left and right.
CSS:
.sheet {
position:relative;
width:1000px;
top:140px;}
.tl {
background:url(images/sheet_top_left-trans.png) no-repeat;
float:left;
width:20px;
height:20px;
margin-left:-20px;}
.tm {
background:url(images/sheet_top-trans.png) repeat-x;
height:20px;
margin-left:20px;}
.tr {
background:url(images/sheet_top_right-trans.png) no-repeat;
float:right;
width:20px;
height:20px;}
.content {
background:url(images/sheet_content.png) repeat-y;
clear:both;
height:200px;}/* Demonstration only, please remove later */
.bl {
background:url(images/sheet_bottom_left-trans.png) no-repeat;
float:left;
width:20px;
height:30px;}
.bm {
background:url(images/sheet_bottom-trans.png) repeat-x;
height:30px;}
.br {
background:url(images/sheet_bottom_right-trans.png) no-repeat;
float:right;
width:20px;
height:30px;}
HTML:
<div class="sheet"><!-- Glass Effect Starts here -->
<div class="tm">
<div class="tl"></div>
<div class="tr"></div>
</div>
<div class="content">Here we go again</div>
<div class="bm">
<div class="bl"></div>
<div class="br"></div>
</div>
</div>
Have you tried some cross-browser css framework, e.g. http://www.blueprintcss.org?
These frameworks usually let you define grids and will help you to overcome browser-specific quirks by resetting certain css properties ...
Fluid width containers with rounded corners using valid CSS and XHTML
The method I usually see is nesting all the divs to layer them, then setting the background-repeat and background-position on each one. Basic example:
<div class="tl">
<div class="tr">
<div class="content">Here we go again</div>
</div>
</div>
With CSS:
.tl, .tr {
width: 100%;
height: 100%;
}
.tl {
background: url("tl.png") no-repeat 0 0;
}
.tr {
background: url("tr.png") no-repeat 100% 0;
}
Simply scale that up to use all your separate images. You'll need to have the sides first (on the outside of the 'div nest') and the corners last (on the inside, right before the content div).
It's a classic case of "divitis", but it's hard to avoid until CSS3 is well supported (where you can use multiple backgrounds or simply a border image). You might was to check out Sliding Doors, which shows a technique for reducing the number of elements/images needed.
css:
.sheet {
position:relative;
top:140px;
width:1000px;
}
.tl {
background:url(blue.bmp) no-repeat;
width:20px;
height:20px;
top:0px;
left:0px;
}
.tm {
position: absolute;
background:url(green.bmp) repeat-x;
width:960px;
height:20px;
left: 20px;
top: 0px;
}
.tr {
position: absolute;
background:url(blue.bmp) no-repeat;
width:20px;
height:20px;
top:0px;
right:0px;
}
.content {
background:url(orange.bmp) repeat-y;
top:20px;
width:1000px;
height:400px;}/* Demonstration only, please remove later */
.bl {
background:url(blue.bmp) no-repeat;
width:20px;
height:30px;}
.bm {
position: absolute;
background:url(green.bmp) repeat-x;
height:30px;
width:960px;
bottom:0px;
left:20px;}
.br {
position: absolute;
background:url(blue.bmp) no-repeat;
width:20px;
height:30px;
top:420px;
right:0px;
}
html:
<div class="sheet"><!-- Glass Effect Starts here -->
<div class="tl"></div>
<div class="tm"></div>
<div class="tr"></div>
<div class="content">Here we go again</div>
<div class="bl"></div>
<div class="bm"></div>
<div class="br"></div>
I put absolute positioning on each divs so that we can position it side by side. Hope it helps.
BTW, I changed the background url. :)
Winks as he says this and may regret it:
You know, if you used a table... ;>P!
(Now, waits for the tables vs. css crowd to unleash!)
This looks like your regular, garden-variety rounded corners 'section'.
Here's one without images:
http://www.html.it/articoli/nifty/index.html
Here's one with:
http://kalsey.com/2003/07/rounded_corners_in_css/
When you're finished coding it and it looks like what you want, turn it into a code snippet and keep it.
I don't mean to be a smartarse, but you hardly need 7 divs for what you try to achieve. Five divs are enough (in most case you don't even need that. I really don't know how to explain, but you can check http://www.nil.com/english (Quick links or Get support boxes) for source.
Also, there is a great book about it called "Bulletproof web design"
You were close. You yet have to position the containing element relative (so that all absolute positioned child elements are relative to it) and to position the corner parts absolute. Here's a SSCCE:
<!doctype html>
<html lang="en">
<head>
<title>SO question 1898479</title>
<style>
.sheet {
position: relative;
width: 200px;
}
.tl {
position: absolute;
width:20px;
height:20px;
top: 0;
left: 0;
background: blue;
}
.tm {
position: absolute;
height:20px;
top: 0;
left: 20px;
right: 20px;
background: green;
}
.tr {
position: absolute;
width: 20px;
height: 20px;
top: 0;
right: 0;
background: blue;
}
.content {
background: orange;
padding: 20px 0; /* Padding must be at least as much as the "borders" are thick. */
height: 300px;
}
.bl {
position: absolute;
width: 20px;
height: 20px;
bottom: 0;
left: 0;
background: blue;
}
.bm {
position: absolute;
height: 20px;
bottom: 0;
left: 20px;
right: 20px;
background: green;
}
.br {
position: absolute;
width: 20px;
height: 20px;
bottom: 0;
right: 0;
background: blue;
}
</style>
</head>
<body>
<div class="sheet">
<div class="tl"></div>
<div class="tm"></div>
<div class="tr"></div>
<div class="content">Here we go again</div>
<div class="bl"></div>
<div class="bm"></div>
<div class="br"></div>
</div>
</body>
</html>
You only need to ensure that you're using the strict doctype as used in the above example so that it works in IE as well.