|
| |
|
|
emily morgans
Posts: 7
Joined: 8/2/2007
Status: offline
 |
Tables or DIVS ? - 3/4/2008 12:39:56
Hi,
I have just moved from Frontpage to Expression and i am having great difficulty in knowing how to re-create the same layout in Expression as i have with Frontpage. I currently use tables to create the correct layout but i am fast learning that this is a 'no no'. I want to use DIVS (i think?) which i believe are a better option but i cant work out how to use them to create the layout i want.
I have a lot of properties that i need listed on the webpage and i also need the flexibility to add and remove properties. (see the links below to understand what i mean !). I would really appreciate any help. I want to try to get away from tables if poss...?
http://www.barringtonhomes.eu/Duquesa-Property-for-sale.htm
While i am at it why is all my text in Bold on the above link page !?!?!
http://www.barringtonhomes.eu/Duquesa-Property/Borboleta-S00.htm
|
|
|
|
Tailslide
Posts: 6267
Joined: 5/10/2005
From: Out here on the raggedy edge
Status: offline
|
RE: Tables or DIVS ? - 3/4/2008 13:04:18
Two columns are easier than 3 if you have the choice - what you do in very general terms is this
<div id="container">
<div id="header">
Banner image etc go here
</div> <!-- end header -->
<div id="sidebar">
Sidebar stuff goes here
</div> <!-- end sidebar -->
<div id="contents">
All your contents go in here
</div> <!-- end contents -->
<div id="footer">
Footer stuff here
</div> <!-- end footer -->
</div> <!-- end container -->
Make sure you use a valid DOCTYPE to put all browsers into standards mode.
Zero all the margins and padding at the top of the stylesheet to give yourself an even cross-browser playing field (*{margin:0; padding:0; })
Give the container a width if required in the stylesheet then centre it if required by adding #container {margin:0 auto;}
Float the sidebar left and the contents div right - give them a width as well (either px or %)
Give the footer a rule of clear:both to shove it past the previous divs.
For your property details boxes I'd have an outer div with two inner divs. The outer div holds the inner divs together. The inner divs are floated left and right (with a width). The left hand one has the photo and the caption. The right hand one would have the text.
I was going to say use a table for the summary of info at the bottom (room sizes etc) but actually it's not tabular data at all so personally I'd use a list but if you're going to use a table be sure to associate the various bits of it properly so that it's clear which cell info goes with what.
Think of using CSS divs as a bit like juggling balloons - you need something to contain them and then they're much easier to push into place. Avoid using absolute positioning to position bits of the page - floats look harder, but they're not.
If you get a bit lost you might want to look at how a CSS template is laid out - like some of the ones here: http://www.freecsstemplates.org/
_____________________________
"My strategy is so simple an idiot could have devised it"
Little Blue Plane Web Design | Blood, Sweat & Rust - A Land Rover restoration project
| |
|
|
|
emily morgans
Posts: 7
Joined: 8/2/2007
Status: offline
|
RE: Tables or DIVS ? - 3/8/2008 7:19:38
Hi there,
Thanks for that. It sounds quite clear. I will give it a go. You have helped me before on a problem and i really appreciate your help again.
I may call on you again if i get stuck !
| |
|
|
|
Tailslide
Posts: 6267
Joined: 5/10/2005
From: Out here on the raggedy edge
Status: offline
|
RE: Tables or DIVS ? - 3/8/2008 7:42:56
Feel free to yell for help - we all had to learn how to do this stuff, it's just the order of who learns what when that changes!
_____________________________
"My strategy is so simple an idiot could have devised it"
Little Blue Plane Web Design | Blood, Sweat & Rust - A Land Rover restoration project
| |
|
 New Messages |
 No New Messages |
 Hot Topic w/ New Messages |
 Hot Topic w/o New Messages |
 Locked w/ New Messages |
 Locked w/o New Messages |
|
Post New Thread
Reply to Message
Post New Poll
Submit Vote
Delete My Own Post
Delete My Own Thread
Rate Posts
|
|
|
Printable Version 
