Hello! I need some help on creating a layout. I bought a website package awhile back but it is tables,no CSS. I want to make it pure CSS,no tables. Only the home page will have the 4 boxes. I have no ideal on how to create boxes inside of a layout. Here is a screenshot of the layout I am trying to create: http://ca.geocities.com/marjfour/site.jpg Here is what I have so far: http://ca.geocities.com/marjfour/index.html If you view source,you can see both the CSS and HTML. Any help appreciated,thanks in advance
You should search Google for, tableless site css. You should be able to find some sites with examples and sample code you can look at. It should get you pointed in the right direction. http://www.google.com/search?hl=en&q=tableless+site+css&btnG=Google+Search
In place of the 4 boxes why not just make the content of the page 2 columns and place a <hr> line across the middle of each column, giving the look of 4 boxes.
You could do that, but then if one of the columns is taller than the other it won't have a line going across both giving it the even look it has in the template shown. If that doesn't matter then that would be a solution if you don't want to do 4 divisions. ------- Even boxes | | | ------- | | | ------- ------- Uneven boxes | | | ---- | | ---- | | | | | | ------- Code (markup):
Correct!! This all boils down to the lenght of the information you have to place in those boxes. I'm sure that if you use a simple 2x2 table or <div> for that matter you will have excess white space above any line accross the page to seperate the top and bottom boxes. I can see what they are after with this, but either way its an uneven box or to much white space.
I've made an example for you to look at: Using 2 columns & 4 <div> boxes http://www.dkinweb.com/test1a.htm Using 2 columns and <hr> http://www.dkinweb.com/test1.htm As has been mention unless the lenght of text in the boxes are the same you will end up with either too much white space as in the top example or uneven column lenghts in the second example. I would choose the top one as you can play around with the white space and text to get them to look very similar. I hope this helps
Thank you for all the help. I do know how to create tableless CSS designs and simple designs. I see all these newer designs and love them but haven't got a clue on how to design them.