SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Addict limepickle's Avatar
    Join Date
    Jan 2006
    Location
    Aldridge UK
    Posts
    216
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    self centering footer links

    Heres the link http://pickledegg.orchardhostings6.co.uk/s121_static/

    You see how the footer links are centred in the blue section, well I want them to remain centered when the text size is increased by 2 sizes. This is because I want a 'large text' option on my site, that simply increases the font-size across the board. The exact same effect of pressing ctrl+ twice in Firefox.

    However the footer links wrap and look bad when the font is enlarged.
    How do I style this to centre itself and not wrap when I do this?

    Thanks.

  2. #2
    SitePoint Enthusiast
    Join Date
    Oct 2004
    Location
    Canada
    Posts
    86
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    They're wrapping because they're running out of room. Get rid of the width 80% and any padding in the footer and you should be ok.

  3. #3
    SitePoint Addict limepickle's Avatar
    Join Date
    Jan 2006
    Location
    Aldridge UK
    Posts
    216
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If I do that they butt up to the left side. I've tried text-align in the parent div etc, but I can't get it to work.

  4. #4
    Non-Member Egor's Avatar
    Join Date
    Jan 2004
    Location
    Melbourne, Australia
    Posts
    7,305
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Code:
    #footer-links ul
    {
    	font-family: Georgia, "Times New Roman", Times, serif;
    	list-style-type: none;
    	padding: 0px;
    	margin: 0px;
    	text-align: center;
    }
    
    #footer-links li
    {
    	display: inline;
    }
    
    #footer-links a
    {
    	background-color: #006699;
    	color: #FFFFFF;
    	font-weight: bold;
    	padding: 0 8px;
    	text-decoration: none;
    }
    You'll probably need to remove a number of styles from #footer-links also.

  5. #5
    SitePoint Addict limepickle's Avatar
    Join Date
    Jan 2006
    Location
    Aldridge UK
    Posts
    216
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thats perfect, thanks very much - sometimes less is more

  6. #6
    Non-Member Egor's Avatar
    Join Date
    Jan 2004
    Location
    Melbourne, Australia
    Posts
    7,305
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by limepickle
    Thats perfect, thanks very much - sometimes less is more
    Too true. The issue you had above was caused by floating the anchors. When something is given the float property, a block-level box is generated around that element, which can't be centred as easily as normal inline text.


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
  •