homepage Welcome to WebmasterWorld Guest from 54.196.136.119
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderator: open

CSS Forum

    
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,

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




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"

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved