Jump to content

Trouble converting froms table layout to CSS layout


dptr1988

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
Link to comment
Share on other sites

  • 2 weeks later...
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!
Link to comment
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]
Link to comment
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.
Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

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.