KZ0
Mar 16th, 2010, 01:48 PM
Hi, everyone :)
This is the first time I've ever tried to build a web site from scratch, and I decided to try to use CSS instead of tables. That, however, didn't work out too well. So I'm here looking for some assistance :)
What it looks like in PS before exporting to a bunch of images and rebuilding:
http://i42.tinypic.com/33tmsqv.jpg
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>Malware</title>
<link href="main.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container">
<div id="topBanner">
</div>
<div id="mainContent">
</div>
</div>
</body>
</html>
CSS code:
@charset "utf-8";
/* CSS Document */
/* Structure */
#container{
width:735px;
}
#topBanner{
width:735px;
height:135px;
background-image:url(../_img/banner_top.jpg)
}
#mainContent{
width:735px;
}
#top{
width:735px;
height:69px;
background-image:url(../_img/main_content_top.jpg);
}
#reapeatLeft{
width:62px;
float:left;
background-image:url(../_img/main_content_right_repeat.jpg);
background-repeat:repeat-y;
}
#repeatRight{
width:62px;
float:right;
background-image:url(../_img/main_content_left_repeat.jpg);
background-repeat:repeat-y;
}
#centerContent{
background-color:#646464;
width:649px;
}
#bottom{
width:735px;
height:58px;
background-image:url(../_img/main_content_bottom.jpg);
}
Throwing in the table PS wanted me to use as well, in case it is to any help.
<!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>Malware</title>
<link href="main.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container">
<div id="topBanner">
</div> <!-- End #topBanner -->
<div id="mainContent">
<div id="top">
</div> <!-- End #top -->
<div id="reapeatLeft">
</div> <!-- End #repeatLeft -->
<div id="centerContent">
blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla
</div> <!-- End #centerContent -->
<div id="repeatRight">
</div> <!-- End #repeatRight -->
<div id="bottom">
</div> <!-- End #bottom -->
</div> <!-- End #container -->
</body>
</html>
Some explanation: There's two whole images at the top, the whole top bar, and the beginning of the second one. After that I've tried making three columns, the middle one to contain text / images / etc, and the two at the sides to be the box around the text. I want them to repeat down as far as the middle box containing text stretches. At the bottom I want the image to conclude the second "box". Everything in within a #container.
I would really appreciate some help. Probably some elemental mistake I've made that seems obvious, but as noted, I have very little experience. Thanks in advance!
Update: found some errors I'm working on now. If you are thinking of a long solution to type, you might want to wait until I'm done with what I can. :)
Update2: major cleanup and added comments to keep track. I guess what I'm missing is how to make the two sidebars stretch with the main content bar. Any ideas?
This is the first time I've ever tried to build a web site from scratch, and I decided to try to use CSS instead of tables. That, however, didn't work out too well. So I'm here looking for some assistance :)
What it looks like in PS before exporting to a bunch of images and rebuilding:
http://i42.tinypic.com/33tmsqv.jpg
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>Malware</title>
<link href="main.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container">
<div id="topBanner">
</div>
<div id="mainContent">
</div>
</div>
</body>
</html>
CSS code:
@charset "utf-8";
/* CSS Document */
/* Structure */
#container{
width:735px;
}
#topBanner{
width:735px;
height:135px;
background-image:url(../_img/banner_top.jpg)
}
#mainContent{
width:735px;
}
#top{
width:735px;
height:69px;
background-image:url(../_img/main_content_top.jpg);
}
#reapeatLeft{
width:62px;
float:left;
background-image:url(../_img/main_content_right_repeat.jpg);
background-repeat:repeat-y;
}
#repeatRight{
width:62px;
float:right;
background-image:url(../_img/main_content_left_repeat.jpg);
background-repeat:repeat-y;
}
#centerContent{
background-color:#646464;
width:649px;
}
#bottom{
width:735px;
height:58px;
background-image:url(../_img/main_content_bottom.jpg);
}
Throwing in the table PS wanted me to use as well, in case it is to any help.
<!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>Malware</title>
<link href="main.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container">
<div id="topBanner">
</div> <!-- End #topBanner -->
<div id="mainContent">
<div id="top">
</div> <!-- End #top -->
<div id="reapeatLeft">
</div> <!-- End #repeatLeft -->
<div id="centerContent">
blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla
</div> <!-- End #centerContent -->
<div id="repeatRight">
</div> <!-- End #repeatRight -->
<div id="bottom">
</div> <!-- End #bottom -->
</div> <!-- End #container -->
</body>
</html>
Some explanation: There's two whole images at the top, the whole top bar, and the beginning of the second one. After that I've tried making three columns, the middle one to contain text / images / etc, and the two at the sides to be the box around the text. I want them to repeat down as far as the middle box containing text stretches. At the bottom I want the image to conclude the second "box". Everything in within a #container.
I would really appreciate some help. Probably some elemental mistake I've made that seems obvious, but as noted, I have very little experience. Thanks in advance!
Update: found some errors I'm working on now. If you are thinking of a long solution to type, you might want to wait until I'm done with what I can. :)
Update2: major cleanup and added comments to keep track. I guess what I'm missing is how to make the two sidebars stretch with the main content bar. Any ideas?