Meti
04-06-2008, 02:26 PM
Hey,
I'm currently coding MetiDesigns main site.
But I've got a problem. How do i make all the sections to be like:
BANNER
NAVIGATION CONTENT BOX
NAVIGATION EXPANDABLE
Disclaimer IMAGE, DISCLAIMER TEXT BOX?
Here's the 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-Language" content="sv">
<title>MetiDesigns.com ::</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252" />
<style type="text/css">
<!--
body {
text-align: center;
background-color: #ffffff;
margin-top: 100px;
}
#container {
width: 800px;
margin: auto;
}
#content {
width: 390px;
font-family: Verdana;
font-size: 10px;
font-weight: normal;
color: #000000;
margin-left: 200px;
}
#top2 {
background: url(images/content/images/top.gif);
height: 31px;
}
#mid2 {
background: url(images/content/images/middle.gif);
}
#bot2 {
background: url(images/content/images/bottom.gif);
height: 23px;
}
#disclaimer {
background-image: url(images/disclaimer/disclaimer.gif);
width: 593px;
height: 48px;
margin-left: 200px;
}
#sub_nav {
background-image: url(images/banner/sub_nav.png);
width: 593px;
height: 48px;
margin-left: 200px;
}
body {
text-align: center;
background-color: #ffffff;
margin-top: 150px;
}
#layout {
width: 390px;
font-family: Verdana;
font-size: 10px;
font-weight: normal;
color: #000000;
fluid: left;
}
#top {
background: url(images/layout/top.gif);
height: 31px;
}
#mid {
background: url(images/layout/middle.gif);
}
#bot {
background: url(images/layout/bottom.gif);
height: 23px;
}
#graphic {
width: 390px;
font-family: Verdana;
font-size: 10px;
font-weight: normal;
color: #000000;
fluid: left;
}
#top1 {
background: url(images/graphic/top.gif);
height: 31px;
}
#mid1 {
background: url(images/layout/middle.gif);
}
#bot1 {
background: url(images/layout/bottom.gif);
height: 23px;
}
-->
</style>
</head>
<body>
<div style="position: absolute; width: 100px; height: 169px; z-index: 1; left: 109px; top: 0px" id="lager1">
<table id="banner" width="800" border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="15">
<img id="banner_01" src="images/banner/banner_01.gif" width="800" height="38" alt=""></td>
</tr>
<tr>
<td rowspan="4">
<img id="banner_02" src="images/banner/banner_02.gif" width="89" height="123" alt=""></td>
<td colspan="6">
<a href="http://www.metidesigns.com">
<img id="header" src="images/banner/header.gif" width="278" height="52" alt="" border="0"></a></td>
<td colspan="8" rowspan="2">
<img id="banner_04" src="images/banner/banner_04.gif" width="433" height="73" alt=""></td>
</tr>
<tr>
<td colspan="6">
<img id="banner_05" src="images/banner/banner_05.gif" width="278" height="21" alt=""></td>
</tr>
<tr>
<td rowspan="2">
<img id="banner_06" src="images/banner/banner_06.gif" width="35" height="50" alt=""></td>
<td>
<img id="home" src="images/banner/home.gif" width="87" height="27" alt=""></td>
<td rowspan="2">
<img id="banner_08" src="images/banner/banner_08.gif" width="5" height="50" alt=""></td>
<td>
<img id="layouts" src="images/banner/layouts.gif" width="87" height="27" alt=""></td>
<td rowspan="2">
<img id="banner_10" src="images/banner/banner_10.gif" width="6" height="50" alt=""></td>
<td colspan="2">
<img id="graphics" src="images/banner/graphics.gif" width="87" height="27" alt=""></td>
<td rowspan="2">
<img id="banner_12" src="images/banner/banner_12.gif" width="6" height="50" alt=""></td>
<td>
<img id="order" src="images/banner/order.gif" width="87" height="27" alt=""></td>
<td rowspan="2">
<img id="banner_14" src="images/banner/banner_14.gif" width="7" height="50" alt=""></td>
<td>
<img id="support" src="images/banner/support.gif" width="87" height="27" alt=""></td>
<td rowspan="2">
<img id="banner_16" src="images/banner/banner_16.gif" width="5" height="50" alt=""></td>
<td>
<img id="contact" src="images/banner/contact.gif" width="87" height="27" alt=""></td>
<td rowspan="2">
<img id="banner_18" src="images/banner/banner_18.gif" width="125" height="50" alt=""></td>
</tr>
<tr>
<td>
<img id="banner_19" src="images/banner/banner_19.gif" width="87" height="23" alt=""></td>
<td>
<img id="banner_20" src="images/banner/banner_20.gif" width="87" height="23" alt=""></td>
<td colspan="2">
<img id="banner_21" src="images/banner/banner_21.gif" width="87" height="24" alt=""></td>
<td>
<img id="banner_22" src="images/banner/banner_22.gif" width="87" height="23" alt=""></td>
<td>
<img id="banner_23" src="images/banner/banner_23.gif" width="87" height="23" alt=""></td>
<td>
<img id="banner_24" src="images/banner/banner_24.gif" width="87" height="23" alt=""></td>
</tr>
<tr>
<td><img src="images/banner/spacer.gif" width="89" height="1" alt=""></td>
<td><img src="images/banner/spacer.gif" width="35" height="1" alt=""></td>
<td><img src="images/banner/spacer.gif" width="87" height="1" alt=""></td>
<td><img src="images/banner/spacer.gif" width="5" height="1" alt=""></td>
<td><img src="images/banner/spacer.gif" width="87" height="1" alt=""></td>
<td><img src="images/banner/spacer.gif" width="6" height="1" alt=""></td>
<td><img src="images/banner/spacer.gif" width="58" height="1" alt=""></td>
<td><img src="images/banner/spacer.gif" width="29" height="1" alt=""></td>
<td><img src="images/banner/spacer.gif" width="6" height="1" alt=""></td>
<td><img src="images/banner/spacer.gif" width="87" height="1" alt=""></td>
<td><img src="images/banner/spacer.gif" width="7" height="1" alt=""></td>
<td><img src="images/banner/spacer.gif" width="87" height="1" alt=""></td>
<td><img src="images/banner/spacer.gif" width="5" height="1" alt=""></td>
<td><img src="images/banner/spacer.gif" width="87" height="1" alt=""></td>
<td><img src="images/banner/spacer.gif" width="125" height="1" alt=""></td>
</tr>
</table>
</div><br>
<br>
<div id="sub_nav" style="width: 698px; height: 30px"><b>
<font face="Verdana" size="2" color="#808080">LINK </font></b>
<font face="Verdana" size="2" color="#C0C0C0">| </font><b>
<font face="Verdana" size="2" color="#808080">LINK </font></b>
<font face="Verdana" size="2" color="#C0C0C0">| </font><b>
<font face="Verdana" size="2" color="#808080">LINK </font></b>
<font face="Verdana" size="2" color="#C0C0C0">| </font><b>
<font face="Verdana" size="2" color="#808080">LINK </font></b>
<font face="Verdana" size="2" color="#C0C0C0">| </font><b>
<font face="Verdana" size="2" color="#808080">LINK </font></b>
<font face="Verdana" size="2" color="#C0C0C0">| </font><b>
<font face="Verdana" size="2" color="#808080">LINK </font></b>
<font face="Verdana" size="2" color="#C0C0C0">| </font><b>
<font face="Verdana" size="2" color="#808080">LINK </font></b>
<font face="Verdana" size="2" color="#C0C0C0">| </font><b>
<font face="Verdana" size="2" color="#808080">LINK </font></b>
<font face="Verdana" size="2" color="#C0C0C0">| </font><b>
<font face="Verdana" size="2" color="#808080">LINK </font></b>
<font face="Verdana" size="2" color="#C0C0C0">|</font></div>
<div id="content" style="width: 569px; height: 35px">
<div id="top2" style="width: 569px; height: 17px"></div>
<div id="mid2">expandable<br></div>
<div id="bot2" style="width: 568px; height: 20px"></div>
<div id="layout" style="width: 193px; height: 238px">
<div id="top" style="width: 193px; height: 30px"></div>
<div id="mid">Latest Layout box expands</div>
<div id="bot" style="width: 193px; height: 17px"></div>
<div id="graphic" style="width: 192px; height: 179px">
<div id="top1" style="width: 193px; height: 30px"></div>
<div id="mid1">Latest Graphic box expands</div>
<div id="bot1" style="width: 201px; height: 17px"></div> </div>
</body>
</html>
Please help.
I'm currently coding MetiDesigns main site.
But I've got a problem. How do i make all the sections to be like:
BANNER
NAVIGATION CONTENT BOX
NAVIGATION EXPANDABLE
Disclaimer IMAGE, DISCLAIMER TEXT BOX?
Here's the 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-Language" content="sv">
<title>MetiDesigns.com ::</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252" />
<style type="text/css">
<!--
body {
text-align: center;
background-color: #ffffff;
margin-top: 100px;
}
#container {
width: 800px;
margin: auto;
}
#content {
width: 390px;
font-family: Verdana;
font-size: 10px;
font-weight: normal;
color: #000000;
margin-left: 200px;
}
#top2 {
background: url(images/content/images/top.gif);
height: 31px;
}
#mid2 {
background: url(images/content/images/middle.gif);
}
#bot2 {
background: url(images/content/images/bottom.gif);
height: 23px;
}
#disclaimer {
background-image: url(images/disclaimer/disclaimer.gif);
width: 593px;
height: 48px;
margin-left: 200px;
}
#sub_nav {
background-image: url(images/banner/sub_nav.png);
width: 593px;
height: 48px;
margin-left: 200px;
}
body {
text-align: center;
background-color: #ffffff;
margin-top: 150px;
}
#layout {
width: 390px;
font-family: Verdana;
font-size: 10px;
font-weight: normal;
color: #000000;
fluid: left;
}
#top {
background: url(images/layout/top.gif);
height: 31px;
}
#mid {
background: url(images/layout/middle.gif);
}
#bot {
background: url(images/layout/bottom.gif);
height: 23px;
}
#graphic {
width: 390px;
font-family: Verdana;
font-size: 10px;
font-weight: normal;
color: #000000;
fluid: left;
}
#top1 {
background: url(images/graphic/top.gif);
height: 31px;
}
#mid1 {
background: url(images/layout/middle.gif);
}
#bot1 {
background: url(images/layout/bottom.gif);
height: 23px;
}
-->
</style>
</head>
<body>
<div style="position: absolute; width: 100px; height: 169px; z-index: 1; left: 109px; top: 0px" id="lager1">
<table id="banner" width="800" border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="15">
<img id="banner_01" src="images/banner/banner_01.gif" width="800" height="38" alt=""></td>
</tr>
<tr>
<td rowspan="4">
<img id="banner_02" src="images/banner/banner_02.gif" width="89" height="123" alt=""></td>
<td colspan="6">
<a href="http://www.metidesigns.com">
<img id="header" src="images/banner/header.gif" width="278" height="52" alt="" border="0"></a></td>
<td colspan="8" rowspan="2">
<img id="banner_04" src="images/banner/banner_04.gif" width="433" height="73" alt=""></td>
</tr>
<tr>
<td colspan="6">
<img id="banner_05" src="images/banner/banner_05.gif" width="278" height="21" alt=""></td>
</tr>
<tr>
<td rowspan="2">
<img id="banner_06" src="images/banner/banner_06.gif" width="35" height="50" alt=""></td>
<td>
<img id="home" src="images/banner/home.gif" width="87" height="27" alt=""></td>
<td rowspan="2">
<img id="banner_08" src="images/banner/banner_08.gif" width="5" height="50" alt=""></td>
<td>
<img id="layouts" src="images/banner/layouts.gif" width="87" height="27" alt=""></td>
<td rowspan="2">
<img id="banner_10" src="images/banner/banner_10.gif" width="6" height="50" alt=""></td>
<td colspan="2">
<img id="graphics" src="images/banner/graphics.gif" width="87" height="27" alt=""></td>
<td rowspan="2">
<img id="banner_12" src="images/banner/banner_12.gif" width="6" height="50" alt=""></td>
<td>
<img id="order" src="images/banner/order.gif" width="87" height="27" alt=""></td>
<td rowspan="2">
<img id="banner_14" src="images/banner/banner_14.gif" width="7" height="50" alt=""></td>
<td>
<img id="support" src="images/banner/support.gif" width="87" height="27" alt=""></td>
<td rowspan="2">
<img id="banner_16" src="images/banner/banner_16.gif" width="5" height="50" alt=""></td>
<td>
<img id="contact" src="images/banner/contact.gif" width="87" height="27" alt=""></td>
<td rowspan="2">
<img id="banner_18" src="images/banner/banner_18.gif" width="125" height="50" alt=""></td>
</tr>
<tr>
<td>
<img id="banner_19" src="images/banner/banner_19.gif" width="87" height="23" alt=""></td>
<td>
<img id="banner_20" src="images/banner/banner_20.gif" width="87" height="23" alt=""></td>
<td colspan="2">
<img id="banner_21" src="images/banner/banner_21.gif" width="87" height="24" alt=""></td>
<td>
<img id="banner_22" src="images/banner/banner_22.gif" width="87" height="23" alt=""></td>
<td>
<img id="banner_23" src="images/banner/banner_23.gif" width="87" height="23" alt=""></td>
<td>
<img id="banner_24" src="images/banner/banner_24.gif" width="87" height="23" alt=""></td>
</tr>
<tr>
<td><img src="images/banner/spacer.gif" width="89" height="1" alt=""></td>
<td><img src="images/banner/spacer.gif" width="35" height="1" alt=""></td>
<td><img src="images/banner/spacer.gif" width="87" height="1" alt=""></td>
<td><img src="images/banner/spacer.gif" width="5" height="1" alt=""></td>
<td><img src="images/banner/spacer.gif" width="87" height="1" alt=""></td>
<td><img src="images/banner/spacer.gif" width="6" height="1" alt=""></td>
<td><img src="images/banner/spacer.gif" width="58" height="1" alt=""></td>
<td><img src="images/banner/spacer.gif" width="29" height="1" alt=""></td>
<td><img src="images/banner/spacer.gif" width="6" height="1" alt=""></td>
<td><img src="images/banner/spacer.gif" width="87" height="1" alt=""></td>
<td><img src="images/banner/spacer.gif" width="7" height="1" alt=""></td>
<td><img src="images/banner/spacer.gif" width="87" height="1" alt=""></td>
<td><img src="images/banner/spacer.gif" width="5" height="1" alt=""></td>
<td><img src="images/banner/spacer.gif" width="87" height="1" alt=""></td>
<td><img src="images/banner/spacer.gif" width="125" height="1" alt=""></td>
</tr>
</table>
</div><br>
<br>
<div id="sub_nav" style="width: 698px; height: 30px"><b>
<font face="Verdana" size="2" color="#808080">LINK </font></b>
<font face="Verdana" size="2" color="#C0C0C0">| </font><b>
<font face="Verdana" size="2" color="#808080">LINK </font></b>
<font face="Verdana" size="2" color="#C0C0C0">| </font><b>
<font face="Verdana" size="2" color="#808080">LINK </font></b>
<font face="Verdana" size="2" color="#C0C0C0">| </font><b>
<font face="Verdana" size="2" color="#808080">LINK </font></b>
<font face="Verdana" size="2" color="#C0C0C0">| </font><b>
<font face="Verdana" size="2" color="#808080">LINK </font></b>
<font face="Verdana" size="2" color="#C0C0C0">| </font><b>
<font face="Verdana" size="2" color="#808080">LINK </font></b>
<font face="Verdana" size="2" color="#C0C0C0">| </font><b>
<font face="Verdana" size="2" color="#808080">LINK </font></b>
<font face="Verdana" size="2" color="#C0C0C0">| </font><b>
<font face="Verdana" size="2" color="#808080">LINK </font></b>
<font face="Verdana" size="2" color="#C0C0C0">| </font><b>
<font face="Verdana" size="2" color="#808080">LINK </font></b>
<font face="Verdana" size="2" color="#C0C0C0">|</font></div>
<div id="content" style="width: 569px; height: 35px">
<div id="top2" style="width: 569px; height: 17px"></div>
<div id="mid2">expandable<br></div>
<div id="bot2" style="width: 568px; height: 20px"></div>
<div id="layout" style="width: 193px; height: 238px">
<div id="top" style="width: 193px; height: 30px"></div>
<div id="mid">Latest Layout box expands</div>
<div id="bot" style="width: 193px; height: 17px"></div>
<div id="graphic" style="width: 192px; height: 179px">
<div id="top1" style="width: 193px; height: 30px"></div>
<div id="mid1">Latest Graphic box expands</div>
<div id="bot1" style="width: 201px; height: 17px"></div> </div>
</body>
</html>
Please help.