Hi there,

 

I have to things that I cant work out how to make in CSS.

First thing is under a menu how to I make each menu have a wavy line under (see wave.png image)?

The other is creating two white boxes behind one another (see box.png image)?

 

 

 

For the wavy line you will need to create a .png or .gif image with the wavy line and a transparent background. You can then add this line to an element using the css background-image property.

 

For overlapping elements like the two white boxes you would need to use absolute positioning and z-index. For instance

 

<div style="position: absolute; z-index: 1; top: 0; left: 0; width: 100px; height: 100px; border: 1px solid white;">Some content for box 1</div>
<div style="position: absolute; z-index: 2; top: 20px; left: 20px; width: 100px; height: 100px; border: 1px solid white;">Some content for box 2</div>

 

 

Good luck!

the boxes are not that hard http://jsfiddle.net/FxH9n/

 

as for the wavy line i can only think of using an image or svg

Canvas, I would experiment with the canvas element and make each link item a canvas with the wavy line, then if you wanted to add a hover or transition too it you wouldn't need any extra images and any alterations would be simple tweaks in the app itself, possibly even from the backend control panel.

 

The two boxes could be done with a combination of z-index and positioning in css, if the main element had the pseudo ::after, (or ::before), then that would save adding any HTML elements and thus help to keep your code re-usable.

Thank you . I have just about done the box.

Now need to sort out the menu