1 reply [Last post]
Erdinc's picture
Last seen: 12 years 3 weeks ago
Joined: 2009-10-14
Posts: 4
Points: 6


This is my first post here.

I like learning things while working on real projects. I am building my first graphic design portfolio website and decided I should create my own menu. Besides I didn't like any that I found.

This took me one full day. This menu has alpha transparent PNG8 images that work in IE6 without a hack or javascript.

Here it is:

It validates XHTML 1.0 Strict. I checked in all major browsers and it looks fine.

This is what I'm looking for:
1. The css codes are too complicated. Especially those flap divs on both sides of each tab. Should I use span? When you use span how do you refer to it without giving id's? Generally my code feels complicated.

2. I don't want it to break when text is enlarged in browsers. I tested this and there is good flexibility but is it good enough? How can I improve it? Should I switch from px to em's. I feel like this is going to be very difficult.

3. Regarding accessibility in especially mobile devices, how can I improve the font size settings? Are they fine as they are?

4. To centre the menu I used a wrap. Is there a better way doing this?

5. Is there a way to attach the flap images to left and right of the tab while the tab's width is flexible and expands with longer text?

Freelance Graphic Designer
London, England

Tyssen's picture
Last seen: 7 years 6 weeks ago
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

Have you ever come across CSS

Have you ever come across CSS Sliding Doors? Seems like that technique would probably answer some of your questions.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference