SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Wizard holmescreek's Avatar
    Join Date
    Mar 2001
    Location
    Northwest Florida
    Posts
    1,707
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Inline List Navigation, em's and vertical centering?

    Hi,

    Well, I've come a long way on CSS in the last few weeks, making the transition from HTML. Right now, I'm working on a fixed width site. However, if the user increases or decreases the font size, the text flows rather well -- without blowing out the page.

    I've got down floats, positioning, and so on from books / reference manuals that I'm reading, but having trouble with one thing. Maybe someone could help out.

    I created a detailed question and a simple question -- figure too little info or too much info could confuse things for the reader so here goes :

    -------

    Simple Question :

    If I create an inline horizontal nav bar and need to vertically center it within a 53px high div, how is this done?

    --------------

    Detailed Question :

    1) In my body, I set the default font-size to 62.5%

    2) I created a div that is 720px by 53px high to contain the nav links and a background grad image.

    3) I created an inline horizontal nav bar. I used right padding to separate the individual link items. I set the font size to 1.6em (with a 62.5% default font equaling 1em) this roughly calculates to 16px.

    Ok, on the horizontal nav I set the top margin to center the navigation list vertically center in the 53px high div. But, if the user increases or decreases the font size, the vertical position of the horiz navigation items move up or down -- just can't keep them vertically centered.


    Thanks,

    HC
    intragenesis, llc professional web & graphic design

  2. #2
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,113
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    We'll see if the simple answer works first
    If I create an inline horizontal nav bar and need to vertically center it within a 53px high div, how is this done?
    If the text is inline then - text-align: center; on the parent should center the text.

  3. #3
    SitePoint Wizard holmescreek's Avatar
    Join Date
    Mar 2001
    Location
    Northwest Florida
    Posts
    1,707
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Nope. Already been there, done that. Here is the code if it helps :

    Code:
    * {
    
    	margin:0;
    	padding:0;
    
    }
    
    body {
    	font-family:Arial, Helvetica, sans-serif;
    	font-size:62.5%;
    	background-color:#000000;
    	text-align:center;
    }
    
    
    
    #main-wrapper {
    	width:724px;
    	background-color:#FFFFFF;
    	margin:10px auto 10px auto;
    	padding:8px;
    	text-align:left;
    }
    
    .spacer {
    	clear:both;
    	height:8px;
    	border:none;
    }
    
    
    /* Begin Site Navigation */
    
    .top_nav {
    	height:53px;
    	background:#0000CC;
    	background-image:url(/img/header_bg_grad.jpg);
    	text-align:center;
    	font-family:Arial, Helvetica, sans-serif;
    	color:#FFF;
    	text-decoration:none;
    }
    
    
    .top_nav  ul {
    	padding: 1.8em 0 0 0;
    }
    
    .top_nav li {
      display:inline;
      font-size:1.6em;
      padding:10px 1em 10px 1em;
      font-weight:bold;
      white-space:nowrap;
    }
    
    .top_nav a{
      color:#FFF;
      text-decoration:none;
      background-color:none;
    }
    
    .top_nav a:hover{
    	color:#FFFF33;
    }
    Just to note, the div for the horiz menu is using the top_nav class.
    intragenesis, llc professional web & graphic design

  4. #4
    SitePoint Wizard holmescreek's Avatar
    Join Date
    Mar 2001
    Location
    Northwest Florida
    Posts
    1,707
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    In addition, I have a .bottom_nav class that inherits .top_nav but over rides the font size -- does the same thing, doesn't space out vertically. So, gives me a good idea it is in the .top_nav class or something to do with the body or global declarations.

    I'm working by defauilt with an em font size where as if someone increases the font size on the site, it flows correctly. Which works, but, something to do with using em to size fonts and having items using those fonts to center themselves vertically within the div doesn't display correctly (Safari, FF and even in DW).

    Just looks as though I could kill the padding and use text-align:center; on the parent, as you suggested.
    intragenesis, llc professional web & graphic design

  5. #5
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,113
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    I think we need more code,
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>Untitled Document</title>
    <style type="text/css">
    * {
    
    	margin:0;
    	padding:0;
    
    }
    
    body {
    	font-family:Arial, Helvetica, sans-serif;
    	font-size:62.5&#37;;
    	background-color:#000000;
    	text-align:center;
    	color: white;
    }
    
    
    
    #main-wrapper {
    	width:724px;
    	background-color:#FFFFFF;
    	margin:10px auto 10px auto;
    	padding:8px;
    	text-align:left;
    }
    
    .spacer {
    	clear:both;
    	height:8px;
    	border:none;
    }
    
    
    /* Begin Site Navigation */
    
    .top_nav {
    	height:53px;
    	background:#0000CC;
    	background-image:url(/img/header_bg_grad.jpg);
    	text-align:center;
    	font-family:Arial, Helvetica, sans-serif;
    	color:#FFF;
    	text-decoration:none;
    }
    
    
    .top_nav  ul {
    	padding: 1.8em 0 0 0;
    }
    
    .top_nav li {
      display:inline;
      font-size:1.6em;
      padding:10px 1em 10px 1em;
      font-weight:bold;
      white-space:nowrap;
    }
    
    .top_nav a{
      color:#FFF;
      text-decoration:none;
      background-color:none;
    }
    
    .top_nav a:hover{
    	color:#FFFF33;
    }
    </style>
    </head>
    <body>
    <div class="top_nav">
      <ul>
        <li>asdf</li>
        <li>asdf</li>
        <li>asdf</li>
        <li>asdf</li>
        <li>asdf </li>
      </ul>
    </div>
    </body>
    </html>
    This centers the list items on my end

  6. #6
    SitePoint Wizard holmescreek's Avatar
    Join Date
    Mar 2001
    Location
    Northwest Florida
    Posts
    1,707
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yeah, it does. But, you missed what I'm talking about. In the .top_nav ul class I set a top padding of 1.8em, which does vertically center the list.

    But, if you use firefox or another browser and enlarge the font it will not center vertically.

    In other words, the only reason the text is centering vertically, as you see it, is because of the padding has been set in the .top_nav ul class below.

    Use a different browser and enlarge the text, you will notice that the horizontal nav bar is not vertically centered.

    Code:
    .top_nav  ul {
    
    /* this vertically centers fine unless you enlarge text with your browser */
    
        padding: 1.8em 0 0 0; 
    }
    intragenesis, llc professional web & graphic design

  7. #7
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,113
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    Ahh vertical centering..
    What I do, is have the same top and bottom padding, and don't declare any heights - you may need to alter the background images to make them flexible with font-size.
    Code:
    .top_nav  ul {
      padding: 20px 0;
    }
    Or maybe vertical-align: top; on the ul wold work - it aligns inline elements.
    If this is still off track can you post a link to the page in question please.

  8. #8
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.


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
  •