21 replies [Last post]
tushar707
Offline
Regular
Last seen: 12 years 27 weeks ago
Joined: 2007-05-12
Posts: 15
Points: 0

hello,
I am a beginner to css, and would appreciate if someone had a code for this. I am looking for a css menu like this http://www.tanfa.co.uk/css/examples/menu/vs6.asp However, I need it to be with images. When people go over a sub menu, it needs to be replaced with another image.

Deuce
Deuce's picture
Offline
Guru
Somewhere, USA
Last seen: 2 years 18 weeks ago
Somewhere, USA
Timezone: GMT-5
Joined: 2005-11-20
Posts: 4424
Points: 1843

instead of expecting us to

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.

all ยป http://dictionary.reference.com/browse/all

Google isn't a bunch of guys reading and grading web sites, it's more like a bunch of monkeys sniffing food and putting the good bananas at the top. -Triumph

tushar707
Offline
Regular
Last seen: 12 years 27 weeks ago
Joined: 2007-05-12
Posts: 15
Points: 0

where can I find step by

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

Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 50 weeks 6 days ago
Victoria British Columbia
Timezone: GMT-8
Joined: 2005-12-14
Posts: 3570
Points: 675

You say you are a beginner

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.

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

linspirell
linspirell's picture
Offline
Regular
Indonesia
Last seen: 9 years 21 weeks ago
Indonesia
Timezone: GMT+7
Joined: 2007-05-09
Posts: 25
Points: 0

Hiiii this is very usefull

Hiiii Smile
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...

Hey friends! my name is -oka prinarjaya- Smile

tushar707
Offline
Regular
Last seen: 12 years 27 weeks ago
Joined: 2007-05-12
Posts: 15
Points: 0

I have made a fully

thanks. I think I have made it!

PARoss
PARoss's picture
Offline
Enthusiast
Last seen: 6 years 40 weeks ago
Timezone: GMT-5
Joined: 2005-10-29
Posts: 147
Points: 14

To learn, see what the

tushar707
Offline
Regular
Last seen: 12 years 27 weeks ago
Joined: 2007-05-12
Posts: 15
Points: 0

Hey guys, I finished making

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;
}


  • Resources

    • My Articles

    • Newsletters

    • Useful Links




  • Events

    • Burrowing gobies

    • Dartfishes

    • Eellike gobies

    • Gobies


  • Testimonials

  • About Me

  • Contact Us

  •  

    SuperRoach
    SuperRoach's picture
    Offline
    Enthusiast
    Ballarat
    Last seen: 8 years 11 weeks ago
    Ballarat
    Timezone: GMT+10
    Joined: 2007-02-26
    Posts: 291
    Points: 6

    man... I don't know where to

    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?

    tushar707
    Offline
    Regular
    Last seen: 12 years 27 weeks ago
    Joined: 2007-05-12
    Posts: 15
    Points: 0

    so there is no way to fix

    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!

    mihirc
    mihirc's picture
    Offline
    Leader
    Pune, Maharashtra, India
    Last seen: 5 years 15 weeks ago
    Pune, Maharashtra, India
    Timezone: GMT+5.5
    Joined: 2007-05-09
    Posts: 728
    Points: 204

    hi tushar, what i have

    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 Smile

    Proprietor - Thoughtfulviewfinder Services
    Web Development | Design | Merchandise | Photography
    My personal blog: MihirChhatre.com

    tushar707
    Offline
    Regular
    Last seen: 12 years 27 weeks ago
    Joined: 2007-05-12
    Posts: 15
    Points: 0

    since I am new to this can

    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);

    mihirc
    mihirc's picture
    Offline
    Leader
    Pune, Maharashtra, India
    Last seen: 5 years 15 weeks ago
    Pune, Maharashtra, India
    Timezone: GMT+5.5
    Joined: 2007-05-09
    Posts: 728
    Points: 204

    #nav li a {width: 5em;w\idth

    #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. Smile

    Proprietor - Thoughtfulviewfinder Services
    Web Development | Design | Merchandise | Photography
    My personal blog: MihirChhatre.com

    tushar707
    Offline
    Regular
    Last seen: 12 years 27 weeks ago
    Joined: 2007-05-12
    Posts: 15
    Points: 0

    okay. how about the hover

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

    mihirc
    mihirc's picture
    Offline
    Leader
    Pune, Maharashtra, India
    Last seen: 5 years 15 weeks ago
    Pune, Maharashtra, India
    Timezone: GMT+5.5
    Joined: 2007-05-09
    Posts: 728
    Points: 204

    did that work? now to the

    did that work?

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

    mihir Smile

    Proprietor - Thoughtfulviewfinder Services
    Web Development | Design | Merchandise | Photography
    My personal blog: MihirChhatre.com

    mihirc
    mihirc's picture
    Offline
    Leader
    Pune, Maharashtra, India
    Last seen: 5 years 15 weeks ago
    Pune, Maharashtra, India
    Timezone: GMT+5.5
    Joined: 2007-05-09
    Posts: 728
    Points: 204

    giv the tag li:hover and giv

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

    hope that works...

    mihir Smile

    Proprietor - Thoughtfulviewfinder Services
    Web Development | Design | Merchandise | Photography
    My personal blog: MihirChhatre.com

    tushar707
    Offline
    Regular
    Last seen: 12 years 27 weeks ago
    Joined: 2007-05-12
    Posts: 15
    Points: 0

    I did the best I could.

    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.

    mihirc
    mihirc's picture
    Offline
    Leader
    Pune, Maharashtra, India
    Last seen: 5 years 15 weeks ago
    Pune, Maharashtra, India
    Timezone: GMT+5.5
    Joined: 2007-05-09
    Posts: 728
    Points: 204

    Dude..................... I

    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:)

    Proprietor - Thoughtfulviewfinder Services
    Web Development | Design | Merchandise | Photography
    My personal blog: MihirChhatre.com

    tushar707
    Offline
    Regular
    Last seen: 12 years 27 weeks ago
    Joined: 2007-05-12
    Posts: 15
    Points: 0

    I tried doing what you told

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

    mihirc
    mihirc's picture
    Offline
    Leader
    Pune, Maharashtra, India
    Last seen: 5 years 15 weeks ago
    Pune, Maharashtra, India
    Timezone: GMT+5.5
    Joined: 2007-05-09
    Posts: 728
    Points: 204

    is it possible for u to copy

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

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

    mihir. Smile

    Proprietor - Thoughtfulviewfinder Services
    Web Development | Design | Merchandise | Photography
    My personal blog: MihirChhatre.com

    tushar707
    Offline
    Regular
    Last seen: 12 years 27 weeks ago
    Joined: 2007-05-12
    Posts: 15
    Points: 0

    here is the code. when I

    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;
    }

    thepineapplehead
    thepineapplehead's picture
    Offline
    Guru
    Last seen: 1 year 13 weeks ago
    Timezone: GMT+1
    Joined: 2004-06-30
    Posts: 9668
    Points: 801

    continued

    Verschwindende wrote:
    • CSS doesn't make pies