Google Tabs

**Philbert** · Nov 25, 2003 22:08

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>

</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>

**DeeBs** · Nov 25, 2003 22:25

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

**Gamblingharry** · Nov 27, 2003 07:44

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.

**karinne** · Nov 27, 2003 08:03

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

**karinne** · Nov 27, 2003 08:06

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

User Tag List

Thread: Google Tabs

Thread Tools

Display

Google Tabs

Bookmarks

Bookmarks

Posting Permissions