Jump to content

Archived

This topic is now archived and is closed to further replies.

dptr1988

Trouble converting froms table layout to CSS layout

Recommended Posts

Before I knew that laying out you website with tables was bad, I made a website that was layed out like [url=http://dptr1988.mooo.com/test/layout.png]this[/url] with tables. But now I'm trying to use CSS for the layout and don't know how to make the layout without using absolute positioning. Could I make the whole layout with relative position only?. Am I wrong in wanting to avoid absolute positioning? Do you have any suggestions on how to layout my website like [url=http://dptr1988.mooo.com/test/layout.png]this[/url] using CSS?

[url=http://dptr1988.mooo.com/test/]Current HTML[/url]
[url=http://dptr1988.mooo.com/test/style.css]Current CSS[/url]

Thanks

Share this post


Link to post
Share on other sites
Two links for you:
http://www.bluerobot.com/web/layouts/
http://www.alistapart.com/articles/holygrail/

Share this post


Link to post
Share on other sites
Thank you!

I had googled for CSS layouts and even read some articals www.alistapart.com but had missed the one that you gave me.

Share this post


Link to post
Share on other sites
It is a long road to mastering css. You have a simple 3-column layout (which is simple in table layouts)


---------------------------------------------
|                        |                                  |
------------------|                                  |
|                        |                                  |
---------------------------------------------
|              |                              |              |
|              |                              |              |
|              |                              |              |
|              |                              |              |
|              |                              |              |
----------------------------------------------
----------------------------------------------


You want to use relative positioning as much as possible.

[code]
<style>
div{border:solid 1px #333;}*/Delete this, only used for seeing the layers/*

#pageBanner{position:relative;height:120px;}
#leftCol{width:20%;float:left;}
#main{width:60%;float:left;}
#rightCol{width:20%;float:right;}
#pageFooter{height:26px;}

.clear{clear:both;height:0px;font-size:0px;}
#leftCol, #main, #rightCol{margin:0;padding:0;}
</style>
[/code]

[code]
<div id="pageBanner">
<div style="position:relative;float:left;width:60%">
<div></div>
<div></div>
</div>
<div style="position:relative;float:right;width:39%">

</div>
<div class="clear"></div>
</div><!--end pageHeader-->

<div id="leftCol"></div>
<div id="main"></div>
<div id="rightCol"></div>

<div class="clear"></div>
<div id="footer"></div>
[/code]

Use these layers to lay out the page.
Nest everything inside these layers with div,p,blockquote tags, etc.
Don't put anything in the clearing divs.
Don't put anything outside the divs (straight into the body).
Check out [url=http://www.freewebs.com/good-code]custom CSS borders using auto-nested divs and repeating background images[/url]
Persist with CSS, tables are an ugly way to code!

Share this post


Link to post
Share on other sites
Or you can use absolute positioning for the side cols:

replace the css for the left,right and main cols in the above example, with this:

[code]
#leftCol,#rightCol{position:absolute;top:120px;width:180px;}
#rightCol{right:0;}
#leftCol{left:0;}
#main{margin:0 180px;}
[/code]

Share this post


Link to post
Share on other sites
Avoid absolute positioning. Avoid relative positioning. Neither is needed in anything but extraordinarily complex layouts.  Take a look at Moberemk's links (or google CSS layouts and you'll find zillions).

http://www.inknoise.com/experimental/layoutomatic.php - that'll even write it for you.

Share this post


Link to post
Share on other sites

×

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.