converting table layout to CSS

[shank]

I've just gotten serious about switching to CSS this week. I've been using
CSS for text. Pretty simple. But when converting my table layout to CSS it's
a bit daunting. My home page has 19 tables. I have 28 small graphics. This
is what the client wants. Converting this to CSS is confusing...

1) When validating, the validator red flags all the width="??" and
border="0" attributes on graphics. Are they just supposed to be deleted? I
thought those specs were designed to speed up the page viewing.

2) In one area I have 10 small graphics spaced neatly in a 10 cell table and
centered on the page. How do I accomplish something like that in CSS? I can
see where positioning on the top-left of an element is done, but to do that
for 10 graphics plus make sure they were centered on the page as group would
take forever. What am I missing?

3) Using the example of those 10 small graphics, I have 1 or 2 word snippets
below them. I do I align those snippets centered with respect to each
graphic?

4) The home page header is an include file. How do I center an include on
the main body?

5) The body of the home page is layed out in 3 columns. How do I dupe that
same layout?

This group has been great!
Thanks!

 

[picayunish]

shank wrote in news:[email protected]:

1) When validating, the validator red flags all the width="??" and
border="0" attributes on graphics. Are they just supposed to be deleted?
I thought those specs were designed to speed up the page viewing.

Use in the style sheet e.g.:
img {width: 18px; height: 18px; border: 0px;}

 

[e n | c k m a]

Use in the style sheet e.g.:

img {width: 18px; height: 18px; border: 0px;}

when images have different heights/widths, this might be of use:

CSS Code:
---------------------------------------------
img { border: 0; }

#img-Header { height: (XX)px; width: (XX)px; }

#img-Button { height: (XX)px; width: (XX)px; }

etc.

(X)HTML Code:
---------------------------------------------
<img id="img-Header" src="myFile.gif" />

<img id="img-Button" src="button.gif" />

Nick.

 

[rf]

I've just gotten serious about switching to CSS this week. I've been using
CSS for text. Pretty simple. But when converting my table layout to CSS it's
a bit daunting. My home page has 19 tables. I have 28 small graphics. This
is what the client wants. Converting this to CSS is confusing...

1) When validating, the validator red flags all the width="??" and

Where, URL? Width on an image is not an error.

border="0" attributes on graphics. Are they just supposed to be deleted? I

Yep. Border is deprecated. Use CSS.

thought those specs were designed to speed up the page viewing.

Border is a presentational issue and is relegated to CSS. Width and height
is part of the image and therefore part of the content.

2) In one area I have 10 small graphics spaced neatly in a 10 cell table and
centered on the page. How do I accomplish something like that in CSS?

You rethink your design. Why do you have 10 graphics to start with? If they
are links than you might use an image map.

I can
see where positioning on the top-left of an element is done, but to do that
for 10 graphics plus make sure they were centered on the page as group would
take forever. What am I missing?

URL? Maybe just plonk the graphics in as part of the content. They should
just follow each other in the flow.

3) Using the example of those 10 small graphics, I have 1 or 2 word snippets
below them. I do I align those snippets centered with respect to each
graphic?

Ah, it gets better. A URL is now required. Probably stick the image and the
description in div's and float them left. You will not get a chance to
center them though.

4) The home page header is an include file. How do I center an include on
the main body?

What sort of include? SSI? If so then you center it the same way you center
everything else. Apply margin: auto to the header element.

5) The body of the home page is layed out in 3 columns. How do I dupe that
same layout?

Google for "three column css layout". There are thousands of them.

Cheers
Ricahrd.

 

[kchayka]

You rethink your design. Why do you have 10 graphics to start with? If they
are links than you might use an image map.

You might want to rethink using image maps, too. If you care much about
accessibility, redundant text links are needed in addition to the image
map. If you're not sure why, then try using the page with image-loading
disabled. Virtually all graphical browsers suck at handling this.

 

[Wayfarer]

Thus spake shank:

5) The body of the home page is layed out in 3 columns. How do I dupe that
same layout?

http://www.inknoise.com/experimental/layoutomatic.php

HTH