...

View Full Version : lining up navigation with content



gopi22
12-13-2007, 05:19 PM
Hi, Im pretty new to css, and im currently clueless about a problem I have. All I wanted to do is set the navigation so it is directly in the middle of the main body.

heres my 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=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css" media="all">
@import "mycss1.css";

</style>
</head>

<body>


<div id="navcontainer">

<ul id="nav">
<li id="nav_test"><a href ="default.html">Home</a></li>
<li id="nav_books"><a href ="books.html">Books</a></li>
<li id="nav_films"><a href ="films.html">Films</a></li>
<li id="nav_cd"><a href ="cd.html">Music</a></li>
<li id="nav_games"><a href ="computergames.html">Games</a></li>
<li id="nav_tottenham"><a href ="football.html">Football</a></li>
</ul>

</div>
<div id="container">
<div id="contents">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec sed erat ac massa ornare gravida. Proin sollicitudin, tortor ut posuere varius, est quam blandit nulla, eu ullamcorper sapien leo quis est. Donec consectetuer nulla sed dui. Etiam quam. Maecenas blandit. Aenean tortor pede, placerat quis, ultrices eget, hendrerit vitae, tortor. Nunc ut eros. Sed ornare. Pellentesque at quam. Suspendisse potenti. Proin nunc. Ut augue. Mauris tellus mauris, consectetuer vel, sagittis a, scelerisque quis, lectus. Vestibulum lorem est, luctus in, blandit id, blandit in, tortor. Suspendisse commodo, metus nec bibendum dignissim, augue dui vestibulum urna, sagittis pellentesque quam odio non ligula.

Donec aliquet. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas volutpat malesuada urna. Mauris nonummy, enim vitae pellentesque elementum, lorem massa volutpat quam, nec sagittis nunc lacus ut dolor. Praesent viverra quam id eros. In id enim imperdiet lacus interdum vehicula. Praesent volutpat neque in odio. Phasellus lobortis dolor sed erat. Aenean quam tortor, rutrum adipiscing, tempor et, iaculis iaculis, nulla. Cras ullamcorper imperdiet diam. Vestibulum at massa.



</p>
</div>
</div>



</body>
</html>


and here is my css


body {
color: #333;
background-color: #eee;
padding: 0 5%;
margin:0;
font-family: arial, geneva, lucida, sans-serif;
font-size:83.333%;
}

#container
{
margin-top: 50px;
margin-right:auto;
margin-left:auto;
height: 600px;
width: 700px;
padding: 10px;
}

#navcontainer
{
margin-right:auto;
margin-left:auto;
height: 50px;
width: 700px;
padding: 10px;
}

#contents
{
margin-top: 10px;
margin-right:auto;
margin-left:auto;
height: 500px;
width: 700px;
padding: 10px;
border:double medium;
border-color:#999999;
background-color: #FFF;
color: #000;
overflow:scroll;

}

#nav {
margin-top: 60px;
margin-left:10px;
margin: 0;
padding: 0;
background:#FFFFFF;
list-style-type: none;

}

#nav li {
margin: 0;
padding: 0;
float: left;
}

#nav a {
float: left;
width: 114px;
text-align: center;
color:#000000;
text-decoration: none;
line-height: 2.5;
border-right: 1px solid #FFF;
border-left: 1px solid #FFF;
}

effpeetee
12-13-2007, 06:10 PM
Have you tried this-

#container
{
margin-top: 50px;
margin-right: auto;
margin-left:auto;
height: 600px;
width: 700px;
padding: 10px;
text-align:center;

Frank
}

Apostropartheid
12-13-2007, 06:15 PM
I don't think text-position is a valid CSS property.

I think you need to read Setting Type on the Web to a Baseline Grid (http://www.alistapart.com/articles/settingtypeontheweb/).

effpeetee
12-13-2007, 06:35 PM
Thanks, CyanLight, I have altered it. I really must get to bed earlier.

text-align:center;


Frank



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum