Jump to content


Photo

Trouble converting froms table layout to CSS layout


  • Please log in to reply
5 replies to this topic

#1 dptr1988

dptr1988
  • Members
  • PipPipPip
  • Advanced Member
  • 372 posts

Posted 18 July 2006 - 04:46 PM

Before I knew that laying out you website with tables was bad, I made a website that was layed out like this 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 this using CSS?

Current HTML
Current CSS

Thanks
Need more help with your project? One of the thousands of programmers, web designers or artists at <a href="http://www.rentacode...d_6764522">Rent A Coder</a> would be happy to help.

Disclaimer: Free advice is usually worth what you paid for it. ( or at least when it's coming from me! )

#2 moberemk

moberemk
  • Members
  • PipPipPip
  • Advanced Member
  • 695 posts

Posted 18 July 2006 - 06:11 PM

Two links for you:
http://www.bluerobot.com/web/layouts/
http://www.alistapar...cles/holygrail/
Disclaimer: No matter how harsh I may be, I'm always IMO only.

#3 dptr1988

dptr1988
  • Members
  • PipPipPip
  • Advanced Member
  • 372 posts

Posted 18 July 2006 - 06:19 PM

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.


Need more help with your project? One of the thousands of programmers, web designers or artists at <a href="http://www.rentacode...d_6764522">Rent A Coder</a> would be happy to help.

Disclaimer: Free advice is usually worth what you paid for it. ( or at least when it's coming from me! )

#4 killerb

killerb
  • Members
  • PipPipPip
  • Advanced Member
  • 48 posts

Posted 27 July 2006 - 01:00 PM

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.

<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>

<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>

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 custom CSS borders using auto-nested divs and repeating background images
Persist with CSS, tables are an ugly way to code!
Experience is something you get just after you need it.

#5 killerb

killerb
  • Members
  • PipPipPip
  • Advanced Member
  • 48 posts

Posted 02 August 2006 - 02:02 AM

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:

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

Experience is something you get just after you need it.

#6 AndyB

AndyB
  • Staff Alumni
  • Advanced Member
  • 5,465 posts
  • LocationToronto

Posted 02 August 2006 - 02:07 AM

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....ayoutomatic.php - that'll even write it for you.
Legend has it that reading the manual never killed anyone.
My site




0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users