You are invited to Log in or Register a free Frihost Account!

Creating a layout complete with css

what is the best way to create a page layout with only css. css layouts seem to be a lot more efficient than using tables. but it also looks pretty hard to do. I was looking at sites like and and they are all done this way. can anyone point me in the right direction for how to learn css layouts and what tools to use. when I first started with css I read up on but that is only basics.
This might help
You can check out this tutorial .
Chris Tiaens
If you search google you'll find plenty of good tutorials, and once you've fought yourself through a couple of them you'll realise css is really not that difficult.
using css is not as hard as it may look - start out small and learn the different css commands then move it in for your entire site
CSS is really easy in theory, in practice IE always finds a way to make it more difficult. I learnt most about css at

The problems that IE presents are numerous, the most immediately obvious one is to do with it including padding within the set width. This means you have to conditionally comment in IE specific style sheets. Urgh... Anyway search on it.
Ok I sugest you use tables and DIVs.
With table use this <tr class="name">
then when you do the CSS writi that like this
.name (
and your style elements
and with divs
<div id="name">
for the CSS use
#name (
and your style elements
I hope that helps.
css? sure... come here ( for examples, refrenecs and other code objects...
The thing with CSS kinda is from what kinda seems out of several handy tutorials and such is that you should find your own style of doing things. You can go for absolute positions if that's what you would like to work with. Is extremely nice if you want to have the entire page on one screen. You could even make parts of the contents scrollable if you would like.

You could also just go for a basic header-content-footer model, 3 divs on top of eachother, all getting their own content yet again.

Sidebars are nice as well, I've seen several ways of doing this in example, but the easiest I've seen is to create a container div, create a sidebar, float it to the left, create a content div, give it margin-left the same as you gave the sidebar width. Or you could do 10 extra as well or so if you don't want to use padding to fix that.

I'm still learning further on CSS as well, but I've seen some nice tricks out there already. Also the upcoming CSS3 equal columns property sounds pretty damn nice, just sucks that IE doesn't support that yet.
Yes, css is really easy to pick up, I actually figured it out stealing and customizing a div overlay profile for my myspace.
The best way to learn is to take the code of a simple site like and then just try to figure what everything does. If you get stuck try to search google for tutorial. THen play around with the code and see what does what. Then if u are really stuck just use that code in an html editor like dreamweaver or frontpage and then change the interface and look at the code. See what changes.
Tack! Smile
Related topics
Convert small table layout to CSS
Book on CSS
Vista IE CSS & Other Support
CSS and layout help
MACROMEDIA Dreamweaver
CSS Problems + Cache control
CSS And Tables: The Hype And The Trends
css right align
Variable width div
Photoshop CS3 convert to css/html
planning a site in CSS
IE and FireFox: CSS
How to make a free space below the IMG in html?
Reply to topic    Frihost Forum Index -> Webmaster and Internet -> Design Tips

© 2005-2011 Frihost, forums powered by phpBB.