Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > HTML > converting table layout to CSS

Reply
Thread Tools

converting table layout to CSS

 
 
shank
Guest
Posts: n/a
 
      09-27-2003
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!


 
Reply With Quote
 
 
 
 
picayunish
Guest
Posts: n/a
 
      09-27-2003
shank wrote in news:g_jdb.35665$(E-Mail Removed) m:
>
> 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;}
--
Edwin van der Vaart (Geen familie van....)
http://www.semi-conductor.nl/ Links to Semiconductors sites
http://members.chello.nl/e.vandervaart/ Experimental site


 
Reply With Quote
 
 
 
 
e n | c k m a
Guest
Posts: n/a
 
      09-28-2003
> 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.


 
Reply With Quote
 
rf
Guest
Posts: n/a
 
      09-28-2003

"shank" <(E-Mail Removed)> wrote in message
news:g_jdb.35665$(E-Mail Removed) m...
> 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.


 
Reply With Quote
 
kchayka
Guest
Posts: n/a
 
      09-28-2003
rf wrote:

> "shank" <(E-Mail Removed)> wrote in message
> news:g_jdb.35665$(E-Mail Removed) m...
>>
>> 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.


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.

--
To email a reply, remove (dash)un(dash). Mail sent to the un
address is considered spam and automatically deleted.

 
Reply With Quote
 
Wayfarer
Guest
Posts: n/a
 
      09-28-2003
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
--
Wayfarer
Journeys: http://wayfarer.brinkster.net/
 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
Css-Layout vs Table-Layout Habib HTML 15 06-20-2006 05:11 AM
Choosing Layout: Css-Layout or Table-Layout hpourfard@gmail.com ASP .Net 1 06-19-2006 10:06 AM
Table-based layout to CSS layout Guybrush Threepwood HTML 20 06-11-2006 11:12 AM
CSS Layout question - how to duplicate a table layout with CSS Eric ASP .Net 4 12-24-2004 04:54 PM
converting a table layout to CSS DavidB HTML 1 11-19-2004 10:27 PM



Advertisments