...

View Full Version : Z-Index questions



Aceramic
05-14-2008, 06:30 PM
So, I'm doing some more experimenting with CSS positioning and using z-index... My method of CSS rollovers requires the use of z-index, however, as I'm sure you all know, z-index doesn't work when you position everything using margins... And I would like to use margins, and have everything centered. Anyone have any ideas on how I can accomplish this?

This is the code I have currently, I've been trying various things, so it's not actually working at all right now...

CSS:


* {
margin:0px;
padding:0px;
width:100%;
height:100%;
border:none;
}

body {
background-color:#000000;
}

#img_banner {
background-image:url(images/banner.jpg);
background-repeat:no-repeat;
width:557px;
height:76px;
margin:0 auto 0 auto;
z-index:2;
}

#label {
background-image:url(images/label.jpg);
background-repeat:no-repeat;
width:557px;
height:120px;
margin:0 auto 0 auto;
z-index:1;
}


#content {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:14px;
font-weight:bold;
color:#FFFFFF;
border:2px solid #FF0000;
width:50%;
height:auto;
margin:200px auto 0 auto;
}

#resume {
background-color:#FFFFFF;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-weight:normal;
color:#000000;
padding:6px;
overflow:scroll;
width:90%;
margin:10px auto 0 auto;
}

/* Begin Navigation */

#nav {
width:557px;
height:64px;
padding-left:21px;
padding-right:2px;
position:fixed;
left:0px;
top:0px;
z-index:10;
}

#nav_home {
background-image:url(images/btn_home.jpg);
width:72px;
height:64px;
margin:-76px auto 0 auto;
z-index:4;
}

#nav_home:hover {
background-image:url(images/ro_home.jpg);
width:72px;
height:64px;
margin:-76px auto 0 auto;
z-index:5;
}
HTML:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Aceramic Panda Studios - Home</title>
<link href="styles.css" rel="stylesheet" type="text/css" media="screen" />
</head>

<body>
<div id="img_banner"></div>
<div id="label"></div>
<!-- Begin Navigation -->
<div id="nav">
<ul>
<li><a href="index.html" title="Link to Home"><div id="nav_home"></div></a></li>
<li><a href="about.html" title="Link to About Me"><div id="nav_about"></div></a></li>
<li><a href="designs.html" title="Link to Design Gallery"><div id="nav_designs"></div></a></li>
<li><a href="resume.html" title="Link to my Resume"><div id="nav_resume"></div></a></li>
<li><a href="contact.html" title="Link to Contact Information"><div id="nav_contact"></div></a></li>
</ul>
</div>
<!-- End Navigation -->

<!-- Begin Content -->
<div id="content">
Welcome to my portfolio! I am a freelance web designer located in Mesa, Arizona.
I specialize in XHTML and CSS coding, and am also capable of creating layouts, logos, business cards, etc.
Please take a look around, and <a href="contact.html">contact me</a> if you have any questions.
</div>
<!-- End Content -->

</body>
</html>

CaptainB
05-14-2008, 07:04 PM
Just add position:relative; to the CSS items containing the Z-index property.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum