Horizontal Navigation Menu with CSS and Background Image

[AdSenseSite]

kind a old, but im like it anyway

[geeno123]

i tried this same technique for my website and my background images for my menu buttons wont show. HELP!! lol

[srgtfx]

how can i remove the spaces?

[rrphillips]

@srgtfx Determine where the spaces are. To do this, put some temporary borders or background colors on elements. The space could be caused by margin or padding on the list items and/or the anchor tags. Once you've determined what's causing the space, set the margin and/or padding to 0px. The space is likely some default margin between the list items (li tags). A reset rule might help with this, too.

[softwarez4free]

How to make the image stay "Red" when clicked ?

[wikke404]

thank you soooooo much, you are my hero :D

[praveenramc]

awesome tutorial. I learnt few tricks and understood the margin property !

[AshleighGore]

nice video!

[ads0668]

I've followed these steps and have my menu working perfectly in Firefox but the page comes up blank in Safari. Does Safari support this css?

[rrphillips]

@ads0668

Look for a missing closing tag in your HTML. Some browsers are more forgiving than others. A blank page is a common symptom for a missing closing tag for title, or head or style if you've got that.

This technique is support by all modern browsers.

[ads0668]

@rrphillips thanks mate. All sorted - just a stupid typo. Thanks

[NunoSequeiraAndre]

I tried reading many pages to try to understand this but only your video was clear enough, many thanks.

[Mohanmojo]

I need to know what is multi-state image, is it some kind of package that comes with CSS..or is it just a part of CSS

Please reply!

[ibe36]

Hi'

This has been a gret help for me.

I thank you and hope to see more of this kind.

Itzik.

[mxco69]

THANK YOU SOOOOOO MUCH FOR THIS VIDEO!!!!!!!!!

I cannot even begin to tell you how informative it was. I've been at this for days and finally your video fixed my problem.

Thank you again.

All the best,

max

[msbluntnyc]

Thanks so much it all worked.... I had to tweak my code a bit for my main image adjustments but it came out perfect! You're a great tutor! =)

[timdhines]

Excellent video - thanks you. I am trying to vertically align my text at the bottom of the "button". I can centre it like you have, by setting the link properties to have a line height and height of, say, 40. However, if I try to increase the line height any further (in an attempt to move text towards button of button), the whole block increases in size. Any ideas how to vertically bottom align the text in the button please? Many thanks.

[timdhines]

@timdhines I figured it out eventually, I set the overflow to hidden and it worked great.

I now have one final question (honest!)... is it possible to show the last selected link as a particular colour (e.g. red in your example).  So if the user has clicked on menu item 3, then menu item 3 becomes red until they click another?

[Thealedela]

@timdhines -------- If you want the webpage you are currently on to have a 3rd state on the relevant menu link (i.e. different from the standard link AND different from the css pseudo class :hover) then you need to manipulate the body in your css. You must give the body of each html page an id and link that to the stylesheet so it can be referenced.

[Imobeous]

I copied down everything exactly as he did it in the video and it didn't work at all. It wont even come close to changing for a dotted menu.

[sitedesignerle8]

what is the link for the image you are using?

[heyawhaw]

HA! Thanx! I'm going to chew on this for a while! : )

[moonshiry]

wow i realize that im not the only one having very frustrating problems. this tutorial is probably one of the best i have ever watched! thanks!!

[divakaneva]

Thanks this is very helpful for us new people

[MondoDesigns]

Great!

THX for this Tutorial, very helpful!

[sander5009]

Thanks a lot

[awefgowefaw]

This is excellent work and exactly what I need to learn at this point. My problem is that I am unsuccessfully trying to reproduce the code by reviewing the video 150 times. Does the code exist anywhere , where it can be downloaded.

thank you

Fran Warren

Awefgowefaw

[lizgiraffz]

wow, this could have been done so much quicker if you would have known a little more about photoshop. you could have made each of the buttons separately with the background colors on photoshop and then just made it a link with the pictures instead of having to make it move up and all that crap.

[loudnoiseelitist]

I think you're missing the point in this. First of all, it's using one image, instead of two (or possibly three). Since it's one image, the browser loads that one image immediately. If you were to use mouseovers, the browser won't load mouseover image until you mouseover the first box, causing a bit of delay. This way, once the image is load, all states of that image are loaded. also, this makes the code much cleaner (no need for javascript)

[rrphillips]

Photoshop skills are certainly worthwhile. Another benefit of the list and css method is adding new items to the menu is super easy. Just add a new list item and the job is done in seconds. Cheaper than having your graphic designer make changes.

There's a reason Apple and Microsoft are using this technique.

[Bognit]

@lizgiraffz that means two trips to the server which causes a flicker - that's why this crap was introduced in the first place :-O

[GTAExtr3me]

cheers mate helped me complete my assignment to make a whole website for an IT National Diploma CHEERS mate SUBSCRIBE SOUND!!

[milanzivanovic]

Tut helped me to get start with css postitioning.

[oldnsad]

Great tut well explained

[danger4x]

Great Man.. awesome.

[lazzayo]

gr8 tut this has really boosted my site ty :D

[l3gycsap0]

Wow !

Great tut!

Thanks !

[marckensj]

i LIKE IT.

GREAT TUTORIAL

5 STARS

[walkinwardrobedesign]

best tutorial on css links.

You floated the links to the left in the ul element instead of using display-inline interesting

[soydeachuapa]

Best tutorial!

[5pivegg]

Love your keyboard sound!

Great video.

Cheers!

[nickvth2009]

Me too, I think it's an old IBM keyboard from begin 80's

[rrphillips]

The keyboard is a 'das keyboard' with mechanical switches. It's very tactile. nickvth2009 is correct, in that the modern 'das keyboard' does get its inspiration from the the IBM M series (i think) keyboard from the 80s.

[Palkia323]

sweet... i subed!

[Palkia323]

sorry i didnt say this earlier but can you give a link to ur html in ur description.

[1337kaas]

Thanks, very well explained also

I needed this for my new website

Keep up the good work man,

Greets from holland

[George351838]

Cheers!

Wanted to know how to do this! =))

Thanks.

[AliciaRae89]

please do more css tutorials you are amazing at teaching it.

please try to do a tutorial to create a css website starting from scratch

[lostintres]

After frustrating, hair-pulling hours of searching and trying to get this right, this was, by far, the best tutorial I've come across. You saved my sanity! I'm determined to learn CSS. Keep 'em coming!

[notentirelynecessary]

Fantastic!

[alsqr]

great tutorial thanks man

[chrjtay]

you are a lifesaver, your tutorials are fanatastic, i have only learnt CSS because of you!!

[cegielski]

I would be interested to know what editor you are using. I have listened to several of your html/css videos and am impressed with the content and delivery. Looking forward to future videos.

[cegielski]

Oops - just realised it's Notepad ++ (should have looked on the screen!)

[wakeupfist]

This worked great but does not seem to be XHTML strict compliant. Is there a way to make it compliant?

Thanks

[wakeupfist]

"There you go, bullets are gone"

NOPE, THEY ARE NOT! :)

There's got to be something we left out, my man. What could it be?

[wakeupfist]

Nevermind, my bad, I accidentally left a whitespace between "#" and "navmenu ul", I deserve to be kicked in the face, sorry, thank you.

[CoNiLa2]

i am thankfull

this is the first vid i watched from your channel now i will suscribe and also rate 5 stars on every video

[danaross]

Well done! You made it very clear. Excellent. I love shifting the background image up for the change in color. thank you.

[haccuk]

Many thanks for your answer. I'm in the UK and at age 68 I have learnt HTML and getting good grasp of CSS and just a little php and in no small measure it is due to some of your excellent videos.

I look forward to more in due course.

Regards

Bill

[haccuk]

Thank you, another very easy to follow tutorial, but just one question if I may? Why do you use images to change to state rather than just background color?

[rrphillips]

Using an images gives you an option for a cooler looking button. It's hard to see in the video, but the background had a triangle/arrow on one side. Check out Apple's horizontal navigation on their site. They do the same thing. The image they use gives their menu a more "techy" look than a solid color.

[martin8484]

Thanks, that was quite useful.

[INGc3z4r]

Great Tutorial, Thanks!