Skip navigation
Prodigy9
Prodigy9
Currently Being Moderated

Trying To Center navBar

Feb 13, 2012 3:21 AM

Hi...

 

I've been pulling my hair out trying to get a single navbar to sit nicely in the middle of the header div.  I've done it before but for some reason it seems like everytime I try I'm using a different method to get the desired effect.

 

I don't know if this is too general of a question or not but is there some slick way to position a navbar within a header?  Float doesn't seem to do the trick so what does?

 

Thanks!

695 Views   5 Replies   Latest reply: Prodigy9, Feb 14, 2012 12:46 PM
 
Replies
  • Nancy O.
    Currently Being Moderated
    1. Nancy O.,
    Feb 13, 2012 10:57 AM   in reply to Prodigy9
    Report

    It depends on your layout and the menu you're using.

     

    Centering Spry Horizontal Menus

    http://foundationphp.com/tutorials/sprymenu/centering.php

     

    Centering Pages in DW

    http://forums.adobe.com/thread/454036

     

    Centering Web Pages and Other Elements with CSS

    http://cookbooks.adobe.com/post_Centering_web_pages_and_other_elements _with_CSS-16640.html

     

     

    Nancy O.

    Alt-Web Design & Publishing

    Web | Graphics | Print | Media  Specialists 

    http://alt-web.com/

    http://twitter.com/altweb

     
    |
    Mark as:
  • Prodigy9
    Currently Being Moderated
    2. Prodigy9,
    Feb 13, 2012 7:57 PM   in reply to Nancy O.
    Report

    It's my understanding judging by what I've seen is I need to set the width as far as the page is wide (ex. width: 960px)...  And then the margins at auto for right and left so the browser will do the calculating...  Is this correct?

     

    Basically...  I have one header going across the top of the page and within the header I have a basic navbar (nothing fancy just a standard UL listing menu).  For some reason, I can't get it to move to the middle/center of the page/header box.

     

    The links were useful though...  I initially started out using spry widgets but then switched to pure CSS widgets and (thanks to you) I'm really enjoying and learning a lot about it.

     
    |
    Mark as:
  • Nancy O.
    Currently Being Moderated
    3. Nancy O.,
    Feb 14, 2012 10:34 AM   in reply to Prodigy9
    Report

    It's my understanding judging by what I've seen is I need to set the width as far as the page is wide (ex. width: 960px)...  And then the margins at auto for right and left so the browser will do the calculating...  Is this correct?

    Yes.  And you also need a valid document type declaration in the HTML.  

     

    Exceptions:

    • position:absolute
    • position:fixed
    • floats

    which are removed from the normal document flow.   For better answers, can you post a link to your test page?

     

     

    Nancy O.

    Alt-Web Design & Publishing

    Web | Graphics | Print | Media  Specialists 

    http://alt-web.com/

    http://twitter.com/altweb

     
    |
    Mark as:
  • Prodigy9
    Currently Being Moderated
    4. Prodigy9,
    Feb 14, 2012 11:58 AM   in reply to Nancy O.
    Report

    Hi...

     

    After trying to figure it out for a while I took a step away from the computer and then tried a clear: both...  It did the trick.  I will what I have so far on my "test" site so you can have a look as I am having another issue. (If you don't mind).

     

    I'm trying to get the left and right margins to repeat-y down the columns with a .png image all the way down to the footer to make it seem like the margins "background" color don't stop when the content stops.  I've done this before successfully but for some reason this time it's causing my floating divs to wrap around the text.  I'll post it for you.

     

    Thanks!

     
    |
    Mark as:
  • Prodigy9
    Currently Being Moderated
    5. Prodigy9,
    Feb 14, 2012 12:46 PM   in reply to Prodigy9
    Report

    Nancy...

     

    I've validated and uploaded the latest...

     

     

    www.ghostsinthemaschine.com

     
    |
    Mark as:
Actions

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points