Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Feb 2006
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    lining up navigation with content

    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

    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
    Code:
    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;
    }

  • #2
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    Have you tried this-

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

    Frank
    }
    Last edited by effpeetee; 12-13-2007 at 06:34 PM. Reason: Correction
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #3
    The Apostate Apostropartheid's Avatar
    Join Date
    Oct 2007
    Posts
    3,215
    Thanks
    16
    Thanked 265 Times in 263 Posts
    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.

  • #4
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    Thanks, CyanLight, I have altered it. I really must get to bed earlier.

    text-align:center;


    Frank
    Last edited by effpeetee; 12-13-2007 at 07:20 PM.
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •