css replacing tables

[Wilhelm Kutting]

Hi again
i want to replace the following layouttabel with css/xhtml:
----------------------------------
<table width="640" cellspacing="0">
<tr>
<td valign="top">My Title</td>
<td valign="top">my text </td>
</tr>
<tr>
<td><img src="spacer.gif" width="140" height="1" /></td>
<td><img src="spacer.gif" width="500" height="1" /></td>
</tr>
</table>
---------------------------------

Is there a good way to accomplish this with compatible css?

[Els]

Wilhelm Kutting wrote:

Hi again
i want to replace the following layouttabel with css/xhtml:
----------------------------------
<table width="640" cellspacing="0">
<tr>
<td valign="top">My Title</td>
<td valign="top">my text </td>
</tr>
<tr>
<td><img src="spacer.gif" width="140" height="1" /></td>
<td><img src="spacer.gif" width="500" height="1" /></td>
</tr>
</table>
---------------------------------

Is there a good way to accomplish this with compatible css?

Of course there is:
<div id="container">
<div id="title">My Title</div>
<div id="content">my text</div>
</div>

styles:
#container{width:640px;}
#title{width:140px;}
#content{width:500px;}

Now stop trying to do table layouts with CSS, and start using
CSS layouts. It will be very different from tables, not
everything can be reproduced in exactly the same way, but
that's not necessary.
Just set it up in CSS, forget about the tables.

Oh, and try to forget you ever heard about spacer gifs.

--
Els
http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -

[Wilhelm Kutting]

Els wrote:

Wilhelm Kutting wrote:

Hi again
i want to replace the following layouttabel with css/xhtml:
----------------------------------
<table width="640" cellspacing="0">
<tr>
<td valign="top">My Title</td>
<td valign="top">my text </td>
</tr>
<tr>
<td><img src="spacer.gif" width="140" height="1" /></td>
<td><img src="spacer.gif" width="500" height="1" /></td>
</tr>
</table>
---------------------------------

Is there a good way to accomplish this with compatible css?

Of course there is:
<div id="container">
<div id="title">My Title</div>
<div id="content">my text</div>
</div>

styles:
#container{width:640px;}
#title{width:140px;}
#content{width:500px;}

Now stop trying to do table layouts with CSS, and start using
CSS layouts. It will be very different from tables, not
everything can be reproduced in exactly the same way, but
that's not necessary.
Just set it up in CSS, forget about the tables.

Oh, and try to forget you ever heard about spacer gifs.

Ok,
just starting....
Watched a lot of good links to css-layout on Your Homepage.
Is there a way to do css-layouts with dreamweaver?
I only know the dreamweaver way with div.

[Els]

Wilhelm Kutting wrote:

Ok,
just starting....
Watched a lot of good links to css-layout on Your Homepage.
Is there a way to do css-layouts with dreamweaver?
I only know the dreamweaver way with div.

Eh... divs are really good for flexible design and use of CSS.
I know nothing about Dreamweaver though.

You're not saying you don't know how to write HTML by hand, are
you?
--
Els
http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -

[Wilhelm Kutting]

Els wrote:

Wilhelm Kutting wrote:

Ok,
just starting....
Watched a lot of good links to css-layout on Your Homepage.
Is there a way to do css-layouts with dreamweaver?
I only know the dreamweaver way with div.

Eh... divs are really good for flexible design and use of CSS.
I know nothing about Dreamweaver though.

You're not saying you don't know how to write HTML by hand, are
you?

I know how to write html by hand but you can make a big threat oout of
the discussion, if you prefer wysiwyg-editor or handcoded stuff.
Me, for myself, will stay to dreamweaver because i like it much to
layout a page visually.
The bad thing about Dreamweaver is, that they hide the css-layout thing
a little bit in the new mx-version.

[Els]

Wilhelm Kutting wrote:

You're not saying you don't know how to write HTML by
hand, are you?
I know how to write html by hand

Good :-)
but you can make a big
threat oout of the discussion, if you prefer wysiwyg-editor
or handcoded stuff. Me, for myself, will stay to
dreamweaver because i like it much to layout a page
visually. The bad thing about Dreamweaver is, that they
hide the css-layout thing a little bit in the new
mx-version.

Can't comment on that, as I've never even seen a Dreamweaver
screenshot... :-)

--
Els
http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -

[Lachlan Hunt]

Wilhelm Kutting wrote:

Els wrote:

You're not saying you don't know how to write HTML by hand, are you?

I know how to write html by hand but you can make a big threat oout of
the discussion, if you prefer wysiwyg-editor or handcoded stuff.

You may know HTML (or tag soup seeing that table layout you originally
sent), but the problem is not completely that you are using a WYSIWYG
editor, the problem is that you have asked a question about how do I use
CSS to make a layout equivalent this table layout I have. You have also
done so in an HTML newsgroup. Instead, you should be asking questions
more like:

"I have this content, and it is broken into 3 sections. A header,
main content and navigation. How do I present these the main
content and navigation as columns, with the header above?"

That's probably not exactly what you have, but it's a generic example of
the kind of questions that should be asked about CSS layout. CSS
depends on well structed content for it to be successfully, and easily
applied. It does not dependon knowing how you want the page to look
before you write the content. However, because this is an HTML group, I
will focus more on your mark up problems and show you how to correctly
strucutre a document ready for CSS layout.
Me, for myself, will stay to dreamweaver because i like it much to
layout a page visually.
Dreamweaver is good, I use it myself, but do not write the markup of a
page and do the layout at the same time. This means, avoid WYSIWYG
editors, especially while your still learning.

Write your document by thinking about it's content. It's ok to decide
from the beginning that you want a two colum layout with left sidebar
for navigation, blog roll, etc. and right column for main content with a
header at the top of the page. If you think about it, that is actually
also helping to decide on the structure. But then, after you've thought
about the basic layout, it's more important that you think about the
content, and then the structure of each. For each of those sections,
start with a div, giving each an appropriate id.

<div id="header"></div>
<div id="body">
<div id="content"></div>
<div id="navigation"></div>
</div>

(I left footer off, because the can be difficult, but not impossible
with CSS column layouts, given CSS support in IE)

Forget about how these will become columns for now, that will come with
the CSS later.

After that, you need to decide what content you actually want in each
section. Markup your headings (in order, from <h1> to <h6> depending on
their level) and fill in some sample content just to get you started.

<div id="header">
<h1>Site Name</h1>
</div>
<div id="body">
<div id="content">
<h2>Page Title</h2>
<p>content...</p>

<h3>Subsection</h3>
<p>more content...</p>

<h3>Another Subsection</h3>
<p>more content...</p>
</div>
<div id="navigation">
<ul id="sitenav">
<li>...</li>
</ul>
<ul id="blogroll">
<li>...</li>
</ul>
</div>
</div>

Fill in your content with paragraphs, tables, lists, etc. Don't even
think about applying style until you have it making complete sense, and
structurally correct in all it's unstyled glory. Visit a few sites that
use CSS layouts and disable stylesheets to see how they're structured.

With that markup, you'll be all set to start looking into colum based
layouts. Position is Everything [1] and Glish.com [2] have some good
css resources for making columns and various other things with CSS.
The bad thing about Dreamweaver is, that they hide the css-layout thing
a little bit in the new mx-version.

The bad thing about Dreamweaver and other WYSIWYG editors is that the
easiest way to achieve a flexible layout is using tables. Dreamweaver
is getting better, but even Dreamweaver 2004 can produce nasty markup if
you only use the WYSIWYG editor, especially if you don't really
understand structured markup. It is important to constantly monitor and
clean the markup it produces, so more often than not you'll save time
and effort by simply writing the markup by hand. From my experience, it
takes someone with good handcoding skills to handle a WYSIWYG
environment correctly, but then people that experienced generally prefer
handcoding anyway, for most things.

[1] http://positioniseverything.net/
[2] http://glish.com/css/

--
Lachlan Hunt
http://www.lachy.id.au/

Please direct all spam to ab***@127.0.0.1
Thank you.

[Brian]

Wilhelm Kutting wrote:

i want to replace the following layouttabel with css/xhtml:
Stop wanting that. Instead, (re)write the markup alone, just xhtml
strict. (Actually, I'd recommend html 4.01 strict, unless you have a
need for xhtml and you understand the problems associated with it.)

Use the correct markup for the job. When you're done, take a look at the
default rendering in a browser, and change what you don't like with css.
<table width="640" cellspacing="0">
<tr>
<td valign="top">My Title</td> [snip] Is there a good way to accomplish this with compatible css?

If you try to recreate table layouts with css, you'll just get frustrated.

--
Brian (remove ".invalid" to email me)
http://www.tsmchughs.com/