Layout

[chuxs]

hi pls i will like to convert the following html code to CSS [W3C] standard and if possible know the list of browser that support my layout


<Table width ="600" valign="top" >
<DIV align="center">Top content(not a Table but a banner
ad--this comes up almost immediately and gives the reader something to look at
while the rest of the page loads)
</DIV>
</Table>
<Table valign="top" border=0>
<TR align="middle">Surroundings Table constraining the entire page to fit with 600 pixels, or comfortably within a 640*480 display No rows or cells</TR>
<TR>
<TD align ="middle" width="20%">Navigational
content,links e-mail,etc.
TD Width 20%
</TD>
<TD align ="middle" width="5%">Very narrow cell, added to provide spacing, No content, TD Witdth 5%</TD>
<TD width="70%" align="top" vAlign=top>
Main content of page.
</TD>
</TR>
</Table>
<DIV>
</DIV>
</Table>

[Robert Wellock]

Are you after something like: http://www.xhtmlcoder.com/worthvalley/ or do you require absolute positioning.

I very much doubt that I would want to see a banner advert while a page was loading and are you serious about 640x480 pixels Basically you are after a page with a heading banner and two columns.

[clairec666]

Do you have any knowledge of CSS yet? Intead of using tables, you would have to put each cell in a <div> tag and position it where you want on the page.

I can explain more if you don't know anything about it yet!!

[chuxs]

Hi robert, that's what am looking for but with a little adjustment, if it's possible please
1.I will like to attach an image to the Top Left side of the page, my image specification

Height:126px
Width:100px

2.I will also like to attach an image to the Left bottom of the page, my image specification

Height:80
Width:auto

I also aggree with u in respect of my screen resolution of (640*480) so i will also like to adjust it to 800*600 if it's possible

[toicontien]

Start out learning CSS at http://www.w3schools.com/ and then head to www.alistapart.com to really dig into CSS. Some great A List Apart articles are below:

Better Living Through XHTML
http://www.alistapart.com/articles/betterliving/

Why Don’t You Code for Netscape?
http://www.alistapart.com/articles/netscape/

Fix Your Site With the Right DOCTYPE!
http://www.alistapart.com/articles/doctype/

From Table Hacks to CSS Layout: A Web Designer’s Journey
http://www.alistapart.com/articles/journey/

Practical CSS Layout Tips, Tricks, & Techniques
http://www.alistapart.com/articles/practicalcss/

The Trouble With EM ’n EN (and Other Shady Characters)
http://www.alistapart.com/articles/emen/

CSS Design: Going to Print
http://www.alistapart.com/articles/goingtoprint/

CSS Design: Taming Lists
http://www.alistapart.com/articles/taminglists/

Flexible Layouts with CSS Positioning
http://www.alistapart.com/articles/flexiblelayouts/

Sliding Doors of CSS
http://www.alistapart.com/articles/slidingdoors/

Sliding Doors of CSS, Part II
http://www.alistapart.com/articles/slidingdoors2/

Suckerfish Dropdowns
http://www.alistapart.com/articles/dropdowns/

[ray326]

I'll second Greg's advice but in the mean time here's an example mapped to what you describe in your table and text. Of course each of the divs should be given ids and the inline styles should be pulled up into a style sheet but that's left as an excercise for the student. :)

<div style="width:600px; height:400px; background-color:#ffe;">
<!-- Surroundings Table constraining the entire page to fit with 600 pixels,
or comfortably within a 640*480 display No rows or cells -->
<DIV style="text-align:center; width:590px; padding:5px; background-color:#edd;" >
Top content(not a Table but a banner
ad--this comes up almost immediately and gives the reader something to look at
while the rest of the page loads)
</DIV>
<div style="width:110px; height:100%; float:left; padding:5px; background-color:#eef;">
Navigational
content,links e-mail,etc.
TD Width 20%
</div>
<div style="width:460px; height:100%; float:right; padding:5px; background-color:#eee;">
Main content of page.
</div>
</div>

[chuxs]

Thanx alot