Jump to content

bye bye tables?


michaellunsford

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.
[code]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>index</title>
<style type="text/css">
html, body {
height:101%;
width:100%;
background-color:#dcc998;
margin-top:0px;
margin-bottom:0px;
margin-left:0px;
margin-right:0px;
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body>
<!-- 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>
<div style="position:absolute; left:13px; top:0px; width:675px; height:15px;">
<img src="images/index_02.jpg" width="675" height="15" alt="">
</div>
<div style="position:absolute; left:688px; top:0px; width:12px; height:15px;">
<img src="images/index_03.jpg" width="12" height="15" alt="">
</div>
<div style="position:absolute; left:0px; top:15px; width:700px; height:427px;">
<img src="images/index_04.jpg" width="700" height="427" alt="">
</div>
<div style="position:absolute; left:0px; top:442px; width:700px; height:102px;">
<img src="images/index_05.jpg" width="700" height="102" alt="">
</div>
<div style="position:absolute; left:0px; top:544px; width:13px; height:17px;">
<img src="images/index_06.jpg" width="13" height="17" alt="">
</div>
<div style="position:absolute; left:13px; top:544px; width:675px; height:17px;">
<img src="images/index_07.jpg" width="675" height="17" alt="">
</div>
<div style="position:absolute; left:688px; top:544px; width:12px; height:17px;">
<img src="images/index_08.jpg" width="12" height="17" alt="">
</div>
</div>
<!-- End ImageReady Slices -->
</body>
</html>[/code]
Link to comment
Share on other sites

  • 3 weeks later...
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:

[code]
<div id="divCenter"> ......content.......</div>
[/code]

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:

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

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.

Link to comment
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
[/quote]

Excellent advice!

And avoid using position:absolute (or position anything) in your coding. Learn about 'float' instead.
Link to comment
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

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.