Jump to content


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


bye bye tables?

Recommended Posts

I've heard that you can use CSS instead of tables, so I try exporting CSS from imageready. Now I get all these little independent DIVs that are all position:absolute; and the page is stuck in the upper left-hand corner.

I like to think I'm pretty good at this stuff -- but getting rid of table is overwhelming me. So, how do I convert all these independent DIVs to center properly in the document??

This is more or less a "theory" question -- but I provide the following example just in case.
<style type="text/css">
html, body {
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<!-- ImageReady Slices (index.psd) -->
<div style="width:700px; height:561px; margin:auto;">
<div style="position:absolute; left:0px; top:0px; width:13px; height:15px;">
<img src="images/index_01.jpg" width="13" height="15" alt="">
<div style="position:absolute; left:13px; top:0px; width:675px; height:15px;">
<img src="images/index_02.jpg" width="675" height="15" alt="">
<div style="position:absolute; left:688px; top:0px; width:12px; height:15px;">
<img src="images/index_03.jpg" width="12" height="15" alt="">
<div style="position:absolute; left:0px; top:15px; width:700px; height:427px;">
<img src="images/index_04.jpg" width="700" height="427" alt="">
<div style="position:absolute; left:0px; top:442px; width:700px; height:102px;">
<img src="images/index_05.jpg" width="700" height="102" alt="">
<div style="position:absolute; left:0px; top:544px; width:13px; height:17px;">
<img src="images/index_06.jpg" width="13" height="17" alt="">
<div style="position:absolute; left:13px; top:544px; width:675px; height:17px;">
<img src="images/index_07.jpg" width="675" height="17" alt="">
<div style="position:absolute; left:688px; top:544px; width:12px; height:17px;">
<img src="images/index_08.jpg" width="12" height="17" alt="">
<!-- End ImageReady Slices -->

Share this post

Link to post
Share on other sites
Whilst I am not a CSS guru (yet) by any stretch of the immagination .... I do have a fair grasp of the "theory" behind it. And i think this may be what your looking for.

I apoligise in advance for any errors, and would be gratefuull for any neccersarry corrections  :)

Firs of all i would advise against any program that "automatically" converts your table based layout to CSS..... Cascading styles sheets are very much a personal thing, and, in order to format them correctly you need to name the div tags.

Think of the <div> tag as a container, in exactly the same way as you tables were.

A better way of explaining this may be via a practical example .... may i point tyou towards my own site :: [url=http://cbmgroup.co.uk]http://cbmgroup.co.uk[/url] This website is my current project, and whilst not quite finished yet, it is a 100% CSS based layout ..... Take a look at my html and you will see that the different segments are contained within div tags that take the form:

<div id="divCenter"> ......content.......</div>

And every div tag is in itself contained by a #divwrapper tag, that starts just after my <body>.

now, this layout on its own will result in an extreemly messy, rather funny looking webpage, that is almost certainly exactly what you dont want.

You need to style these tage... tell them how to behave.... this is done by using an external css file.... you can use embedded css aswell... but it kind of defeats the purpose, lets assume youve created your css file and are wondering how you make you web page "know" that it should look to this file for its layout instructions.

Inserting the following bit of code above your body tag will acheive this:

<link href="../pathtofile/yourfilename.css" rel="stylesheet" type="text/css" />

I hope this helped a little............ may i suggest you visit w3schools for any further instruction on actually writing the css itself ... its quite simple, and if you dont allready understand it, i should imagine an afternoon will get enough understanding for you to start formatting your site.

Share this post

Link to post
Share on other sites
[quote author=Accurax link=topic=109155.msg451288#msg451288 date=1160733203]
Firs of all i would advise against any program that "automatically" converts your table based layout to CSS

Excellent advice!

And avoid using position:absolute (or position anything) in your coding. Learn about 'float' instead.

Share this post

Link to post
Share on other sites
For help with CSS syntax and commands visit [url=http://meyerweb.com/eric/css/references/css2ref.html]http://meyerweb.com/eric/css/references/css2ref.html[/url] . I just came accross it about 15 minuites ago... its CSS2 and seems very comprehensive.

Just sharing the love

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.