VistaBoy
06-02-2008, 11:45 PM
okay i need help with this html/css code this is what got but the nav bit stuffed up like the rounded images are right like sitting on thinbar but the are right like on the roundedbox is higher then that thinbar and stuffs it up.
here is an image:
http://www.ohupload.com/files/1202341482.png
here is the code
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1256">
<style type="text/css">
<!--
/* Clear all brouser margins and paddings, helps combat cross brouser compatability issues */
* { padding:0; margin:0; }
body {
font:Verdana, Arial, Helvetica, sans-serif;
color:#666;
}
#wrapper {
width:100%;
}
#head {
float:left;
width:100%;
padding:25px;
color:#000;
font-weight:bold;
background-color:#E1E2E3;
}
#navigation {
float:left;
width:100%;
color:#000;
font-weight:bold;
background-color:#E1E2E3;
}
#roundedleft {
float:left;
width:20px;
background:#3A4A55;
margin-left:30px;
margin-bottom:-2px;
}
#roundedbox {
float:left;
width:400px;
background:#3A4A55;
margin-bottom:-1px;
}
#roundedright {
float:left;
width:20px;
background:#3A4A55;
margin-bottom:-2px;
}
#thinbar {
float:left;
width:100%;
background:#C8C9CA;
height:2px;
}
#content {
clear:both;
float:left;
padding:10px;
}
-->
</style>
</head>
<body>
<div id="wrapper">
<div id="head">Logo Here</div>
<div id="navigation">
<div id="roundedleft"><img src="images/img-04.PNG" alt="" border="0"></div><div id="roundedbox">Home</div><div id="roundedright"><img src="images/img-12.PNG" alt="" border="0"></div></div>
<div id="thinbar"></div>
<div id="content">The Content HereThe Content HereThe Content HereThe Content HereThe Content HereThe Content HereThe Content HereThe Content HereThe Content HereThe Content HereThe Content HereThe Content HereThe Content HereThe Content HereThe Content HereThe Content HereThe Content HereThe Content HereThe Content HereThe Content HereThe Content HereThe Content HereThe Content HereThe Content HereThe Content HereThe Content HereThe Content HereThe Content HereThe Content HereThe Content HereThe Content HereThe Content HereThe Content HereThe Content HereThe Content HereThe Content HereThe Content HereThe Content HereThe Content HereThe Content HereThe Content HereThe Content HereThe Content HereThe Content HereThe Content HereThe Content HereThe Content HereThe Content HereThe Content HereThe Content HereThe Content HereThe Content HereThe Content HereThe Content HereThe Content HereThe Content HereThe Content HereThe Content HereThe Content HereThe Content HereThe Content HereThe Content HereThe Content HereThe Content HereThe Content HereThe Content HereThe Content HereThe Content HereThe Content HereThe Content HereThe Content HereThe Content HereThe Content HereThe Content HereThe Content HereThe Content HereThe Content HereThe Content HereThe Content HereThe Content HereThe Content HereThe Content HereThe Content HereThe Content HereThe Content HereThe Content HereThe Content HereThe Content HereThe Content HereThe Content HereThe Content HereThe Content HereThe Content HereThe Content HereThe Content Here</div>
</div>
</body>
</html>
here is an image:
http://www.ohupload.com/files/1202341482.png
here is the code
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1256">
<style type="text/css">
<!--
/* Clear all brouser margins and paddings, helps combat cross brouser compatability issues */
* { padding:0; margin:0; }
body {
font:Verdana, Arial, Helvetica, sans-serif;
color:#666;
}
#wrapper {
width:100%;
}
#head {
float:left;
width:100%;
padding:25px;
color:#000;
font-weight:bold;
background-color:#E1E2E3;
}
#navigation {
float:left;
width:100%;
color:#000;
font-weight:bold;
background-color:#E1E2E3;
}
#roundedleft {
float:left;
width:20px;
background:#3A4A55;
margin-left:30px;
margin-bottom:-2px;
}
#roundedbox {
float:left;
width:400px;
background:#3A4A55;
margin-bottom:-1px;
}
#roundedright {
float:left;
width:20px;
background:#3A4A55;
margin-bottom:-2px;
}
#thinbar {
float:left;
width:100%;
background:#C8C9CA;
height:2px;
}
#content {
clear:both;
float:left;
padding:10px;
}
-->
</style>
</head>
<body>
<div id="wrapper">
<div id="head">Logo Here</div>
<div id="navigation">
<div id="roundedleft"><img src="images/img-04.PNG" alt="" border="0"></div><div id="roundedbox">Home</div><div id="roundedright"><img src="images/img-12.PNG" alt="" border="0"></div></div>
<div id="thinbar"></div>
<div id="content">The Content HereThe Content HereThe Content HereThe Content HereThe Content HereThe Content HereThe Content HereThe Content HereThe Content HereThe Content HereThe Content HereThe Content HereThe Content HereThe Content HereThe Content HereThe Content HereThe Content HereThe Content HereThe Content HereThe Content HereThe Content HereThe Content HereThe Content HereThe Content HereThe Content HereThe Content HereThe Content HereThe Content HereThe Content HereThe Content HereThe Content HereThe Content HereThe Content HereThe Content HereThe Content HereThe Content HereThe Content HereThe Content HereThe Content HereThe Content HereThe Content HereThe Content HereThe Content HereThe Content HereThe Content HereThe Content HereThe Content HereThe Content HereThe Content HereThe Content HereThe Content HereThe Content HereThe Content HereThe Content HereThe Content HereThe Content HereThe Content HereThe Content HereThe Content HereThe Content HereThe Content HereThe Content HereThe Content HereThe Content HereThe Content HereThe Content HereThe Content HereThe Content HereThe Content HereThe Content HereThe Content HereThe Content HereThe Content HereThe Content HereThe Content HereThe Content HereThe Content HereThe Content HereThe Content HereThe Content HereThe Content HereThe Content HereThe Content HereThe Content HereThe Content HereThe Content HereThe Content HereThe Content HereThe Content HereThe Content HereThe Content HereThe Content HereThe Content HereThe Content HereThe Content Here</div>
</div>
</body>
</html>