Hi All,

 

Quick bit of help if you can......

 

I have the following html and css

 

<div id="contentMain">
				<div id="navBar">
					<ul >
						<li class="navbar"><a href="index.html"></a></li>
							<li><a href="about.html"></a></li>
								<li><a href="services.html"></a></li>
									<li><a href="clients.html"></a></li>
										<li><a href="contact.html"></a></li>
											</ul>
												</div>

 

Then the css like this...

 

#navBar {
background-image: url('file:///C:/Users/Lee/Documents/My Web Sites/Scape Decor/images/nav-bar.jpg');
background-repeat: no-repeat;
width:600px;
height:60px;
}
.navbar {
list-style-type: none;
list-style-image: none;
background-image: url('file:///C:/Users/Lee/Documents/My Web Sites/Scape Decor/images/nav-bar-hover.jpg');
background-repeat: no-repeat;
width:600px;
height:60px;
}
ul {
list-style-type: none;
list-style-image: none;
}

 

So the #navBar but works but the .navbar doesn't has it is a hover so where am I going wrong and these are two images.

 

Cheers

Lee

thought I sussed it, maybe not retracted my message

.navbar a:hover {

list-style-type: none;

list-style-image: none;

background-image: url('file:///C:/Users/Lee/Documents/My Web Sites/Scape Decor/images/nav-bar-hover.jpg');

background-repeat: no-repeat;

width:600px;

height:60px;

}

 

Change it to this...

Ok i changed to that thanks but when I preview it's not doing the "hover" image nor is it going to a link what now?

Ok i changed to that thanks but when I preview it's not doing the "hover" image nor is it going to a link what now?

 

What are you trying to achive excatly?

Check the image path in

 

background-image: url('file:///C:/Users/Lee/Documents/My Web Sites/Scape Decor/images/nav-bar-hover.jpg');

 

should be something like

 

background-image: url('images/nav-bar-hover.jpg');

 

Also, when you're doing nav hovers it's a good idea to add some background colour to see if it's working - this also acts a a substitute background when images are turned off.

HTML code

 

<div id="navBar">

<ul >

<li id="navbar"><a href="index.html"></a></li>

<li><a href="about.html"></a></li>

<li><a href="services.html"></a></li>

<li><a href="clients.html"></a></li>

<li><a href="contact.html"></a></li>

</ul>

</div>

 

Do i need to put something html">HERE???</a></li> in order for the link to work?

also a dot is showing in the list when I told not to.....

 

 

CSS

#navBar {

background-image: url('/images/nav-bar.jpg');

background-repeat: no-repeat;

width:600px;

height:60px;

}

.navbar a:hover {

list-style-type: none;

list-style-image: none;

background-image: url('/images/nav-bar-hover.jpg');

background-repeat: no-repeat;

width:600px;

height:60px;

}

 

 

So i got this bit

 

.navbar a:hover {

list-style-type: none;

list-style-image: none;

background-image: url('/images/nav-bar-hover.jpg');

background-repeat: no-repeat;

width:600px;

height:60px;

}

 

What do i put in the html - <div id="navBar">

<ul >

<li id="navbar"><a href="index.html"></a></li>

presume it's a class but in order to get the hover where do i put the class in <li> or <ul>

 

???

 

Help very much appreciated

 

Lee

I have two images one a main navbar then another that will change to a link hover iage just wish to know how to do so

If you want this to happen on all of them use this for the normal state:

 

#navBar li a:link {stuff here}

 

and your hover ones in

 

#navBar li a:hover {stuff here}

 

Then you don't need the class.

 

 

If you are wanting to just have a few with your class do this for normal stat:

 

a.navbar { stuff here}

and this for hover

 

a.navbar:hover {things changing here (so just your image)}

As a side note its best to get into the habit of not doing this:

 

file:///C:/Users/Lee/Documents/My Web Sites/Scape Decor/images/nav-bar-hover.jpg

 

As when you upload a site I don't have that in my c: directory so I won't be able to see your images, so get used to just doing shorthand and having it as:

 

images/nav-bar-hover.jpg

 

or wherever, as what you are doing is a very bad habit to get into.

Thanks still no joy....

 

heres my html

 

<div id="navBar">

<ul >

<li><a href="index.html"></a></li>

<li><a href="about.html"></a></li>

<li><a href="services.html"></a></li>

<li><a href="clients.html"></a></li>

<li><a href="contact.html"></a></li>

</ul>

</div>

 

 

Heres the css for this DIV

 

#navBar {

list-style-type: none;

list-style-image: none;

background-image: url('nav-bar.jpg');

background-repeat: no-repeat;

width:600px;

height:60px;

background-color:#000000;

}

#navBar li a:hover li a:link{

list-style-type: none;

list-style-image: none;

background-image: url('nav-bar-hover.jpg');

background-repeat: no-repeat;

width:600px;

height:60px;

background-color:#000000;

 

}

What am I doing wrong?

#navBar li a:hover li a:link{ whats this? this isn't what I said is it?

 

 

two seconds I'll code you an example...

kk cheers appreciate this to you all thanks everyone

K I am just using a background colour inseatd of an image, but it would work the same if you put an image in place of the colour

 

HTML:

<div id="navbar">
<ul>
<li><a href="#">link</a></li>
<li><a href="#">link</a></li>
<li><a href="#">link</a></li>
<li><a href="#">link</a></li>
<li><a href="#">link</a></li>
</ul>
</div>

 

 

CSS:

#navbar {
width:200px;
height:200px;
background-color: #00CC33;}


#navbar li {
width:auto;
list-style-type: none;
margin-bottom:10px;

}

#navbar li a {
padding-left:20px;
padding-right:20px;


}

#navbar li a:hover {
background-color: #CCFF33;
}

 

 

in #navbar li a you will put in anything that you want to stay the same from a normal link and a hovered over link, my example is padding, but this would also be width height, margins...ect. Then in #navbar li a:hover you would put things that you want to change when you hover over it, such as the image or the text colour, or in my example the background colour.

 

 

Hope this helps, if not just say and I will do a one with images

right i done what you said but the hover image isnt happening nor is it linking to the spec page

 

<div id="navbar">

<ul>

<li><a href="#">link</a></li>

<li><a href="#">link</a></li>

<li><a href="#">link</a></li>

<li><a href="#">link</a></li>

<li><a href="#">link</a></li>

</ul>

</div>

Does the link bit above have to have text in?

 

 

Heres the CSS i done

#navBar {
list-style-type: none;
list-style-image: none;
background-image: url('nav-bar.jpg');
background-repeat: no-repeat;
width:600px;
height:60px;
background-color:#000000;
}
#navBar li {
list-style-type: none;
list-style-image: none;
background-repeat: no-repeat;
width:600px;
height:60px;


}
#navBar li a{
list-style-type: none;
list-style-image: none;
background-repeat: no-repeat;
width:600px;
height:60px;


}

#navBar li a:hover{
list-style-type: none;
list-style-image: none;
background-image: url('nav-bar-hover.jpg');
background-repeat: no-repeat;
width:600px;
height:60px;
background-color:#000000;

}

ok now I am confused, if it doesn't have text in it how will anyone know which link goes where?

 

And how do your pages not link together? do you get a page not found. If so are you sure you have named them right? are you sure they are all in the same place? are you sure that it is .html and not .htm?

 

Is your hover button in the right place or is it in a different folder such as one called images? Is your css in the same place as your images or is this in a different folder?

 

 

 

If you answer all these questions with a yes you are sure, then can you please post a link to where the site is or zip the site (just the html files, CSS files and the images used in this menu will do if it is huge). This way we can see where you are going wrong as really I think this type of blind guidance isn't helping you much in getting the site to work.

ok you msn ?

ok you msn ?

 

 

Sure I'll login now dizillusionment@hotmail.com

sent you request leestables1@hotmail.com so add me

Im still having problems with this any help would be appreciated

I really cant get this....

 

here's my html

<div id="navi">
								<ul >
									  <li><a href="index.html">home</a></li>
						   				<li><a href="about.html">about us</a></li>
												<li><a href="services.html">services</a></li>
											 		 <li><a href="clients.html">current clients</a></li>
												   			<li><a href="contact.html">contact us</a></li>
												   				</ul>
												   					</div>

 

Here's my CSS

#navi ul {
width: 550px; 
height: 50px; 
top: 70px;
left: 10px; 
list-style: none;
text-align: center;
margin:auto;
	background-image: ('images/102.jpg');

}
#navi li {
display: inline;
}
#navi li a:link, #navigation li a:visited {
width: 550px;
height: 50px;   
outline: none;
background-color:black;
text-align: center;
margin:auto;
}

 

But the links are just showing up as text how do i get the text to go inline with the image

Is this still the same menu that you sent me?