Webmasters Stack Exchange is a question and answer site for pro webmasters. It only takes a minute to sign up.
Sign up to join this community
I have to slice website design to HTML/CSS. Main navigation menu looks like below:
I am beginner webdeveloper and I don't know how to slice this design into compatible and cross-browser code. How these parallelogram shaped items should be sliced?
There are also hover and selected states so I would probably use CSS sprites for that, but main problem for me are these parallelograms.
If you don't want to play around with css transform.
Honestly the best thing is to use rectangles and ensuring the rollover states do not cross over the rectangles. Example: http://imm.io/J4D8
I also found this if it helps, http://doctype.com/rollover-done-css
Although not supported by older browsers, you could have a look at the transform property in CSS. http://davidwalsh.name/css-transform-rotate It would be quite fiddly though, I'd suggest you to use background images and position the text above it (and possibly even the text as image) in order to achieve the effect shown in the url you have posted
You can create parallelograms with CSS properties, although it looks like it shows up as a square in IE.
You also may be able to use a good old fashioned imagemap with some area tags utilizing shape="poly" and coordinates for the points. Not sure if that works with rollover or not.
