[CSS] Overlapping

loserWILL · 20-04-2008, 02:57 PM

I'm in the middle of coding a layout, using transparent PNG's and I've hit a problem. I have the following code:

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Eckoh ~ echo yourself.</title>

<style type="text/css">
body {
font-family: "Trebuchet MS";
font-size: 14px;
color: #939393;
margin: 0;
}

h1 {
font-family: "Arial Rounded MT Bold";
font-size: 36px;
color: #939393;
margin-top: -6px;
padding-left: 10px;
}

#no_avatar {
background-image: url(images/no_avatar.png);
width: 83px;
height: 68px;
float: right;
margin-right: 15px;
margin-top: 9px;
}

#header {
background-image: url(images/header_repeat.png);
width: 100%;
height: 131px;
}

#logo {
background-image: url(images/logo.png);
width: 349px;
height: 125px;
float: left;
}

#welcome {
width: 303px;
float: right;
margin-right: 150px;
margin-top: 10px;
}

#welcome_top {
background-image: url(images/welcome_top.png);
width: 303px;
height: 10px;
}

#welcome_text {
padding-left: 10px;
padding-right: 5px;
}

#welcome_middle {
background-image: url(images/welcome_middle.png);
width: 303px;
font-family: "Arial Rounded MT Bold";
font-size: 18px;
color: #FFFFFF;
}

#welcome_bottom {
background-image: url(images/welcome_bottom.png);
width: 303px;
height: 15px;
}

#content_body {
background-image: url(images/content_repeat.png);
width: 688px;
text-align: left;
}
</style>

</head>

<body>
<!-- HEADER START -->
<div id="header">

<!-- LOGO START -->
<div id="logo"></div>
<!-- LOGO END -->

<!-- WELCOME START -->
<div id="welcome">

<!-- WELCOME TOP START -->
<div id="welcome_top"></div>
<!-- WELCOME TOP KEND -->

<!-- WELCOME MIDDLE START -->
<div id="welcome_middle">
<div id="welcome_text">
<div id="no_avatar"></div>
Welcome back, Will<br />
0 new messages<br />
13 new notifications<br />
2 friend requests
</div>
</div>
<!-- WELCOME MIDDLE END -->

<!-- WELCOME BOTTOM START -->
<div id="welcome_bottom"></div>
<!-- WELCOME BOTTOM END -->

</div>
<!-- WELCOME END -->

</div>
<!-- HEADER END -->

<!-- CONTENT START -->
<div align="center">
<div id="content_body">
<h1>
community
</h1>
</div>
</div>
<!-- CONTENT END -->

<!-- FOOTER START -->
<div id="footer_repeat">

<!-- LEFT FOOTER CONTENT START -->
<div id="left_content"></div>
<!-- LEFT FOOTER CONTENT END -->

<!-- MIDDLE FOOTER CONTENT START -->
<div id="middle_content"></div>
<!-- MIDDLE FOOTER CONTENT END -->

<!-- RIGHT FOOTER CONTENT START -->
<div id="right_content"></div>
<!-- RIGHT FOOTER CONTENT END -->

</div>
<!-- FOOTER END -->

</body>
</html>

And that looks like:

How do I make the shadow (the div with the shadow is called header) overlap the content_body div?

+rep to all help.

Moved by Hitman (Forum Moderator) from Designing & Development: This subforum is a better place for this.

Klydo · 20-04-2008, 03:17 PM

You have to have the .header and whatever the div that is holding the section saying "community" to have z-indexs so the browse knows in what order to show them.

Header div;

Code:

position: relative;
z-index: 99;

Content Body div;

Code:

position: relative;
z-index: 50;

loserWILL · 20-04-2008, 03:31 PM

Oh, thanks!

Thread: [CSS] Overlapping

Thread Tools

[CSS] Overlapping

Posting Permissions