SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Enthusiast
    Join Date
    Oct 2007
    Posts
    47
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How can I modifiy the height of the tabs in this horizontal navigation list?

    Hi,

    Please refer to the example tabs here: http://wrxcrystal06.awardspace.com/overview.html I am looking to add the following functionality, but cannot seem to figure it out:

    1) I would like the "selected tab" (i.e. the page a user is viewing), to be raised exactly 3px higher than the other tabs. It is currently one pixel higher, but I cannot seem to figure out how to manipulate accordingly.
    2) I would like to have a total of four tabs, but would like each one to be a different color background. How would I structure the id's?
    3) When a user is on the homepage, no tab should be selected. How can I structure this?

    Thank you for your help!

  2. #2
    SitePoint Enthusiast
    Join Date
    Oct 2007
    Posts
    47
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I was able to figure out the solution. Thanks!

  3. #3
    SitePoint Wizard bronze trophy bluedreamer's Avatar
    Join Date
    Jul 2005
    Location
    Middle England
    Posts
    3,349
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Can you share your solution with the rest of the community?

  4. #4
    SitePoint Enthusiast keyshey's Avatar
    Join Date
    Nov 2007
    Posts
    37
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by wrxcrystal06 View Post
    I was able to figure out the solution. Thanks!
    I was just about to post my solution. haha.
    can you show us what you did. thanks!

  5. #5
    SitePoint Enthusiast
    Join Date
    Oct 2007
    Posts
    47
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I actually went a different way and modeled after these tabs: http://unraveled.com/projects/html/css_tabs/ I simply created a new id for each tab I wanted to style... for example:

    Code CSS:
    ul#tabnav li.tab1 a {
    	padding: 3px 6px; 
    	border: 1px solid #fff;
    	background-color: #ffe684;
    	color: #333;
    	margin-right: 0px; 
    	text-decoration: none;
    	border-bottom: 1px solid #ffe684; 
    }
    ul#tabnav li.tab1 a:hover { 
    	background-color: #ffe684;
    	color: #333;
    	text-decoration: underline;
    }

    This seemed to do the trick for me, but I would have liked to use the original version. keyshey, sorry about the timing... could you please post your solution to my original question. Sorry, just realized that I changed filenames... it is back up here: http://wrxcrystal06.awardspace.com/item1.html

    Thanks everyone!!

  6. #6
    SitePoint Enthusiast keyshey's Avatar
    Join Date
    Nov 2007
    Posts
    37
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    1.
    I did this, and have only tested it w/ IE6 (this is the only browser I have at work )

    but the main ones I added are

    a: hover
    Code:
    	position: relative;
    	top: -3px;
    and in

    #header ul#primary a,#header ul#primary span,#header ul#primary a.current

    Code:
    	margin: 0px 3px -3px 0px; 
    	height: 23px;
    the -3px is to make the tabs go down by 3px, then the top: -3px at the top will make it go up by 3px.

    I added 3px to the height, as to not alter the height when it goes down



    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    <title>Overview</title>
    
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
    <style type="text/css" media="screen">
    #header {
    	position: relative;
    	width: 948px;
    	background-color: #FFF;
    	border-bottom: 1px solid #666;
    	height: 32px;
    }
    
    #header ul#primary {
    	margin: 0;
    	padding-left: 10px;
    	position: absolute;
    	bottom: -1px;
    	width: 45em;
    }
    
    #header ul#primary li  {
    	display: inline;
    	list-style: none;
    	height: 30px;
    }
    
    #header ul#primary a,#header ul#primary span,#header ul#primary a.current {
    	width: 95px;
    	display: block;
    	float: left;
    	padding: 4px 0px 0px 0px;
    	margin: 0px 3px -3px 0px;
    	text-align: center;
    	font: 11px verdana, arial, sans-serif;
    	text-decoration: none;
    	color: #333;
    	text-transform: uppercase;
    	height: 23px;
    	border: 1px solid #666;		
    	border-bottom: none;
    	}
    
    #primary span{	
    	background: #FFF3B3;
    	padding-bottom: 6px;
    	margin-top: 0;
    }
    
    a {
    	background: #FFFAE1;
    }
    
    a:hover { 
    	border-color: #666; 
    	background: #FFF7CD;
    	display: block;
    	position: relative;
    	top: -3px;
    }
    
    </style>
    
    </head>
    <body>
    
    <div id="header">
      <ul id="primary">
        <li><span>OVERVIEW</span></li>
        <li><a href="about.html">ABOUT US</a></li>
        <li><a href="portfolio.html">PORTFOLIO</a></li>
        <li><a href="contact.html">CONTACT US</a></li>
      </ul>
    </div>
    
    </body>
    </html>
    2.
    you can give each tab its own class, then define what you want to do w/ the class
    Code:
    .blue {
        background: blue;
    }
        <li><a href="about.html" class = "blue">ABOUT US</a></li>
        <li><a href="portfolio.html" class = "green">PORTFOLIO</a></li>
        <li><a href="contact.html" class = "red">CONTACT US</a></li>
    but the ones you have now is probably better than this one ahahah


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
  •