Development
 Client Side

     

So I am creating a footer navigation that I want to appear centered inside its containing div. The problem is that it’s a horizontal navigation so the anchor tags are blocks and floated left. The way I have solved it right now is to add left padding to the <ul> tag to push the list elements (of which there are five) to the centre. The problem is that the site will eventually be developed by someone else (who isn’t necessarily as knowledgeable on css), so when they add more links it will no longer be centered.

What is the easiest way to go about solving this?

  3 REPLIES
 
David_King
1  
David_King

If you’re not arsed about having all the links equal width, try “inline” styling:

[HTML]<ul id=“footer”>
 

  • link one

    •  

  • link 2

    •  

  • link three

    •  

  • link four

    • </ul>[/HTML]

    ul#footer {list-style-type: none; margin: 0; text-align: center;}
    ul#footer li {display: inline; padding: 0 5px;} 

    Something like that (off the top of my head)

    • 20 November 2008 11:36 AM
      •  
    flashkicks Author 
    2  
    flashkicks

    Thanks, but this doesn’t work. The links just go back to being at the left.

    • 21 November 2008 07:06 PM
      •  
    uxte
    3  
    uxte

    Here you have wink

    *{padding:0; margin:0}

    body{text    -align:center}

    #wrap{width:850px; margin:0 auto 0 auto}

    #footer {width:100%; border:red 6px solid}

    ul#footer-nav{list-style-type:none; border:green 6px solid}
    ul#footer-nav li{margin:10px; display:inline; border:gray 6px solid} 
    <div id="wrap">
        <    div id="footer">
            <    ul id="footer-nav">
                <    li><a href="#" title="link 1">link 1</a></li>
                <    li><a href="#" title="link 2">link 2</a></li>
                <    li><a href="#" title="link 3">link 3</a></li>
                <    li><a href="#" title="link 4">link 4</a></li>
                <    li><a href="#" title="link 5">link 5</a></li>
            </    ul>
        </    div>
    </    div> 
    • 22 November 2008 03:58 PM
      •