SitePoint Sponsor

User Tag List

Results 1 to 5 of 5

Thread: Google Tabs

  1. #1
    SitePoint Member
    Join Date
    Aug 2003
    Location
    Pittsburgh
    Posts
    19
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Google Tabs

    Hello,

    I am trying to recreate, using css, the tabs above the google search field. I'm not having much success.

    Things I can't seem to fix are as follows:
    1. How do I make the horizontal line extend farther left and right?
    2. How do I space the tabs out farther.
    3. The tabs seem to far to the right. Hence the centered | in the source code. How is this fixed?

    Thanks in advanced for your help.


    Source code:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">

    <html><head><title>Google Tabs</title>

    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

    <style>
    <!--
    #navlist ul
    {
    margin-left: 0;
    padding-left: 0;
    margin-right: 0;
    padding-right: 0;

    }

    #navlist li
    {
    display: inline;
    list-style-type: none;
    font-family: Arial, Helvetica, sans-serif;
    border-bottom: 1px solid #3366cc;
    width: 200px;
    }

    #navlist a {padding: 1px 9px 1px 9px;}

    #navlist a:link, #navlist a:visited
    {
    color: #0000cc;
    background-color: #efefef;
    text-decoration: none;
    padding-bottom: 2px;
    font-size: 90%;
    }

    #navlist a:hover
    {
    color: #fff;
    background-color: #369;
    text-decoration: none;
    }

    #navcontainer
    {
    text-align: center;
    }
    -->
    </style>


    </head><body>
    <center>|</center>

    <div id="navcontainer">
    <ul id="navlist">
    <li><a href="reading.html" title="Reading">Reading</a></li>
    <li><a href="math.html" title="Math">Math</a></li>
    <li><a href="scitech.html" title="Science and Technology">Science</a></li>
    <li><a href="enviro.html" title="Environment and Ecology">Environment</a></li>
    <li><a href="candg.html" title="Civics and Government">Civics</a></li>
    <li><a href="econ.html" title="Economics">Economics</a></li>
    </ul>
    <ul id="navlist">
    <li><a href="geo.html" title="Geography">Geography</a></li>
    <li><a href="history.html" title="History">History</a></li>
    <li><a href="aandh.html" title="Arts and Humanities">Arts</a></li>
    <li><a href="hsandphys.html" title="Health, Safety and Phys ED">Health</a></li>
    <li><a href="famcon.html" title="Family and Consumer Science">Family</a></li>
    <li><a href="languages.html" title="World Languages">Languages</a></li>
    <li><a href="career.html" title="Career Education and Work">Career</a></li>
    </ul>
    </div>
    </div>
    </body>
    </html>

  2. #2
    SitePoint Enthusiast
    Join Date
    Nov 2003
    Location
    Canada
    Posts
    61
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    First, for the line on the bottom, you have a border on the li's, but I would add it to the ul.

    ul {border-bottom: 1px solid #3366cc;}

    Spacing for the tabs? Just add a margin. to each li tag. Figure out how far you want them to be apart, probably 1em, and add half that to each side of the li.

    li {margin-left:0.5em;margin-right:0.5em;

    As for the tabs being too far to the right, I know how I would go about fixing it, but the method I would use is most likely not kosher.

    ~DB

  3. #3
    SitePoint Enthusiast Gamblingharry's Avatar
    Join Date
    Apr 2003
    Location
    UK
    Posts
    83
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    How about this?

    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml">
    
    <html><head><title>Google Tabs</title>
    
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    
    <style>
    <!--
    #navlist ul
    {
    margin: 0;
    padding: 0;
    }
    
    #navlist li
    {
    display: inline;
    list-style-type: none;
    font-family: Arial, Helvetica, sans-serif;
    border-bottom: 1px solid #3366cc;
    
    padding:0 10px;
    margin: 0 -5px;
    }
    
    #navlist a {padding: 2px 10px 0; font-size:12px; }
    
    #navlist a:link, #navlist a:visited
    {
    color: #0000cc;
    background-color: #efefef;
    text-decoration: none;
    }
    
    #navlist a:hover
    {
    color: #00C;
    background-color: #EFEFEF;
    text-decoration: none;
    }
    
    #navcontainer
    {
    
    text-align: center;
    padding: 0px 0px;
    
    }
    -->
    </style>
    
    
    </head><body>
    <center>|</center>
    
    <div id="navcontainer">
    <ul id="navlist">
    <li><a href="reading.html" title="Reading">Reading</a></li>
    <li><a href="math.html" title="Math">Math</a></li>
    <li><a href="scitech.html" title="Science and Technology">Science</a></li>
    <li><a href="enviro.html" title="Environment and Ecology">Environment</a></li>
    <li><a href="candg.html" title="Civics and Government">Civics</a></li>
    <li><a href="econ.html" title="Economics">Economics</a></li>
    </ul>
    </div>
    </body>
    </html>
    BTW: If you setup your CSS with # rather than . you should only have one of them in the page i think.

  4. #4
    \m/\m/ karinne's Avatar
    Join Date
    Dec 2002
    Location
    Aylmer, QC, Canada
    Posts
    409
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Gamblingharry
    How about this?
    BTW: If you setup your CSS with # rather than . you should only have one of them in the page i think.
    yes... # is for id and . is for class

    and id you can only use 1 per page as for that classes you can use multiple times

  5. #5
    \m/\m/ karinne's Avatar
    Join Date
    Dec 2002
    Location
    Aylmer, QC, Canada
    Posts
    409
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    you might want to check alistapart.com, there's a great article on this call Sliding Doors of CSS there's also Part II

    hth


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
  •