Welcome to WebmasterWorld Guest from 54.144.124.152

Forum Moderators: not2easy

Message Too Old, No Replies

z-index isn't working?

     

jonasisme

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

12:41 pm on Jul 21, 2011 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



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

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

1:51 pm on Jul 21, 2011 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Hi there jonasisme,

z-index isn't working?

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

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

3:27 pm on Jul 21, 2011 (gmt 0)



well yeah i got it working..thanks!

birdbrain

5:34 pm on Jul 21, 2011 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



No problem, you're very welcome. ;)

alt131

10:04 am on Jul 23, 2011 (gmt 0)

WebmasterWorld Senior Member 5+ Year Member



Hi jonasisme, pleased you got a solution, but it would be really helpful for later readers if you could identify what made it "work"
 

Featured Threads

Hot Threads This Week

Hot Threads This Month