SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Member
    Join Date
    Sep 2006
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Unhappy CSS horizontal tabbed menu problems

    I am trying to get my tabbed navigation to work correctly. I'm a bit new with CSS, so forgive me if I am doing something completely idiotic.

    My two problems:

    1) I can't figure out how to float the tabs at the bottom of the header. If you change font sizes, you will see that the tabs will either leave a gap if they are made smaller, or break the layout if they are larger. I want them to always align with the bar underneath.

    2) For some reason (likely similar to the above issue), when you click on a tab a scroll bar appears. Not sure why this is.

    Here is the development site link:
    http://www.georgestreetcoop.com/newsite/index.html

    Any thoughts? Thanks!

  2. #2
    derrrp
    Join Date
    Aug 2006
    Location
    earth
    Posts
    923
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    for 2) I'd guess the reason is because you have the overflow: auto; assigned to it.

    That'll give you the scroll bars.
    No, I REALLY dislike having to use Joomla.

  3. #3
    SitePoint Member
    Join Date
    Sep 2006
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Wink one problem down, one to go!

    Thanks! I switched out the overflow:auto for overflow:hidden, and that eliminated the scroll bars.

    I'm still having trouble aligning the tabs at the bottom of the header, so that they don't break the layout when the text is resized.

    Here is an example I found of a site that has tabbed navigation that stays floated at the bottom when you resize text:
    http://www.verticalresponse.com/

    I'm probably missing something completely obvious, but I'm pretty new with CSS and I have had no luck.

    -Nick
    http://www.georgestreetcoop.com/newsite/

  4. #4
    SitePoint Member
    Join Date
    Sep 2006
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I've attached an image showing the issue I am having. Any thoughts? It's probably something really basic, but I'm new with this CSS craziness.

    Thanks,
    Nick
    Attached Images Attached Images

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,343
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    I would place the tabs absolutely at the bottom of the header because the header is fixed in pixel height and therefore will not grow anyway.

    e.g.
    Code:
    div#header{position:relative;width:720px; height: 180px; margin:0 auto; background-image: url('http://www.georgestreetcoop.com/newsite/images/header.jpg'); background-repeat: no-repeat}
    
    
    
    /*------------- Main Navigation ---------------*/
    
    #tabsC	{
        position:absolute;
    	left:0;
    	bottom:0;
    	padding: 0px 0px 0px 10px;
    	margin-left: auto;
    	margin-right: auto;
    	font: bold 1.3em Arial, Helvetica, sans-serif;
    	line-height:normal;
    	} /* displayed at 16px */
    That will scale up and down in ie without problem.

  6. #6
    SitePoint Member
    Join Date
    Sep 2006
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It worked!

    Paul, I see now why you were the CSS Guru of 2005. You've got my vote for 2006 already. Thanks!


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
  •