Hi I am looking for someone to help me code this layout as I will use it on my site, and would like to see how the code would look as well specially to make it repeating so it works on all screens http://img239.imageshack.us/img239/8894/portfoliocopyvk7.jpg thank you
If you intend to use it as a background in your page, you need to slice it horizontally where it repeats. then use that sliced image to repeat itself horizontally to make up the background. then for the div, make something like: div#background { background-image: url("slicedbg.gif") repeat-y; }
you should place it in your css. assuming you are using the same div through inline css, or linked stylesheet.
I would strongly recommend against slice-n-dice code. Better to chop that image into a few, and set the colours in CSS using background-color property. The thingie in the middle needs to be made of something. It needs content. It's extremely difficult to code a page with ZERO content, but here's what I would do if I was you: The grey middle looks to be about 800 pixels wide. Now, if that was done for 800X 600 screens, I'd make it smaller (what deathshadow calls "800-friendly") cause people's got scrollbars and the such at the sides of their browsers. Something like 760px might be nice. So I'd measure what colour that grey was, and make a div called, I dunno, mainbox, and make the width 760px and background-color that shade of grey. html (after doctype, head, etc) <body> <div id="mainbox"> .. </div> </body> The body will hold the zebra stripes. What is most popular these days is a small image of maybe 5 pixels high, a gif, with transparent middle, so you've got an image with the shadow like this: http://stommepoes.nl/Tests/shadowthings.gif (I could also do shadows with the zebras but the problem there is, my screen is ginormous and I will see far more than that little strip you have). The body has the zebra thing (which I prolly didn't cut right because I'm old and can barely see the colour differnece between the two) http://stommepoes.nl/Tests/zebrathingie.gif and is repeated like a tile. You'd have to cut it just right to make it tile correctly. so, body { background-image: url(zebrathingie.gif); } /*by not stating anything, it is automatically tiled starting from top left*/ #mainbox { background: #272727 url(shadowthings.gif) 0 0 repeat-y; width: 760px; margin: 0 auto; } Code (markup): Then the thing in the middle... will probably be replaced with real content someday, so you could just make it a little image and set it to display:block and center it in the middle of the page using any variety of css positioning (since it's not going to sit there long, who cares?). http://stommepoes.nl/Tests/greybox.html I can't get that zebra thing right, there's a trick to it but I never work with diagonal stripes... but surely a real graphical person can do it no problem. A 100% height model could be used to, depending on what the meaning is (what it will need to do when there's content).
hey thank you sooooo muchhh, very detailed post is what I love! I will definetly try this, and thanks for including the code, its really helpful as I am new to css