As I'm making the template I cant seem to get the text centered in the top nav. Please help with this.
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>
<style type="text/css">
<!--
html {
height: 100%;
}
body {
font-family: Verdana, Geneva, sans-serif;
font-size: 12px;
color: #000;
text-align: center;
height: 100%;
background-color: #CCC;
padding: 0px;
background-image: url(images/containor_bg.jpg);
background-repeat: repeat-y;
background-position: center;
margin: 0px;
}
#containor {
font-family: Verdana, Geneva, sans-serif;
font-size: 12px;
color: #000;
text-align: left;
width: 1000px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
padding: 0px;
background-color: #FFF;
}
#header {
height: 100px;
margin: 0px;
padding: 0px;
}
#flash {
height: 250px;
clear: both;
margin: 0px;
padding: 0px;
background-color: #9A0000;
background-image: url(images/banner_bg.jpg);
background-repeat: repeat-x;
}
#col1 {
float: left;
width: 267px;
margin: 0px;
padding: 0px;
position: relative;
}
#col2 {
margin: 0px;
padding: 0px;
float: right;
width: 732px;
position: relative;
}
#footer {
background-image: url(images/footer_bg.jpg);
background-repeat: repeat-x;
margin: 0px;
padding: 0px;
height: 65px;
clear: both;
background-color: #9A0000;
color: #FFF;
text-transform: capitalize;
}
#top_nav {
width: 267px;
height: 250px;
float: left;
padding: 0px;
margin: 0px;
}
#top_nav_con {
width: 254px;
height: 228px;
border: 1px solid #666;
background-color: #999;
padding: 0px;
margin-top: 10px;
margin-right: auto;
margin-bottom: 10px;
margin-left: auto;
}
#top_nav_con_2 {
background-color: #FFF;
padding: 0px;
width: 240px;
height: 213px;
margin-top: 5px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
border: 1px solid #666;
}
#top_nav_con_2 ul {
font-variant: small-caps;
padding: 0px;
width: 230px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
list-style-type: none;
}
#top_nav_con_2 ul li {
height: 20px;
padding: 0px;
width: 230px;
margin-top: 6px;
margin-right: 0px;
margin-bottom: 6px;
margin-left: 0px;
text-indent: 0px;
}
#top_nav_con_2 ul li a {
font-size: 16px;
text-decoration: none;
margin: 0px;
padding: 0px;
display: block;
border: 1px solid #666;
height: 20px;
}
#banner {
float: right;
height: 250px;
width: 732px;
margin: 0px;
padding: 0px;
}
h1 {
font-size: 24px;
color: #9A0000;
text-transform: capitalize;
margin: 0px;
padding: 5px;
}
a:link {
color: #9A0000;
text-decoration: underline;
}
a:visited {
color: #9A0000;
text-decoration: underline;
}
a:hover {
color: #999;
text-decoration: underline;
}
a:active {
color: #9A0000;
text-decoration: underline;
}
#date {
font-size: 10px;
text-transform: capitalize;
text-align: right;
margin: 0px;
padding: 5px;
width: 250px;
float: right;
}
#logo {
margin: 0px;
padding: 5px;
float: left;
height: 95px;
width: 250px;
}
#server {
text-align: right;
float: right;
width: 250px;
clear: right;
padding: 5px;
margin-top: 40px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
text-transform: capitalize;
color: #9A0000;
}
#content {
margin: 0px;
padding: 0px;
background-color: #FFF;
}
#login {
width: 267px;
height: 120px;
background-color: #CCC;
text-transform: capitalize;
text-align: right;
margin: 0px;
padding: 0px;
border: 1px solid #666;
}
.button {
border: 1px solid #666;
background-color: #9A0000;
color: #FFF;
text-transform: capitalize;
margin: 0px;
font-size: 11px;
}
.red {
color: #9A0000;
font-weight: bold;
text-align: left;
margin: 0px;
padding-top: 5px;
padding-right: 5px;
padding-bottom: 5px;
padding-left: 15px;
text-transform: capitalize;
}
#project {
padding-top: 0px;
margin-top: 10px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
background-color: #CCC;
height: 200px;
border: 1px solid #666;
}
.pro_img {
border: 2px solid #9A0000;
}
#pg_content p {
margin: 0px;
padding: 10px;
}
#btm_nav ul {
margin: 0px;
padding: 10px;
list-style-type: none;
}
#btm_nav ul li {
display: inline;
padding-right: 10px;
padding-left: 10px;
margin: 0px;
padding-top: 0px;
padding-bottom: 0px;
}
#copy {
margin: 0px;
width: 300px;
float: left;
padding-top: 10px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 20px;
}
#design {
width: 300px;
float: right;
padding-top: 10px;
text-align: right;
padding-right: 20px;
margin: 0px;
padding-bottom: 0px;
padding-left: 0px;
}
#btm_nav ul li a:link {
color: #FFF;
text-decoration: none;
}
#btm_nav ul li a:visited {
color: #FFF;
text-decoration: none;
}
#btm_nav ul li a:hover {
color: #FFF;
text-decoration: underline;
}
#btm_nav ul li a:active {
color: #FFF;
text-decoration: none;
}
-->
</style>
</head>
<body>
<div id="containor">
<div id="header">
<div id="date">march 3, 2011</div>
<div id="logo"><img src="images/logo.jpg" width="219" height="95" alt="logo" /></div>
<div id="server"><strong>Los angeles server up-time:</strong><br />
15 days, 4 hours, 37 minutes</div>
</div>
<div id="flash">
<div id="top_nav">
<div id="top_nav_con">
<div id="top_nav_con_2">
<ul>
<li> <a href="#"><img src="images/but_img.jpg" alt="." width="16" height="20" border="0" /> simoni web designs</a></li>
<li> <a href="#"><img src="images/but_img.jpg" alt="." width="16" height="20" border="0" /> about the company</a></li>
<li> <a href="#"><img src="images/but_img.jpg" alt="." width="16" height="20" border="0" /> view portfolio</a></li>
<li> <a href="#"><img src="images/but_img.jpg" alt="." width="16" height="20" border="0" /> website solutions</a></li>
<li> <a href="#"><img src="images/but_img.jpg" alt="." width="16" height="20" border="0" /> hosting solutions</a></li>
<li> <a href="#"><img src="images/but_img.jpg" alt="." width="16" height="20" border="0" /> seo optimization</a></li>
<li> <a href="#"><img src="images/but_img.jpg" alt="." width="16" height="20" border="0" /> addidional services</a></li>
<li> <a href="#"><img src="images/but_img.jpg" alt="." width="16" height="20" border="0" /> contact the company</a></li>
</ul>
</div>
</div>
</div>
<div id="banner"><img src="images/1_banner.jpg" width="732" height="250" /></div>
</div>
<div id="col1">
<div id="login">
<p class="red">)) client login</p>
<form>
<table width="235" border="0" align="center" cellpadding="1" cellspacing="1">
<tr>
<td>login:</td>
<td><input name="client" type="text" /></td>
</tr>
<tr>
<td>password:</td>
<td><input name="password" type="text" /></td>
</tr>
<tr>
<td></td>
<td align="right"><button type="submit" class="button">login</button></td>
</tr>
</table>
</form>
</div>
<div id="project">
<p class="red">)) curent project</p>
<div align="center"><a href="#"><img src="images/feat.JPG" width="250" alt="." class="pro_img" /></a></div>
</div>
</div>
<div id="col2">
<div id="pg_content">
<h1> )) simoni web designs</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eget sapien nibh, ac pellentesque purus. Cras ornare lorem id est egestas egestas. Sed porta rhoncus velit at pharetra. Curabitur lorem enim, varius non rhoncus vitae, volutpat in leo. Nullam dignissim elit vel ipsum laoreet ultrices. Aenean laoreet, est sit amet feugiat fringilla, est erat auctor leo, id fermentum lectus augue vel dolor. Morbi vehicula, quam sed mollis mollis, lacus ipsum vehicula nunc, feugiat mattis purus magna id leo. Aenean eleifend, mauris et pulvinar adipiscing, dui mauris vehicula dolor, ut dictum tellus urna eget quam. Donec faucibus condimentum mi a porttitor. Pellentesque mattis turpis a eros suscipit ultrices. Fusce pretium magna sit amet lacus tempus egestas. Nullam in ante quam, et ultricies mi. Praesent quis quam odio. Etiam fringilla, quam sed euismod ultricies, sapien ante facilisis urna, mollis condimentum quam nunc quis arcu. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Morbi orci magna, facilisis in varius ut, feugiat congue enim. Donec consectetur viverra rutrum. </p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eget sapien nibh, ac pellentesque purus. Cras ornare lorem id est egestas egestas. Sed porta rhoncus velit at pharetra. Curabitur lorem enim, varius non rhoncus vitae, volutpat in leo. Nullam dignissim elit vel ipsum laoreet ultrices. Aenean laoreet, est sit amet feugiat fringilla, est erat auctor leo, id fermentum lectus augue vel dolor. Morbi vehicula, quam sed mollis mollis, lacus ipsum vehicula nunc, feugiat mattis purus magna id leo. Aenean eleifend, mauris et pulvinar adipiscing, dui mauris vehicula dolor, ut dictum tellus urna eget quam. Donec faucibus condimentum mi a porttitor. Pellentesque mattis turpis a eros suscipit ultrices. Fusce pretium magna sit amet lacus tempus egestas. Nullam in ante quam, et ultricies mi. Praesent quis quam odio. Etiam fringilla, quam sed euismod ultricies, sapien ante facilisis urna, mollis condimentum quam nunc quis arcu. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Morbi orci magna, facilisis in varius ut, feugiat congue enim. Donec consectetur viverra rutrum. </p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eget sapien nibh, ac pellentesque purus. Cras ornare lorem id est egestas egestas. Sed porta rhoncus velit at pharetra. Curabitur lorem enim, varius non rhoncus vitae, volutpat in leo. Nullam dignissim elit vel ipsum laoreet ultrices. Aenean laoreet, est sit amet feugiat fringilla, est erat auctor leo, id fermentum lectus augue vel dolor. Morbi vehicula, quam sed mollis mollis, lacus ipsum vehicula nunc, feugiat mattis purus magna id leo. Aenean eleifend, mauris et pulvinar adipiscing, dui mauris vehicula dolor, ut dictum tellus urna eget quam. Donec faucibus condimentum mi a porttitor. Pellentesque mattis turpis a eros suscipit ultrices. Fusce pretium magna sit amet lacus tempus egestas. Nullam in ante quam, et ultricies mi. Praesent quis quam odio. Etiam fringilla, quam sed euismod ultricies, sapien ante facilisis urna, mollis condimentum quam nunc quis arcu. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Morbi orci magna, facilisis in varius ut, feugiat congue enim. Donec consectetur viverra <a href="#">rutrum</a>. </p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eget sapien nibh, ac pellentesque purus. Cras ornare lorem id est egestas egestas. Sed porta rhoncus velit at pharetra. Curabitur lorem enim, varius non rhoncus vitae, volutpat in leo. Nullam dignissim elit vel ipsum laoreet ultrices. Aenean laoreet, est sit amet feugiat fringilla, est erat auctor leo, id fermentum lectus augue vel dolor. Morbi vehicula, quam sed mollis mollis, lacus ipsum vehicula nunc, feugiat mattis purus magna id leo. Aenean eleifend, mauris et pulvinar adipiscing, dui mauris vehicula dolor, ut dictum tellus urna eget quam. Donec faucibus condimentum mi a porttitor. Pellentesque mattis turpis a eros suscipit ultrices. Fusce pretium magna sit amet lacus tempus egestas. Nullam in ante quam, et ultricies mi. Praesent quis quam odio. Etiam fringilla, quam sed euismod ultricies, sapien ante facilisis urna, mollis condimentum quam nunc quis arcu. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Morbi orci magna, facilisis in varius ut, feugiat congue enim. Donec consectetur viverra rutrum. </p>
</div>
</div>
<div id="footer">
<div id="btm_nav">
<ul>
<li>> <a href="#">simoni web designs</a></li>
<li>> <a href="#">web site solutions</a></li>
<li>> <a href="#">hosting solutions</a></li>
<li>> <a href="#">contact SWD</a></li>
</ul>
</div>
<div id="btm_line">
<div id="copy">© 2002 - 2011 simoni web designs, LLC.</div>
<div id="design">design & hosting by simoni web designs</div>
</div>
</div>
</div>
</body>
</html>
Linear Mode
