Shade Image Tabs Menu [Archive] - Dynamic Drive Forums

View Full Version : Shade Image Tabs Menu

kidkool345

05-26-2006, 08:17 PM

Hi:

This is a question about:

http://www.dynamicdrive.com/style/csslibrary/item/shade-image-tabs-menu/

I have the Shade Image Tabs Menu working fine with the single exception that the bottom line does not work - "border-bottom". I copied the code for the CSS and the HTML page - I'll insert my code at the end.

Any help in making the line appear would be GREATLY appreciated - perhaps I made a mistake in my html - or do I need to generate the line?

Thanks :)

HTML
----------------
<html>
<head>
<title>Mysite</title>
<link rel=stylesheet href="tabs.css" />
</head>
<body>

<div class="shadetabs">
<ul>
<li><a href="http://www.dynamicdrive.com">Home</a></li>
<li><a href="http://www.dynamicdrive.com/new.htm">DHTML</a></li>
<li class="selected"><a href="http://www.dynamicdrive.com/style/">CSS</a></li>
<li><a href="http://www.dynamicdrive.com/forums/">Forums</a></li>
<li><a href="http://tools.dynamicdrive.com/imageoptimizer/">Gif Optimizer</a></li>
</ul>
</div>
</body>
</html>

---------------------
CSS:




<style type="text/css">

.shadetabs{
border-bottom: 1px solid gray;
/* width: 90%; width of menu. Uncomment to change to a specific width */
margin-bottom: 1em;
}

.shadetabs ul{
padding: 3px 0;
margin-left: 0;
margin-top: 1px;
margin-bottom: 0;
font: bold 12px Verdana;
list-style-type: none;
text-align: left; /*set to left, center, or right to align the menu as desired*/
}

.shadetabs li{
display: inline;
margin: 0;
}

.shadetabs li a{
text-decoration: none;
padding: 3px 7px;
margin-right: 3px;
border: 1px solid #778;
color: #2d2b2b;
background: white url(media/shade.gif) top left repeat-x;
}

.shadetabs li a:visited{
color: #2d2b2b;
}

.shadetabs li a:hover{
text-decoration: underline;
color: #2d2b2b;
}

.shadetabs li.selected{
position: relative;
top: 1px;
}

.shadetabs li.selected a{ /*selected main tab style */
background-image: url(media/shadeactive.gif);
border-bottom-color: white;
}

.shadetabs li.selected a:hover{ /*selected main tab style */
text-decoration: none;
}

</style>

ddadmin

05-27-2006, 09:31 PM

Have you tried adding a valid doctype at the beginning of your webpage, such as the below (replacing your <HTML> tag):

<!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" lang="en" xml:lang="en">

Some of the CSS in the library will only work correctly with a valid doctype.

kidkool345

05-27-2006, 11:30 PM

Thanks ddadmin:

I still have the problem with the mods that you gave me in both IE and Firefox. The underline simply does not appear anywhere.

I created both index.htm and tabs.css files again from the website just to be sure that I hadn't left anything out. I inserted the <!DOCTYPE as you indicated.

Here are my files - I'm sure that I'm leaving something simple out!

Thanks very much for your help!

index.htm:

<!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" lang="en" xml:lang="en">
<title>Mysite</title>
<link rel=stylesheet href="tabs.css" />
</head>
<body>
<div class="shadetabs">
<ul>
<li><a href="http://www.dynamicdrive.com">Home</a></li>
<li><a href="http://www.dynamicdrive.com/new.htm">DHTML</a></li>
<li class="selected"><a href="http://www.dynamicdrive.com/style/">CSS</a></li>
<li><a href="http://www.dynamicdrive.com/forums/">Forums</a></li>
<li><a href="http://tools.dynamicdrive.com/imageoptimizer/">Gif Optimizer</a></li>
</ul>
</div>
</body>
</html>

tabs.css:




<style type="text/css">

.shadetabs{
border-bottom: 1px solid gray;
/* width: 90%; width of menu. Uncomment to change to a specific width */
margin-bottom: 1em;
}

.shadetabs ul{
padding: 3px 0;
margin-left: 0;
margin-top: 1px;
margin-bottom: 0;
font: bold 12px Verdana;
list-style-type: none;
text-align: left; /*set to left, center, or right to align the menu as desired*/
}

.shadetabs li{
display: inline;
margin: 0;
}

.shadetabs li a{
text-decoration: none;
padding: 3px 7px;
margin-right: 3px;
border: 1px solid #778;
color: #2d2b2b;
background: white url(media/shade.gif) top left repeat-x;
}

.shadetabs li a:visited{
color: #2d2b2b;
}

.shadetabs li a:hover{
text-decoration: underline;
color: #2d2b2b;
}

.shadetabs li.selected{
position: relative;
top: 1px;
}

.shadetabs li.selected a{ /*selected main tab style */
background-image: url(media/shadeactive.gif);
border-bottom-color: white;
}

.shadetabs li.selected a:hover{ /*selected main tab style */
text-decoration: none;
}

</style>

ddadmin

05-27-2006, 11:44 PM

Please post a link to the page on your site that contains the problematic script so we can check it out.

kidkool345

05-28-2006, 02:24 PM

Hi ddadmin:

Thanks again - I have posted my files to:

http://www.fy1.net/tabs/

I really appreciate your help!

ddadmin

05-28-2006, 05:20 PM

Not sure if this is the problem, but inside your tabs.css file, it should not contain the surrounding:

<style type="text/css">

</style>

tags. Remove those two tags from the file and see if that fixes the problem.

kidkool345

05-28-2006, 07:46 PM

Hi ddadmin:

I removed the <style> and </style> lines from the css file as you suggested and it is working just fine!

I obtained the css with the style tags included from this site at:

http://www.dynamicdrive.com/style/csslibrary/item/shade-image-tabs-menu/

so perhaps that should be changed to exclude the <style>'s.

The page works perfecty now in both IE and Mozilla:

http://fy1.net/tabs/

Thanks very much for your help!

Twey

05-28-2006, 08:19 PM

"The CSS" and then the code with the HTML tag in is a bit misleading, I'll grant you.

ddadmin

05-28-2006, 11:53 PM

Well the CSS code is meant to be inserted inline on the page for illustration, hence the <style> tags. An external CSS file should never contain the style tags.

Twey

05-29-2006, 12:20 AM

Yes, I understand that, but labelling it "The CSS" perhaps isn't a good idea when it contains HTML.