SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Zealot
    Join Date
    Dec 2007
    Posts
    95
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Problem Styling absolutely positioned UL

    Hello all,

    I can't believe I'm having difficulty with this little bit of CSS, but it just doesn't seem to want to cooperate with me...

    I just added a div with the id of "subNav." Within this div, I have an unordered list, which I am using for my subnavigation menu. I need to get each of these list items to 300px width and 35px height, but no matter what I try I can't seem to force these dimensions.

    Here's a link to a sample page on the site.

    Any suggestions?

    Thanks in advance!
    Independent Web Designer/Developer in Mandeville, LA USA
    1. JoeyReed.com
    2. Crawfish.com
    3. Pralines.com

  2. #2
    Is Still Alive silver trophybronze trophy RetroNetro's Avatar
    Join Date
    Jul 2003
    Location
    Texas
    Posts
    6,883
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Code CSS:
    #subNav li {float:left; width:300px; display: inline; background: red; }

  3. #3
    SitePoint Zealot
    Join Date
    Dec 2007
    Posts
    95
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That worked, although I'd still like the option to keep the ul (which is 900px) centered. Is that possible?
    Independent Web Designer/Developer in Mandeville, LA USA
    1. JoeyReed.com
    2. Crawfish.com
    3. Pralines.com

  4. #4
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Just give hte <ul> margin:0 auto;

    Unless it is a dropdown (if it is, use the clearfix (google it if yuou need it)), just give the <ul> overflow:hidden; as well
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  5. #5
    SitePoint Zealot
    Join Date
    Dec 2007
    Posts
    95
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Ryan,

    Unfortunately I wasn't able to center the list using 'margin: 0 auto.' That was the first thing I tried, and I believed it would work since I assigned the 900px width to the ul. Also, it's a simple list of three items, with no drop down at all.

    Any other ideas?
    Independent Web Designer/Developer in Mandeville, LA USA
    1. JoeyReed.com
    2. Crawfish.com
    3. Pralines.com

  6. #6
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Hi, on ".footer ul" you give float:left; whicih doesn't allow the <ul> to center via auto margins.

    If you still need that float:left; rule there, just set float:none; for "#subNav ul"
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  7. #7
    SitePoint Zealot
    Join Date
    Dec 2007
    Posts
    95
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks again, Ryan - that did the trick!

    Also, big thanks to BPartch for the initial help
    Independent Web Designer/Developer in Mandeville, LA USA
    1. JoeyReed.com
    2. Crawfish.com
    3. Pralines.com

  8. #8
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    We are glad to help . You're welcome.
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  9. #9
    Is Still Alive silver trophybronze trophy RetroNetro's Avatar
    Join Date
    Jul 2003
    Location
    Texas
    Posts
    6,883
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by RyanReese View Post
    We are glad to help . You're welcome.


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
  •