SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Enthusiast
    Join Date
    Oct 2009
    Location
    Byron Bay, NSW, Australia
    Posts
    54
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Horizontal Menu Help

    Hey there,

    I've got the following menu to style:


    This is the HTML

    Code HTML4Strict:
    <div id="main_menu">
    	<ul>
    		<li class="first"><a href="#">HOME</a></li>
    		<li><a href="#">TANDEM</a></li>
    		<li><a href="#">BOOKINGS</a></li>
    		<li><a href="#">PHOTOS/DVD</a></li>
    		<li><a href="#">QUESTIONS</a></li>
    		<li><a href="#">CONTACT</a></li>
    		<li><a href="#">TEAM</a></li>
    	</ul>
    </div>

    This is the CSS
    Code CSS:
    #main_menu {
    	font-family: 'Yanone Kaffeesatz', arial, serif;
    	font-size: 22px;
    }
    #main_menu ul {
    	list-style-type: disc;
    	list-style-position: inside;
    	color: #B2B2B2;
    	padding-left: 0px;
    }
    #main_menu ul li {
    	float: left;
    	padding-right: 10px;
    }
    #main_menu ul li.first {
    	list-style-type: none;
    }
    #main_menu li a {
    	padding: 0 0 3px 0;
    	text-decoration: none;
    	color: black;
    }
    #main_menu li a:hover {
    	background: url(../images/red-underscore.png) no-repeat bottom center;
    }

    The problem
    I'm using @font-face for the menu text and I can get it looking pretty good BUT the separating DISC increases in size when I increase the font size. Any ideas would be appreciated.

    Firefox, Chrome and Safari play nice but the DISCS are too big


    IE 8 just sucks.
    Attached Images Attached Images
    Madproject - I'm an amateur...
    What I learn from day to day

  2. #2
    SitePoint Enthusiast
    Join Date
    Oct 2009
    Location
    Byron Bay, NSW, Australia
    Posts
    54
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm thinking I might have to use CSS sprites but that's not too accessibility friendly is it?
    Madproject - I'm an amateur...
    What I learn from day to day

  3. #3
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,658
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    Increasing the font size of the anchor and not the div should do it.

  4. #4
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Hi,

    IE8 has always rendered it's bullets small like that.

    For x-browser consistency I would use a background image for the bullet. Just apply the BG image to the LI, pad out the left side where that image would go and you can use background-position to fine tune it.

  5. #5
    SitePoint Wizard
    Join Date
    Dec 2003
    Location
    USA
    Posts
    2,582
    Mentioned
    29 Post(s)
    Tagged
    0 Thread(s)
    Agreed, a simple background image is usually the best approach, and it's just as accessible.

  6. #6
    SitePoint Enthusiast
    Join Date
    Oct 2009
    Location
    Byron Bay, NSW, Australia
    Posts
    54
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Rayzur,

    Yes thanks, that's what ended up doing, I just didn't take the time to write it here yet.

    Cheers for the input and help!
    Madproject - I'm an amateur...
    What I learn from day to day

  7. #7
    SitePoint Enthusiast
    Join Date
    Oct 2009
    Location
    Byron Bay, NSW, Australia
    Posts
    54
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Final HTML
    Code HTML4Strict:
    <div id="main_menu">
    	<ul>
    		<li><a href="#">HOME</a></li>
    		<li><a href="#">TANDEM</a></li>
    		<li><a href="#">BOOKINGS</a></li>
    		<li><a href="#">PHOTOS/DVD</a></li>
    		<li><a href="#">QUESTIONS</a></li>
    		<li><a href="#">CONTACT</a></li>
    		<li class="last"><a href="#">TEAM</a></li>
    	</ul>
    </div>

    CSS
    Code CSS:
    #main_menu {
    	font-family: 'Yanone Kaffeesatz', arial, serif;
    	font-size: 22px;
    }
    #main_menu ul {
    	list-style-type: none;
    	list-style-position: inside;
    	color: #B2B2B2;
    	padding-left: 0px;
    }
    #main_menu ul li {
    	float: left;
    	padding-right: 15px;
    	padding-left: 10px;
    	background: url(../images/bullet.png) center right no-repeat;
    }
    #main_menu ul li.last {
    	background: none;
    	padding-right: 0px;
    }
    #main_menu li a {
    	padding: 0 0 3px 0;
    	text-decoration: none;
    	color: black;
    }
    #main_menu li a:hover {
    	background: url(../images/red-underscore.png) no-repeat bottom center;
    }

    The result:


    It looks good in all browsers except for Firefox 4 the bullets don't look really evenly spaced as seen in the screenshot but it'll have to do for now.
    Attached Images Attached Images
    Madproject - I'm an amateur...
    What I learn from day to day

  8. #8
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,816
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    You could make the bullet a graphic, ( displayed as the BG of the LI) that will keep their size constant. The other solution would be relative sizing.. which will take some trial and error.

    .rule LI { font-size: the em/% amount that makes the bullet the size you want)
    .rule LI a { font-size: the % amount that makes the set text the size you want)

    for example...
    .rule li { font-size: .25em} /* this means that the size of the bullet is about 1/4 from its base container */
    .rule li a { font-size: 400%} /* in turn, the menu text is 4 times as lage as the bullets. proportions may vary, of course */

  9. #9
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    It looks good in all browsers except for Firefox 4
    I wouldn't attempt to fix it just yet as FF4 is still a beta version. I've heard rumors of it being launched very soon but not sure what the date is since it has been postponed a couple of times already.

    Looking at your code, you could try using numeric values instead of keywords though and see if that makes a difference.
    Code:
    #main_menu ul li {
        float: left;
        padding: 0 15px 0 10px;
        background: url(../images/bullet.png)  no-repeat 100% 50%;
    }
    You might consider getting rid of that wrapping div too, it's not doing anything that the UL itself couldn't do.
    Just apply the ID directly to the UL and style it accordingly.


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
  •