Jump to content

How Can I Make This Type Of Layout?

Recommended Posts

well looking in this part of the forum incase i saw something that i had in mind and this is very simular to what i wanted just got no idea how to make that center block with drop down shadow, my question is, is that done in css? if so what makes that "block"shades web pagePS:i dont want to have those animated buttons just the "block", shade hope u dont mind me using ur page as an example of what i want to know how to make :)thanx in advanceEDIT: here is a foto of what i actually want, well something like that: crokis.gifI want a circular menu on top and some links on the left, and the body part of the page inside the rest of the page.

Link to post
Share on other sites

Drop shadows are not consistently available in all browsers yet. Firefox will have shadow support when it releases version 3.5. Until then, you are best off just creating the shadow as part of an image, or several images.I'm looking at your drawing. The entire curved section, including the shadow, will have to be one image (or a single image could be the background of a <div> that size). Most of the square section can be one large <div> with a 1-pixel-high repeating background image that includes the shadow on the right. The bottom part (just the shadow) will have to be a unique image (or a div with one image as its background).If you really want the circular menu section to overlap the two areas I described, then the background image for the top section may have to include some of the square part.As an alternative, the circular menu could be a <div> by itself, with position: absolute and z-index: 2 and some top and left coordinates to place it in the correct location.

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Create New...