SitePoint Sponsor

User Tag List

Results 1 to 14 of 14
  1. #1
    SitePoint Enthusiast
    Join Date
    May 2002
    Location
    Northern Ireland
    Posts
    93
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Vertical Navigation Turmoil :-(

    Hi

    Can anyone please advise how I get the vertical navigation on this site to:-
    1. Span the whole width of the site i.e. div id="content" and also the right-hand column (div id="right")
    2. Standardise the width of the top menu items in a (Superfish) Suckerfish style menu (V 1.4.8) as each is sizing to the text and I would like all to be equal please.
    Many thanks
    Regards
    Andrew

  2. #2
    SitePoint Zealot
    Join Date
    Oct 2008
    Posts
    140
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Will admit without downloading and digging in, add a <div id="navcontainer"> before your ul tag. and </div> after </ul> I have not seen this problem, but I do the above idea.

  3. #3
    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)
    Problem 1-WIthout doing some HTML restructure you are screwed. However, if you desire you could give manual widths to each <li> and at most cross browser you would get a pixel or two difference

    Problem 2-If you mean you want all the menu items the same width, then assign a width on the <li>
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  4. #4
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    If you are asking for them to auto-expand to fit regardless of their content - you can't using LI or other standard CSS methods that will work cross browser.

    You either will have to fix the width of each one so it adds up to your total width (using a negative margin-right on the last one so IE doens't make it ride down)

    Or bite the bullet with the ultimate evil - and use a table. It's an excellent example of something tables can do that normal elements cannot.

    ... and no, display:table-cell is not a good answer if you care about cross-browser support (or more specifically the lack therin).

  5. #5
    SitePoint Zealot
    Join Date
    Oct 2008
    Posts
    140
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Mine expand just fine without using a table. Now I am going to have to looking into why.

  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)
    They expand just fine because no width is set. However if the words get too long then it will drop. Thus the only safe way is to have widths set (without messing with a restructure that's all you can do)
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  7. #7
    SitePoint Enthusiast
    Join Date
    May 2002
    Location
    Northern Ireland
    Posts
    93
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm unsure which attributes to change and to what please.
    Thnks

  8. #8
    SitePoint Zealot
    Join Date
    Oct 2008
    Posts
    140
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Sample:
    <div id="topnav"><ul>
    <li><a class="current" href="index.html">Home&nbsp;&nbsp;</a></li>
    <li><a href="xxx.htm">xxx</a></li>
    </ul></div>

    notice the div ahead of the ul? and don't forget the closing div
    now for the css
    #topnav ul
    {
    margin: 0;
    padding: 0;
    list-style-type: none;
    text-align: center;
    font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
    font-weight: bold;
    background-color:#fff;
    }

    #topnav ul li { display: inline;
    }

    #topnav ul li a
    {
    text-decoration: none;
    line-height: 50px;
    margin: 0;
    color: #000;
    font-weight: bolder;
    }
    #topnav ul li a.current {
    }
    #topnav ul li a:hover
    {
    color: #030;
    }

  9. #9
    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)
    The stuff you need to add is in red (note, you will have to mess with the width, I haven't tried out a specific width at all, I might be wayyy off with the width lol
    Code:
    #topnav ul li { display: inline; float:left; width:100px;
    }
    Just saw that techmichelle wasn't the OP of this thread..but either way, you need to have the top <li> floated and then a width set. Quite easy .
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  10. #10
    SitePoint Zealot
    Join Date
    Oct 2008
    Posts
    140
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    haven't needed this float:left; width:100px; to have it go the full width. I like to center my links, what does the float:left do?

  11. #11
    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)
    Well you had display:inline before and that doesn't allow widths set, floating it makes it block level and thus allows a width.

    You don't seem to understand that considering how you have set the page up, you are going to have to pixel width the <li>'s to get them to line up. (Unless you restructure or you want to play games with fate and hope it goes across (which would be unstable considering a text resize=a drop)
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  12. #12
    SitePoint Zealot
    Join Date
    Oct 2008
    Posts
    140
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Larger text with narrow screens does mess with the design, it creates a second column, okay more often 3 or 4, which I am okay with. My views have changed a bit after helping an older person or two who seem to need REALLY BIG text. Most designs fall apart at their size text, and there big concern is simply being able to read and get around on a site.

  13. #13
    SitePoint Enthusiast
    Join Date
    May 2002
    Location
    Northern Ireland
    Posts
    93
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Folks.

    Incredibly stupid question but the ul already has a class defined (sf-menu) so I'm unsure how to also apply div id="topnav".

  14. #14
    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)
    Quote Originally Posted by Andrew_Sam View Post
    Thanks Folks.

    Incredibly stupid question but the ul already has a class defined (sf-menu) so I'm unsure how to also apply div id="topnav".
    That's so vague. Assuming you are asking how to apply CSS to the topnav element, then it's this
    Code:
    #topnav{}
    In teh future don't steal someone elses thread, but rather create your own
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work


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
  •