Advanced Search

Results 1 to 3 of 3

Thread: Centering Nav. Bar.

  1. #1
    Join Date
    Jan 2011
    Location
    USA
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Centering Nav. Bar.

    Iím trying to get the navigation bar centered.

    <div align="center"> centers my page but I cant get passed float:left;
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml"> 
    
    <head>
    <title>curbappeal12811strict</title>
    </head>
    
    <style type="text/css">
    
    ul
    {
    list-style-type:none;
    margin:0;
    padding:0;
    overflow:hidden;
    }
    li
    {
    float:left;
    }
    a:link,a:visited
    {
    display:block;
    width:120px;
    font-weight:bold;
    color:#FFFFFF;
    background-color:#98bf21;
    text-align:center;
    padding:4px;
    text-decoration:none;
    text-transform:uppercase;
    }
    a:hover,a:active
    {
    background-color:#7A991A;
    }
    
    </style>
    </head>
    
    <body>
    
    <div align="center">
    <h1>Matt Galaska's Curb Appeal</h1>
    
    <ul>
    <li><a href="#home">Home</a></li>
    <li><a href="#news">News</a></li>
    <li><a href="#contact">Contact</a></li>
    <li><a href="#about">About</a></li>
    </ul>
    </body>
    </html>

  2. #2
    Join Date
    Sep 2010
    Location
    California
    Posts
    23
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    Are you trying to center the <h1> tag in the middle of its parent element? If so, consider trying the <center> tags. They always work for me (although I'm told they've been depreciated...)

  3. #3
    Join Date
    Mar 2006
    Location
    Illinois, USA
    Posts
    12,156
    Thanks
    262
    Thanked 690 Times in 678 Posts

    Default

    <center> tags are messy because they aren't standard (now) and behave in strange ways with different browsers. Also, what exactly is being centered?

    <div style="text-align:center"> is roughly equivalent and will center the contents.

    <h1> can have the same property.

    To center a div or other block element (the holder, not the contents), you can use this:
    <div style="margin:auto;">
    Of course that assumes the div can be centered-- that is is less than 100% width.

    Unlike the example above for the contents, that won't apply to the child elements, just that element.
    Daniel - Freelance Web Design | <?php?> | <html>| espaŮol | Deutsch | italiano | portuguÍs | catalŗ | un peu de franÁais | some knowledge of several other languages: I can sometimes help translate here on DD | Linguistics Forum

Bookmarks

Posting Permissions

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