css menu

[meakip]

http://www.dynamicdrive.com/style/csslibrary/item/glossy_horizontal_menu/

Hi, I am trying to install the above menu but it does'nt work, this is the first css menu I have worked with and so it very much trial and error.

what I did was:

1) copy css and pasted it into my own style sheet and added images to my image folder and updated the image urls.

2) copied the HTML and added it to the head


what is happening is the links appear in a vertical line.

http://www.pinkspiderdirect.com/slow/index.php

any idea's, do I need to add any more files ? or do something else.

Patrick

[NXArmada]

Remove the



<style type="text/css">

</style>


From your .css file where you have the glossymenu styles. When including into a .css file these tags are not required.

This


<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('http://www.pinkspiderdirect.com/sexshop/templates/Pixame_v1/images/menur_bg.gif) repeat-x; /*tab background image path*/
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; /*Padding to accomodate left tab image. Do not change*/
height: 46px;
line-height: 46px;
text-align: center;
cursor: pointer;
}

.glossymenu li a b{
float: left;
display: block;
padding: 0 24px 0 8px; /*Padding of menu items*/
}

.glossymenu li.current a, .glossymenu li a:hover{
color: #fff;
background: url('http://www.pinkspiderdirect.com/sexshop/templates/Pixame_v1/images/menur_hover_left.gif) no-repeat; /*left tab image path*/
background-position: left;
}

.glossymenu li.current a b, .glossymenu li a:hover b{
color: #fff;
background: url('http://www.pinkspiderdirect.com/sexshop/templates/Pixame_v1/images/menur_hover_right.gif) no-repeat right top; /*right tab image path*/
}


</style>


to this



/*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('http://www.pinkspiderdirect.com/sexshop/templates/Pixame_v1/images/menur_bg.gif) repeat-x; /*tab background image path*/
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; /*Padding to accomodate left tab image. Do not change*/
height: 46px;
line-height: 46px;
text-align: center;
cursor: pointer;
}

.glossymenu li a b{
float: left;
display: block;
padding: 0 24px 0 8px; /*Padding of menu items*/
}

.glossymenu li.current a, .glossymenu li a:hover{
color: #fff;
background: url('http://www.pinkspiderdirect.com/sexshop/templates/Pixame_v1/images/menur_hover_left.gif) no-repeat; /*left tab image path*/
background-position: left;
}

.glossymenu li.current a b, .glossymenu li a:hover b{
color: #fff;
background: url('http://www.pinkspiderdirect.com/sexshop/templates/Pixame_v1/images/menur_hover_right.gif) no-repeat right top; /*right tab image path*/
}

[meakip]

Thanks for that, I have done that but still have a couple of problems, the menu apears when I look at it in firefox but it does not have any images, I have checked my image paths and they seem ok.

and my other problem is that the menu is unchanged in IE,it still is in a vertical line, the original on Dynamic drive works fine so I guessing that its a problem with the installation not the browser.

Patrick

[terrik]

You left out an apostrophe in the css statement.


Your Code Reads ::

background: url('http://www.pinkspiderdirect.com/sexshop/templates/Pixame_v1/images/menur_bg.gif) repeat-x; /*tab background image path*/

It SHOULD Read ::

background: url('http://www.pinkspiderdirect.com/sexshop/templates/Pixame_v1/images/menur_bg.gif') repeat-x; /*tab background image path*/

If you still experience problems, don't use the shortcuts statement.
Try replacing your background statement ( as shown above ) with ::

background-image: url('http://www.pinkspiderdirect.com/sexshop/templates/Pixame_v1/images/menur_bg.gif');
background-repeat: no-repeat;
background-position: ; /* If you need to adjust the position of the image */

[Medyman]

You left out an apostrophe in the css statement.

Actually, there should be no apostrophes at all. For valid CSS, just add the path within the parenthesis, no single or double quotes.

So, it SHOULD REALLY read:


background: url(http://www.pinkspiderdirect.com/sexshop/templates/Pixame_v1/images/menur_bg.gif) repeat-x; /*tab background image path*/

[meakip]

Thankyou very much to all of you, im on my way now !

Top Bannana.

Patrick