SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Addict
    Join Date
    Jun 2004
    Location
    northborough
    Posts
    300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    horizontal navbar- no wrapping

    Hi there,

    how could i could i control my horizontal navbar from wrapping when someone enlarges their text; i guess control how large the text gets or at what rate it gets bigger? Woudl i be better to use an image based nav? If so, what is the best way to do that?

    here is the page:http://www.wicklowdesigns.com/eg/index.html and code below.

    thanks!
    sha

    CSS:
    Code:
    #navcontainer ul
    {
    	color: white;
    	width: 100%;
    	font-family: verdana, arial, helvetica, sans-serif;
    	margin: 0;
    	padding: 0;
    	float: left;
    	text-transform: uppercase;
    	font-weight: bold;
    	letter-spacing: 0.1em;
    	font-size: 10px;
    	background-image: url(images/teal.gif);
    	border-bottom-width: 1px;
    	border-bottom-style: solid;
    	border-bottom-color: #ffffff;
    }
    
    #navcontainer ul li { display: inline; }
    
    #navcontainer ul li a
    {
    	padding: 0.2em 1em;
    	color: white;
    	text-decoration: none;
    	float: left;
    	border-right: 1px solid #fff;
    	margin: 0px;
    }
    
    #navcontainer ul li a:hover
    {
    background-color: #369;
    color: #fff;
    }
    HTML:
    Code:
    <div id="navcontainer">
    <ul id="navlist">
    <li id="active"><a href="#" id="current">about us </a></li>
    <li><a href="#">in the news</a></li>
    <li><a href="#">our customers</a></li>
    <li><a href="#">products &amp; services</a></li>
    <li><a href="#">support</a></li>
    <li><a href="#">contact</a></li>
    </ul>
    </div>

  2. #2
    SitePoint Addict
    Join Date
    Jun 2004
    Location
    northborough
    Posts
    300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    okay, i guess a better question is

    do i apply a % to my body tag for the font and then apply em based values for headers, footer and main text,etc... or apply % to body and all other areas?

    thanks!
    sha

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,341
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    how could i could i control my horizontal navbar from wrapping when someone enlarges their text; i guess control how large the text gets or at what rate it gets bigger? Woudl i be better to use an image based nav?
    How many times can you ask the same question lol

    You can stop the nav from wrapping by using white-space:nowrap but then it will poke out the side if the text gets too big.. You can size the nav and the inner elements in ems and then it will expand with the text and not wrap but the page will get bigger which you don't seem to like either.

    You can't control the rate at which the text expands as all browsers are different and even if you did then you would be limiting what your user might need to read. Just because it doesn't break your layout is not a good enough reason if someone can't read text at that size.

    The last thing you want is an image based nav just so that people can't change the size. You need to make it easier for the visitor not harder

    You can experiment with fonts and font-sizes and some expand at slighly different rates so you may be able to minimise the effect a bit.

    do i apply a % to my body tag for the font and then apply em based values for headers, footer and main text,etc... or apply % to body and all other areas
    When refering to font-sizes ems and percent are the same thing. 1.2em is the same as 120%. Usually the body gets a percentage size and then people usually use ems for other elements. Setting a smaller percentage size may in fact reduce the scaling factor between the different sizes. (There is a bug (if i remember corectly) when ems are applied to the body.)

    Remember that ems and percentages will compound if placed on nested elements. If you hae set ul to be 90% the a nested ul would be 90% of the 90% and so on.

    Don't get to obsessed with controlling every pixel as its just not possible to know what your visitor may do. They may implement their own user stylesheet and ignore yours completely.

    There's some more reading here:

    http://style.cleverchimp.com/font_si...intervals.html
    http://www.meyerweb.com/eric/article...v/199908a.html


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
  •