I am an amateur web designer, and I need some help with the HTML/CSS in my portfolio. The general design is this:
With a few modifications. I am using Dream Weaver, unfortunately
. However, it's better than Front Page. Anyways,My code is this for the index.html page:
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>Untitled Document</title>
<link href="styles.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container">
<div id="header"><img src="img/header.gif" width="686" height="152" /></div>
<div id="body">
<div id="nav"><img src="img/nav-bar.gif" border="0" usemap="#Map" />
<map name="Map" id="Map">
<area shape="rect" coords="154,16,217,47" href="#" alt="home" />
<area shape="rect" coords="235,16,323,51" href="#" alt="portfolio" />
<area shape="rect" coords="342,19,434,50" href="#" alt="services" />
<area shape="rect" coords="445,16,527,50" href="#" alt="contact" />
</map>
</div>
<div id="body_top">
<div id="body_left"></div>
<div id="body_right"></div><div id = "float">aaa</div>
</div>
<div id = "body_bottom">adasdasd</div>
</div>
<div id="footer"></div>
</div>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="styles.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container">
<div id="header"><img src="img/header.gif" width="686" height="152" /></div>
<div id="body">
<div id="nav"><img src="img/nav-bar.gif" border="0" usemap="#Map" />
<map name="Map" id="Map">
<area shape="rect" coords="154,16,217,47" href="#" alt="home" />
<area shape="rect" coords="235,16,323,51" href="#" alt="portfolio" />
<area shape="rect" coords="342,19,434,50" href="#" alt="services" />
<area shape="rect" coords="445,16,527,50" href="#" alt="contact" />
</map>
</div>
<div id="body_top">
<div id="body_left"></div>
<div id="body_right"></div><div id = "float">aaa</div>
</div>
<div id = "body_bottom">adasdasd</div>
</div>
<div id="footer"></div>
</div>
</body>
</html>
The CSS is:
CODE
@charset "utf-8";
/* CSS Document */
body {
background-color: #1f1f25;
}
#container {
height: 100%;
width: 686px;
margin: 0 auto;
}
#header {
height: 152px;
}
#body {
background-color: 718191;
background-image: url(img/body-bg2.gif);
background-repeat: no-repeat;
height: 748px;
}
#footer {
background-image: url(img/footer.gif);
height: 28px;
}#nav {
height: 64px;
width: 100%;
}
#body_top {
height: 260px;
width: 100%;
clear: both;
}
#body_left {
height: 225px;
width: 257px;
background-image: url(img/news.gif);
background-repeat: no-repeat;
margin-left: 36px;
margin-top: 19px;
}
#float {
clear:both;
}
#body_right {
background-image: url(img/about.gif);
background-repeat: no-repeat;
height: 225px;
width: 311px;
float: right;
margin-left: 400px;
}
#body_bottom {
width: 100%
}
/* CSS Document */
body {
background-color: #1f1f25;
}
#container {
height: 100%;
width: 686px;
margin: 0 auto;
}
#header {
height: 152px;
}
#body {
background-color: 718191;
background-image: url(img/body-bg2.gif);
background-repeat: no-repeat;
height: 748px;
}
#footer {
background-image: url(img/footer.gif);
height: 28px;
}#nav {
height: 64px;
width: 100%;
}
#body_top {
height: 260px;
width: 100%;
clear: both;
}
#body_left {
height: 225px;
width: 257px;
background-image: url(img/news.gif);
background-repeat: no-repeat;
margin-left: 36px;
margin-top: 19px;
}
#float {
clear:both;
}
#body_right {
background-image: url(img/about.gif);
background-repeat: no-repeat;
height: 225px;
width: 311px;
float: right;
margin-left: 400px;
}
#body_bottom {
width: 100%
}
Wow that's a lot. Anyways, when I look at the preview, it looks like this:
The divs are labeled in the image. I'm trying to get the "about me" to line up with the shadow. If you need the files, I can certainly upload them for you.
Thanks!
