Log in

View Full Version : CSS TAB issues



cgfern
11-29-2007, 02:25 PM
http://www.dynamicdrive.com/style/csslibrary/item/glossy_horizontal_menu/

I am using the tabs located at this link, i have saved the images to the appropriate folder within my site. I have changed to code to point at those images, yet only the "home" tab is complete...the other tabs are blank, only showing the words when I preview in IE..when I mouse over the word, for example, Im ouse over "forum" the tab appears...can someone point out what I am doing wrong?

boogyman
11-29-2007, 02:36 PM
can someone point out what I am doing wrong?

not unless you show us some of your code...
either post the url to the code or use the [code] tags to embed it in a reply

cgfern
11-29-2007, 02:44 PM
sorry about that...I left the links in the HTML portion alone, was going to update those once I got that tabs to show up in full

<style type="text/css">

/*Credits: By Santosh Setty (http://webdesigninfo.wordpress.com) */
/*Posted to: Dynamic Drive CSS Library (http://www.dynamicdrive.com/style/) */

.glossymenu{
position: relative;
padding: 0 0 0 34px;
margin: 0 auto 0 auto;
background: url(media/menur_bg.gif) repeat-x;
height: 46px;
list-style: none;
}

.glossymenu li{
float:left;
}

.glossymenu li a{
float: left;
display: block;
color:#000;
text-decoration: none;
font-family: sans-serif;
font-size: 13px;
font-weight: bold;
padding:0 0 0 16px;
height: 46px;
line-height: 46px;
text-align: center;
cursor: pointer;
}

.glossymenu li a b{
float: left;
display: block;
padding: 0 24px 0 8px;
}

.glossymenu li.current a, .glossymenu li a:hover{
color: #fff;
background: url(media/menur_hover_left.gif) no-repeat;
background-position: left;
}

.glossymenu li.current a b, .glossymenu li a:hover b{
color: #fff;
background: url(media/menur_hover_right.gif) no-repeat right top;
}

</style>

<ul class="glossymenu">
<li class="current"><a href="http://www.dynamicdrive.com/"><b>Home</b></a></li>
<li><a href="http://www.dynamicdrive.com/style/"><b>CSS</b></a></li>
<li><a href="http://www.dynamicdrive.com/forums/"><b>Forums</b></a></li>
<li><a href="http://tools.dynamicdrive.com"><b>Webmaster Tools</b></a></li>
<li><a href="http://www.javascriptkit.com/"><b>JavaScript</b></a></li>
<li><a href="http://www.cssdrive.com"><b>Gallery</b></a></li>
</ul>

boogyman
11-29-2007, 03:03 PM
use the[code] tags when posting code, please



background: url(media/menur_bg.gif) repeat-x;

make sure the image is in the sub-folder "media" from whereever the page is being ran.... eg

if you are in your home web root folder. your file system would look like this



index.html (html page)
somepage.html (html page)
pageWithMenu.html (html page)
media (folder)
-- menur_bg.gif (image file)
-- someimage.gif (image file)