Treehouse: Grow your CSS skills. Land your dream job.

CSS Menu Float-over help

  • # May 18, 2010 at 2:57 pm

    Hello guys,

    I’m new to this forum and was wondering if any of you fine people could assist me? I’ve not got a web-domain as I plan to design & develop locally so any live examples are (unfortunately) not possible. I’ll try and explain as clear and concisely as I can.

    Here’s an image of the problem/task at hand:


    As you can see, I hope to code the above PSD design using CSS. What I’d like to do is whenever the cursor hovers over the relevant tab, I’d like the text to turn a different colour, and the tab background to turn white (like the above ‘blog’ tab). Then when I click on (for example) ‘ the ‘About’ tab a new page loads and the About’ tab is white and the viewer can browse my ‘About’ page. Now is this all possible with CSS or am I barking up the wrong tree?

    If I’m being vague the best way I can describe the problem is if you simply look up at CSS-Tricks’ navigation bar. We are now on the ‘Forums’ section so we can see that lovely, white speech-bubble thingy(!). Accordingly, if I were to go to the ‘Snippets’ page, the graphic would change as the white, speech-bubble would then be on the ‘Snippets’ label. This is what I want to do with the menu that I’ve posted a picture of above.

    I hope someone can help. If it matters I’d first just like to get the basics working in HTML/CSS. I’m going to install XAMPP (wordpress) tomorrow, and I understand I will have to get to grips with PHP. That’s fine – for the moment I’d just like to get the above menu working in HTML/CSS before I get ahead of myself.

    Thank you.

    # May 18, 2010 at 5:57 pm

    You could use css sprites, Chris has an article on this
    a little tricky for a beginner but once you get the hang of the positioning it makes things simple. One tip is to try and keep each image the same size and distance apart so you don’t get complicated math.

    # May 18, 2010 at 10:19 pm

    Thanks for the reply. I’ve got it working.

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.