shamgu4
06-24-2008, 02:03 PM
hi.. im new here...
Im teaching myself slowly how to use css... Im a fast learner...
So i wanted to apply this css found here
http://www.dynamicdrive.com/style/csslibrary/item/glossy_horizontal_menu/
to my freewebs website ( i cant edit the Html which sucks so I have to change things in the code around....)
I took the code found there and changed it to this
* NavBar
* UL containing all the NavBar links
*/
.fw-nav-menu {
position: relative;
padding: 0 0 0 34px;
margin: 0 auto 0 auto;
background: url(http://www.dynamicdrive.com/cssexamples/media/menur_bg.gif) repeat-x; /*tab background image path*/
height: 46px;
list-style: none;
}
.fw-nav-menu ul {
margin:0px;
padding:0px;
border: ;
background: transparent;
list-style:none;
text-align:left;
cursor:default;
}
/*
* Individual NavBar LI's
*/
.fw-nav-menu li {
margin: 0px 15px 0px 0px;
display: inline;
float:left;
}
/*
* Individual NavBar links
*/
.fw-nav-menu 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;
}
.fw-nav-menu li a{
float: left;
display: block;
padding: 0 24px 0 8px; /*Padding of menu items*/
}
.fw-nav-menu li.current a, .fw-nav-menu li a:hover {
color: #fff;
background: url(http://www.dynamicdrive.com/cssexamples/media/menur_hover_left.gif) no-repeat; /*left tab image path*/
background-position: left;
}
.fw-nav-menu li.current a:hover, .fw-nav-menu li a:hover {
color: #fff;
background: url(http://www.dynamicdrive.com/cssexamples/media/menur_hover_right.gif) no-repeat right top; /*right tab image path*/
}
But only a pice of the tab appears at the top? no matter what i do... im not really sure what this line means...
.fw-nav-menu li.current a:hover, .fw-nav-menu li a:hover {
but if i put a b at the end
.fw-nav-menu li.current a:hover, .fw-nav-menu li a:hover b{
it totally doesnt work
can someone point me in the right direction.. or help me out a bit?
maybe I should use a different site... one that lets me also control the html.. but it wouldnt matter cause I dont know how to code that well yet... im just learning on my own...
hopefully ill take a class... im in college learning java now... so one day...
thanks
Im teaching myself slowly how to use css... Im a fast learner...
So i wanted to apply this css found here
http://www.dynamicdrive.com/style/csslibrary/item/glossy_horizontal_menu/
to my freewebs website ( i cant edit the Html which sucks so I have to change things in the code around....)
I took the code found there and changed it to this
* NavBar
* UL containing all the NavBar links
*/
.fw-nav-menu {
position: relative;
padding: 0 0 0 34px;
margin: 0 auto 0 auto;
background: url(http://www.dynamicdrive.com/cssexamples/media/menur_bg.gif) repeat-x; /*tab background image path*/
height: 46px;
list-style: none;
}
.fw-nav-menu ul {
margin:0px;
padding:0px;
border: ;
background: transparent;
list-style:none;
text-align:left;
cursor:default;
}
/*
* Individual NavBar LI's
*/
.fw-nav-menu li {
margin: 0px 15px 0px 0px;
display: inline;
float:left;
}
/*
* Individual NavBar links
*/
.fw-nav-menu 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;
}
.fw-nav-menu li a{
float: left;
display: block;
padding: 0 24px 0 8px; /*Padding of menu items*/
}
.fw-nav-menu li.current a, .fw-nav-menu li a:hover {
color: #fff;
background: url(http://www.dynamicdrive.com/cssexamples/media/menur_hover_left.gif) no-repeat; /*left tab image path*/
background-position: left;
}
.fw-nav-menu li.current a:hover, .fw-nav-menu li a:hover {
color: #fff;
background: url(http://www.dynamicdrive.com/cssexamples/media/menur_hover_right.gif) no-repeat right top; /*right tab image path*/
}
But only a pice of the tab appears at the top? no matter what i do... im not really sure what this line means...
.fw-nav-menu li.current a:hover, .fw-nav-menu li a:hover {
but if i put a b at the end
.fw-nav-menu li.current a:hover, .fw-nav-menu li a:hover b{
it totally doesnt work
can someone point me in the right direction.. or help me out a bit?
maybe I should use a different site... one that lets me also control the html.. but it wouldnt matter cause I dont know how to code that well yet... im just learning on my own...
hopefully ill take a class... im in college learning java now... so one day...
thanks