SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Member
    Join Date
    Jul 2006
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Firefox problems centering horizontal menu

    Hi I have made a horizontal dropdown menu from a tutorial and that works fine. The problem is that I can't get it centered within my div. I have tried using text-align everywhere but it doesn't work. I also used margin: 0 auto; with the text-align.

    Can anyone help?

    Basically the HTML is

    <div id="navbar">
    menu in here
    </div>

    The menu is pretty standard. In fact I may have got it from here. The HTML document has got text-align center on aswell to get my divs in the middle. Can anyone help?

    Thanks

    Ironfistchamp

  2. #2
    Non-Member deathshadow's Avatar
    Join Date
    Jul 2006
    Location
    Dublin, NH
    Posts
    901
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Did you set a fixed width for navbar narrower than the parent element? (failure to do so makes the bar 100% width, making the margin:auto do nothing) What tags are you using to make the horizontal menu itself?

    need more of your code to help.

  3. #3
    SitePoint Member
    Join Date
    Jul 2006
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This is from the CSS file that deals with the divs

    Code:
    html, body {width: 100%; height: 100%; 
                        margin: 0px;padding: 0px; 
                        background-color: #000; color: #FFF; 
                        text-align: center;}
    
    #header {width: 70%; height: 9%; 
                     border: 1px solid #00FF00; padding: 0;
                     margin: 0 auto; display: block; }
    
    #navbar {width: 70%; height: 26px;  
                     border: 1px solid #00FF00;border-top: 0px;
                     padding: 0px; margin: 0 auto; display: block; 
                     text-align: center}
    
    #content {width: 70%; height: 70%; border: 1px solid #00FF00;
                      border-bottom: 0px; border-top: 0px;
                      padding: 0; margin: 0 auto; text-align: center;  
                      display: block; }
    
    
    #footer {width: 70%; height: 10%; border: 1px solid #00FF00; 
                   padding: 0; margin: 0 auto; display: block; }

    And here is the html

    Code:
    <div id="header">HEADER</div>
    
    <div id="navbar">
    <ul id="nav">
    
      <li><a href="#">TEST</a></li>
    
      <li><a href="#">TEST</a>
        <ul>
    
          <li><a href="#">TEST</a></li>
    
          <li><a href="#">TEST</a></li>
    
          <li><a href="#">TEST</a></li>
    
        </ul>
    
      </li>
    
      <li><a href="#">TEST</a>
        <ul>
    
          <li><a href="#">TEST</a></li>
    
          <li><a href="#">TEST</a></li>
    
          <li><a href="#">TEST</a></li>
    
        </ul>
    
      </li>
    
      <li><a href="#">TEST</a>
        <ul>
    
          <li><a href="#">TEST</a></li>
    
          <li><a href="#">TEST</a></li>
    
          <li><a href="#">TEST</a></li>
    
          <li><a href="#">TEST</a></li>
    
        </ul>
    
      </li>
    
    </ul>
    
    
    </div>
    
    <div id="content">CONTENT</div>
    
    <div id="footer">FOOTER</div>
    
    </body>
    Sorry if the code is horrible. I am quite new to CSS and I'm not really sure on how my code should look and be structured.

    Thanks

    Ironfistchamp

  4. #4
    SitePoint Wizard drhowarddrfine's Avatar
    Join Date
    Aug 2005
    Posts
    3,438
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    text-align is used to align text, not divs, or anything else for that matter. That's why they call it TEXT-align.

    Without looking at your code, on the div you want centered, try margin:0 auto;

  5. #5
    Visit docquesting.com docquesting's Avatar
    Join Date
    May 2005
    Location
    Georgia USA
    Posts
    1,264
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Or margin 0px 0px. Add in the extra numbers of course.

    Browse to the link in my sig and add /css/styles.css . This will give you a better idea of how to structure your code. Thats one thing I cant stand seeing iin other peoples code is unstructured.

  6. #6
    SitePoint Zealot
    Join Date
    Apr 2006
    Location
    Ohio USA
    Posts
    171
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by drhowarddrfine
    text-align is used to align text, not divs,
    Hmm... how do you center your divs in IE 5.x?
    Quote Originally Posted by drhowarddrfine
    or anything else for that matter.
    Works on images and tables (edit -tables in IE) too, last I checked.
    Quote Originally Posted by drhowarddrfine
    Without looking at your code, on the div you want centered, try margin:0 auto;
    Quote Originally Posted by ironfistchamp
    I also used margin: 0 auto;
    Code:
    margin: 0 auto;
    ironfistchamp,
    Your problem is elswhere in your code.
    What you provided results in centered text in the navbar.

    I'd imagine you are styling the LIs and/or Anchors as well?
    Are you floating either of them?

  7. #7
    SitePoint Member
    Join Date
    Jul 2006
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I got the menu from here

    http://www.pmob.co.uk/temp/dropdown_horizontal2.htm

    after a friend showed me how good that site was. I am about ready to give up and try something else. All I wanted was it to be centered inside a div that is 70% the width of the screen. Too much to ask?

  8. #8
    SitePoint Wizard drhowarddrfine's Avatar
    Join Date
    Aug 2005
    Posts
    3,438
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    how do you center your divs in IE 5.x?
    I don't bother.
    Works on images and tables (edit -tables in IE) too, last I checked.
    Never, ever use tables for layout.

    ironfist, as stated, without a link or the complete code, we can't help you.

  9. #9
    SitePoint Member
    Join Date
    Jul 2006
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the help guys but I came up with a better idea for a layout. Thanks again I'm sure I will be seeing you again soon with another stupid question


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
  •