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:
<!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:
http://www.tehupload.com/10787211108.png
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.
<!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:
http://www.tehupload.com/10787211108.png
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.