drop down menu help

instead of expecting us to do the work for you, how about you learn some css, try to code it and if it doesn't work come to us with what you have coded and we will help you figure out what you did wrong.

I need to know how to change a text based css menu into one with images. I have the rest already made. I have a menu like this http://tutorials.alsacreations.com/deroulant/cssmenu4.htm

You say you are a beginner at CSS, and here you are trying to do drop down menus, an advanced CSS technique if there ever was one. Maybe you should consider the possibility that you are biting off more than you can chew here and save the advanced techniques for later, when you have the background for them.

Drop down menus are mainly a boost to the ego of the designer, IMHO, and don't do a thing to make a site more stylish or usable.

Hiiii
this is very usefull article...
this article good foru and good for me... ( do u feel that ?? )

read this article http://www.htmldog.com/articles/suckerfish/dropdowns/ and u will can create the coolest menu like u want...

thanks. I think I have made it!

To learn, see what the masters have done:

http://www.cssplay.co.uk/menus/index.html

http://css.maxdesign.com.au/listamatic/

Phil

Hey guys, I finished making my menu in a sepearte html file and it looks like this:

However when I copy and paste it into my index file it starts to look like this!:

this is my code for my menu:

My Prana

body {
font-family: VladimirScrD;
font-size: 24px;
}

#nav, #nav ul { /* all lists */
padding: 0;
margin: 0;
list-style: none;
float : left;
width : 149px;
}

#nav li { /* all list items */
position : relative;
float : left;
line-height : 29px;
margin-bottom : -1px;
width: 144px;
}

#nav li ul { /* second-level lists */
position : absolute;
left: -999em;
margin-left : 144px;
margin-top : -1.20em;
}

#nav li ul ul { /* third-and-above-level lists */
left: -999em;
margin-top : -29px;
}

#nav li a {
width: 5em;
w\idth : 5em;
display : block;
color : #1463a5;
font-weight : 300;
text-decoration : none;
border : none;
background-image: url(images/button.jpg);
padding-top: 0;
padding-right: 0em;
padding-bottom: 0;
padding-left: 1em;
}

#nav li a:hover {
color : white;
background : url(images/button_rollover.jpg);
}

#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
left: -999em;
}

#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul { /* lists nested under hovered list items */
left: auto;
}

#content {
margin-left : 6em;
}

• Home
  
• Our Programs


• Climbing perches


• Labyrinthfishes


• Kissing gouramis


• Pike-heads


• Giant gouramis

man... I don't know where to start.

This looks like its way too far ahead and your trying to learn too much at once. For starters, the code looks like its a copy paste from a tute.

Using things like 1.20em for example when you've got what looks like fixed pixels type stuff (a rectangle) kind of says that your not sure how for across they are.

To help you along, why don't you try the dhtml style dropdowns that dreamweaver can do?

so there is no way to fix this? I really needed this. It looks fine when I dont import it to my index file though!

hi tushar,
what i have noticed is that you have given the img as a background to the link, so what happens is, when the link(text) gets over the img stops. you could giving the background to the td/div that the menu has. giv that td/div a width and height of the image, then it will look good.

Hope this helps..

mihir

since I am new to this can you please give me an example of what you mean. I am not trying to avoid work as I have done all this, but am a little confused. I dont know exactly what you are talking about. What exactly do i need to change here:

background-image: url(images/button.jpg);

#nav li a { width: 5em; w\idth : 5em; display : block; color : #1463a5; font-weight : 300; text-decoration : none; border : none; background-image: url(images/button.jpg); padding-top: 0; padding-right: 0em; padding-bottom: 0; padding-left: 1em; }

What i mean is, if you notice, you have given the img to "a" which means that you have given it to the links. so when the link gets over... the img ends. what you can do is giv the background img to "li", that will work i guess...

let me know...

mihir.

okay. how about the hover image? because the image changes for the hover.

did that work?

now to the next part... let me check ur code first...

mihir

giv the tag li:hover and giv it a background img with a width and height...

hope that works...

mihir

here is the css:

body {
font-family: VladimirScrD;
font-size: 24px;
}

#nav, #nav ul { /* all lists */
padding: 0;
margin: 0;
list-style: none;
float : left;
width : 153px;
}

#nav li { /* all list items */
position : relative;
float : left;
line-height : 29px;
margin-bottom : -1px;
width: 153px;
}

#nav li ul { /* second-level lists */
position : absolute;
left: -999em;
margin-left : 148px;
margin-top : -30px;
}

#nav li ul ul { /* third-and-above-level lists */
left: -999em;
}

#nav li a {
width: 153px;
w\idth : 112px;
display : block;
color : #1463a5;
font-family: Monotype Corsiva;
font-weight : 100;
font-size: 22;
text-decoration : none;
background-image : url(images/button.jpg);
border : none;
padding : 0 0.5em;
padding-left: 25px;
}

li:hover {
background-image : url(images/button_rollover.jpg);
height: 29px;
width: 153px;

#nav li a:hover {
color : white;
}

#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
left: -999em;
}

#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul { /* lists nested under hovered list items */
left: auto;
}

#content {
margin-left : auto;
}

however the hover is not working! let me know what I did wrong.

Dude.....................

I told you to giv the image to the "ul/li" and not the "a".... told u a thousand times now... plz rectify that will you?

mihir:)

I tried doing what you told me, however, when I rollover, nothing happens. the image doesn't change

is it possible for u to copy the code here...?

will take a look, and reply in a couple of hrs..

mihir.

here is the code. when I rollover the image doesn't change at all. Also the menu isn't centered anymore. Let me know how to fix that too. I really appreciate your help. 149px is the width of the button, and 29px is the height.

body {
font-family: VladimirScrD;
font-size: 24px;
}

#nav, #nav ul { /* all lists */
padding: 0;
margin: 0;
list-style: none;
float : left;
width : 153px;
}

#nav li { /* all list items */
position : relative;
float : left;
line-height : 29px;
margin-bottom : -1px;
background-image : url(images/button.jpg);
width: 149px;

}

#nav li ul { /* second-level lists */
position : absolute;
left: -999em;
margin-left : 149px;
margin-top : -30px;
}

#nav li ul ul { /* third-and-above-level lists */
left: -999em;
}

#nav li a {
width: 149px;
w\idth : 112px;
display : block;
color : #1463a5;
font-family: Monotype Corsiva;
font-weight : 100;
font-size: 22;
text-decoration : none;
border : none;
padding : 0 0.5em;
padding-left: 25px;

}

#nav li:hover {
background-image : url(images/button.jpg);
height: 29px;
width: 149px;

}

#nav li a:hover {
color : white;
}

#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
left: -999em;
}

#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul { /* lists nested under hovered list items */
left: auto;
}

#content {
margin-left : auto;
}

continued here

http://www.csscreator.com/node/22146