Take the 2-minute tour ×
Graphic Design Stack Exchange is a question and answer site for Graphic Design professionals, students, and enthusiasts. It's 100% free, no registration required.

I have to slice website design to HTML/CSS. Main navigation menu looks like below:

enter image description here

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

Any help and advice is much appreciated. Thanks in advance.

share|improve this question

2 Answers 2

up vote 2 down vote accepted

CSS and positioning

You can save them as parallelograms with transparent edges (png) (meaning of course he image will be square). In your CSS you can then set your div container to:

.button {
    position: relative;
    left: -5px;
    //... other specs
}

The -5px is just an example. In html you could have used more complex shapes directly, but html5 is in draft mode and is yet not fully supported.

Edit: solution two -

Image maps

In the "old" days we would have saved out the whole image as-is and apply an image map to it. An image map specifies a polygon that will be the hotspot on an image. For each polygon you define you can specify click events and so forth as ordinary.

Defining image maps manually is a bit tedious though, but if you have access to f.ex. Dreamweaver you can simply just draw the polygon on top of your image and Dreamweaver will do the rest for you.

Here is a tutorial on how to make image maps:
http://www.javascriptkit.com/howto/imagemap.shtml

I found an online service where you can define maps too, I'm not sure how good it is, but give it a try in case you don't have Dreamweaver or a similar tool:
http://www.image-maps.com/

Example on how you can define hot-spots in an image map in Dreamweaver:

Image map hotspot demo

In code you would then end up with:

<img src="header.png" alt="Image map demo" width="1595" height="172" border="0" usemap="#Map" />

<!-- #Map refers to the ID of the map definition -->

<map name="Map" id="Map">
  <area shape="poly" coords="579,56,564,128,646,128,663,57" href="team.html" alt="Team" />
  <area shape="poly" ..other shape for next button and so on .../>
</map>
share|improve this answer

Adding to Abdias answer, you don't necessarily have to cut each button either. For the main red bar, for example (and this applies to the other elements) you could have three images/sprites: Left, medium and right. Left and right would be the diagonals, medium would be a repeated background 1px width with the gradient in it. I'd probably use three divs per "button", one with each background.

You can do the same for the others, and use position:absolute and z-index to put one on top of the other. Or, if you don't want to support ie8- you could do everything with css3.

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.