| z-index isn't working?
|
jonasisme
msg:4342103 | 9:48 am on Jul 21, 2011 (gmt 0) |
Hi people..
i'm trying to make a rectangle and then on the right side i want to have a rectangle that is overlapping the one beneath..
i'll post a picture because it's difficult to explain..
[IMG]http://img30.imageshack.us/img30/6703/helpftp.png[/IMG] [imageshack.us]
so this is my code:
red rectangle:
div.wrapper {
display: none;
width: 600px;
z-index: 9999;
}
green rectangle:
div#optin-container {
background: GRADIENT_FROM;
/* For WebKit (Safari, Google Chrome etc) */
background: -webkit-gradient(linear, left top, left bottom, from(GRADIENT_FROM), to(GRADIENT_TO));
/* For Mozilla/Gecko (Firefox etc) */
background: -moz-linear-gradient(top, GRADIENT_FROM, GRADIENT_TO);
/* For Internet Explorer 5.5 - 7 */
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='GRADIENT_FROM', endColorStr='GRADIENT_TO');
/* For Internet Explorer 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='GRADIENT_FROM', endColorstr='GRADIENT_TO')";
-webkit-box-shadow: 0px 0px 10px black;
-moz-box-shadow: 0px 0px 10px black;
box-shadow: 0px 0px 10px black;
margin: 10px 0;
width: 600px;
float: right;
z-index: 9999;
-moz-border-radius: 5px;
border-radius: 5px;
}
div.wrapper div.optin-form-container {
width: 200px;
height: auto;
margin-bottom: 15px;
-moz-border-radius: 5px;
border-radius: 5px;
line-height: 40px;
z-index: 999999998;
float: right;
margin-right: 20px;
background: GRADIENT_FROM_SUB;
/* For WebKit (Safari, Google Chrome etc) */
background: -webkit-gradient(linear, left top, left bottom, from(GRADIENT_FROM_SUB), to(GRADIENT_TO_SUB));
/* For Mozilla/Gecko (Firefox etc) */
background: -moz-linear-gradient(top, GRADIENT_FROM_SUB, GRADIENT_TO_SUB);
/* For Internet Explorer 5.5 - 7 */
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='GRADIENT_FROM_SUB', endColorStr='GRADIENT_TO_SUB');
/* For Internet Explorer 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='GRADIENT_FROM_SUB', endColorstr='GRADIENT_TO_SUB')";
-webkit-box-shadow: 0px 0px 10px black;
-moz-box-shadow: 0px 0px 10px black;
box-shadow: 0px 0px 10px black;
}
html:
<div class="style-wrapper">
<div id="optin-container">
// code
</div>
<div class="optin-form-container">
// code
</div>
</div>
note if i remove the float: right; from div#optin-container then it works.. but then i don't see my gradient.. because the height is 0.
I tried clear: both etc but it didn't work
Please help me out!
Thanks!
|
birdbrain
msg:4342154 | 12:41 pm on Jul 21, 2011 (gmt 0) |
Hi there jonasisme,
try it like this...
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-
1">
<meta name="language" content="english">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>untitled document</title>
<style type="text/css">
#container {
position:relative;
width:600px;
padding:32px 0;
margin:auto;
}
#green {
height:202px;
background-image:-o-linear-gradient(rgb(0,255,0),rgb(0,204,0));
background:-webkit-gradient(linear,left top,left bottom,from(#0f0),to(#0c0));
background:-moz-linear-gradient(top,#0f0,#0c0);
filter:progid:DXImageTransform.Microsoft.gradient
(startColorstr='#00ff00',endColorstr='#00cc00',GradientType=0);
}
#blue {
position:absolute;
width:140px;
height:266px;
top:0;
right:42px;
background-image:-o-linear-gradient(rgb(0,0,204),rgb(0,0,255));
background:-webkit-gradient(linear,left top,left bottom,from(#00c),to(#00f));
background:-moz-linear-gradient(top,#00c,#00f);
filter:progid:DXImageTransform.Microsoft.gradient
(startColorstr='#0000cc',endColorstr='#0000ff',GradientType=0);
}
</style>
</head>
<body>
<div id="container">
<div id="green"></div>
<div id="blue"></div>
</div>
</body>
</html>
|
|
birdbrain [edited by: alt131 at 2:01 pm (utc) on Jul 21, 2011]
[edit reason] Side Scroll [/edit]
|
jonasisme
msg:4342155 | 12:47 pm on Jul 21, 2011 (gmt 0) |
i forgot to say that i didn't want to position it absolute.. because then the height won't automatically fill.. :)
i had it first with absolute, that worked fine and yours will probally work fine too, but i want it without absolute positioning.. any ideas?
Thanks though!
|
birdbrain
msg:4342180 | 1:51 pm on Jul 21, 2011 (gmt 0) |
Hi there jonasisme,
As the z-index attribute only works with positioned elements, my solution was tailored to your problem.
Here is an alternative solution...
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="language" content="english">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>untitled document</title>
<style type="text/css">
#container {
width:600px;
padding-top:32px;
border:1px solid #f00;
margin:auto;
overflow:hidden;
}
#green {
height:202px;
background-image:-o-linear-gradient(rgb(0,255,0),rgb(0,204,0));
background:-webkit-gradient(linear,left top,left bottom,from(#0f0),to(#0c0));
background:-moz-linear-gradient(top,#0f0,#0c0);
filter:progid:DXImageTransform.Microsoft.gradient
(startColorstr='#00ff00',endColorstr='#00cc00',GradientType=0);
}
#blue {
position:relative;
float:right;
width:140px;
min-height:266px;
margin:-234px 42px 0 0;
background-image:-o-linear-gradient(rgb(0,0,204),rgb(0,0,255));
background:-webkit-gradient(linear,left top,left bottom,from
(#00c),to(#00f));
background:-moz-linear-gradient(top,#00c,#00f);
filter:progid:DXImageTransform.Microsoft.gradient
(startColorstr='#0000cc',endColorstr='#0000ff',GradientType=0);
}
#blue p {
margin:10px 5px;
font-family:verdana,sans-serif;
font-size:10px;
color:#fff;
line-height:1.5;
}
</style>
</head>
<body>
<div id="container">
<div id="green"></div>
<div id="blue">
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras volutpat, purus ac
pellentesque adipiscing, mauris ligula convallis metus, vitae scelerisque nibh
orci quis mi. Cum sociis natoque penatibus et magnis dis parturient montes,
nascetur ridiculus mus. Curabitur porttitor aliquam libero. Quisque molestie ornare
sem. Nam euismod sem lacinia ipsum. In pharetra metus ut dolor cursus aliquam.
Maecenas eu ante quis enim tincidunt laoreet. Pellentesque varius nunc in ipsum
pulvinar sollicitudin. Nunc et mi. Donec auctor dignissim orci. Aliquam sed magna.
Pellentesque in dui. In eget elit. Praesent eu lorem.
</p>
</div>
</div>
</body>
</html>
|
|
birdbrain [edited by: alt131 at 2:02 pm (utc) on Jul 21, 2011]
[edit reason] Side Scroll [/edit]
|
jonasisme
msg:4342199 | 2:14 pm on Jul 21, 2011 (gmt 0) |
yes that is exactly what i needed i think! I'll let you know soon!
Thank you very much!
|
jonasisme
msg:4342235 | 3:27 pm on Jul 21, 2011 (gmt 0) |
well yeah i got it working..thanks!
|
birdbrain
msg:4342348 | 5:34 pm on Jul 21, 2011 (gmt 0) |
No problem, you're very welcome. ;)
|
alt131
msg:4343028 | 10:04 am on Jul 23, 2011 (gmt 0) |
Hi jonasisme, pleased you got a solution, but it would be really helpful for later readers if you could identify what made it "work"
|
|
|
