CSS to replace tables for layout

@jpmoriartyNov 27.2002

Hoping to follow the W3C guidelines for web site accessability that have been brought to my attention, I’m hoping to get away from using tables for layout and move onto using CSS’s.

Following on therefore from the helpful advice that I have received previously, I was wondering if people would be willing/able to help me again. I want to achieve effectively a two columned page, left column ~65% of the screen, and right column ~30% with a nice gap between the two (hence the 5% discrepancy!). What I want then is two boxes, both with nice dark blue borders, and then a mellow purple background colour. The title for each box should be in a solid bdark blue box though (to match the border) with white text in it. On the left hand box I want to put my thumbnails, 4 across by however many down (often as many as 40 images are needed, so 4×10 would be sufficient) – I’d like a considerable spacing between each of the images though that matches the spacing between the edge of the box and the images – so nothing looks too cramped. In the right hand column I’d like a top box which I can put some text in to explain what the photos are about, and then a box below it if i need links or anything.

I’d love it if someone showed me how to do it, and would also appreciate the link (or an ISBN number) of somewhere that teaches how to do CSS’s properly for those of us not yet (or only very limited) initiated. I see that they are the way forward, and want to get on the train before it’s left the station!

Many thanks all, as always,

to post a comment

CSS

12 Comments(s) _↴

@StefanNov 27.2002 — #[i]Originally posted by jpmoriarty [/i]

On the left hand box I want to put my thumbnails, 4 across by however many down (often as many as 40 images are needed, so 4x10 would be sufficient) - I'd like a considerable spacing between each of the images though that matches the spacing between the edge of the box and the images - so nothing looks too cramped.

[/QUOTE]
With CSS you don't need to determine in advance how many images should fit per "row". You can leave it to automatically place as many images on each row as will fit depending on the available screensize.

My example does this (check by resizing the browserwindow).

If you still would rather like a fixed 4 images row layout I'll show how to do that too. My example also uses ugly colors, but I think you are bright enough to handle that problem yourself ?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<meta http-equiv="Content-Script-Type" content="text/javascript" />

<meta http-equiv="Content-Style-Type" content="text/css" />

<title></title>

<style title="Default" type="text/css" media="screen">

body {margin:5%; color:white;}

#left {width:65%; float:left; border:1px solid blue; background:purple;}

#right {margin:0 0 0 70%; border:1px solid blue; background:purple;}

#left div {width:100px; height:100px; float:left; background:green; margin:0 0 5px 5px; border:1px solid black; text-align:center;}

h1 {color:blue; font-size:200%; text-align:center;}

h2 {color:blue; font-size:150%; text-align:center;}

</style>

</head>

<body>

<div id="left">

<h1>Left Box</h1>

<div>Place for thumbnail</div>

<div>Place for thumbnail</div>

<div>Place for thumbnail</div>

<div>Place for thumbnail</div>

<div>Place for thumbnail</div>

<div>Place for thumbnail</div>

<div>Place for thumbnail</div>

<div>Place for thumbnail</div>

<div>Place for thumbnail</div>

<div>Place for thumbnail</div>

<div>Place for thumbnail</div>

<div>Place for thumbnail</div>

<div>Place for thumbnail</div>

<div>Place for thumbnail</div>

<div>Place for thumbnail</div>

<div>Place for thumbnail</div>

<div>Place for thumbnail</div>

<div>Place for thumbnail</div>

<div>Place for thumbnail</div>

<div>Place for thumbnail</div>

<div>Place for thumbnail</div>

<div>Place for thumbnail</div>

<div>Place for thumbnail</div>

</div>

<div id="right">

<h1>Right Box</h1>

<div>

<h2>Explanation</h2>

</div>

<div>

<h2>Links section</h2>

</div>

</div>

</body>

</html>

would also appreciate the link (or an ISBN number) of somewhere that teaches how to do CSS's properly for those of us not yet (or only very limited) initiated.[/QUOTE]

I have not learned CSS using a book or tutorials but rather by reading the actuall CSS spec itself. That might not be the best way for you, but it has the advantage that you will always know that the info you get is accurate.

Also the CSS spec is filled with good small pieces of examplecode.

However it's not a book to read from cover to cover, instead it's best used to look up stuff when you need it.

However what is absolutely crucial to learning CSS is to use the right browser to check what happens when you code.

The #1 outstanding browser-engine today in regard to CSS support is Gecko (which is in Mozilla, Netscape 6, 7 ,K-Meleon, Galleon, Skipstobe, Phoenix etc etc).

The brand new Opera 7 (just in beta) also is really good, albeight a notch or two down from Gecko.

In general, if something doesn't look as you want it to in both these browsers you are doing something wrong. If only 1 differens one of them is likely to be buggy (and not nessecarily the one that doesn't show stuff the way you want ?). It's quite rare to bump into bugs that breaks your code in both.

Also highly important whan dealing with advanced CSS is that your HTML MUST be valid and MUST include a valid doctype. This is becuase all modern browsers have at least 2 rendering modes "standards compliant" and "quirks - this webdeveloper doesn't know what he is doing" mode. Quirks mode mimics old buggy browser implementations and that makes especially CSS behave highly erratic. Further I personally recomend using XHTML instead o HTML, because the stricter rules of XHTML will help you make correct pages.

CSS2 spec

http://www.w3.org/TR/REC-CSS2/

Validator (there is a CCS validator too)

http://validator.w3.org

When you have a working page in Gecko and Opera 7 chanses are that IE and other buggy browsers won't look exactly the same. To solve that you can take advantage of other bugs in these browsers and "feed them" incorrect values that make them work better. This site has a table of such CSS parsing bugs for various browsers as well as links that explain exactly how and what the bugs do.

http://centricle.com/ref/css/filters/

Browsers:

http://www.opera.com

And one of the below for Gecko

http://www.mozilla.org

http://kmeleon.sourceforge.net/

http://texturizer.net/phoenix/download.html

@jpmoriartyauthorNov 27.2002 — #many thanks again stefan - I've regigged it slightly to learn a bit and to achieve the effect I wanted:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<meta http-equiv="Content-Script-Type" content="text/javascript" />

<meta http-equiv="Content-Style-Type" content="text/css" />

<title></title>

<style title="Default" type="text/css" media="screen">

body {margin:10px; color:white;}

#left {width:65%; float:left; border:1px solid navy; background:#CFD0E7; margin: 0 0 0 0;}

#right {margin:0 0 20px 70%; border:1px solid navy; background:#CFD0E7;}

#left div {width:100px; height:100px; float:left; background:#6E70C6; margin:5px 5px 5px 5px; border:2px solid navy; text-align:center;}

h1 {color:white; font-size:100%; text-align:left; background:navy; border:3px solid navy ; margin: 0 0 0px 0 ;}

h2 {color:white; font-size:100%; text-align:left; margin:2px ;}

</style>

</head>

<body>

<div id="left">

<h1>Left Box</h1>

<div>Place for thumbnail</div>

<div>Place for thumbnail</div>

<div>Place for thumbnail</div>

<div>Place for thumbnail</div>

<div>Place for thumbnail</div>

<div>Place for thumbnail</div>

<div>Place for thumbnail</div>

<div>Place for thumbnail</div>

<div>Place for thumbnail</div>

<div>Place for thumbnail</div>

<div>Place for thumbnail</div>

<div>Place for thumbnail</div>

<div>Place for thumbnail</div>

<div>Place for thumbnail</div>

<div>Place for thumbnail</div>

<div>Place for thumbnail</div>

<div>Place for thumbnail</div>

<div>Place for thumbnail</div>

<div>Place for thumbnail</div>

<div>Place for thumbnail</div>

<div>Place for thumbnail</div>

<div>Place for thumbnail</div>

<div>Place for thumbnail</div>

</div>

<div id="right">

<h1>Right Box</h1>

<div>

<h2>Explanation</h2>

</div>

<div>

<h2>Links section</h2>

</div>

</div>

<div id="right">

<h1>Right Box 2</h1>

<div>

<h2>Explanation</h2>

</div>

<div>

<h2>Links section</h2>

</div>

</div>

<div id="right">

<h1>Right Box 3</h1>

<div>

<h2>Explanation</h2>

</div>

<div>

<h2>Links section</h2>

</div>

</div>

</body>

</html>

A few things - could you show me how to make it only display 4 across at a time? And also I've played around to no avail - how do i make it give a margin below the last row of images so that it looks symmetrical to the top?

@Robert_WellockNov 27.2002 — #I agree is CSS is prefable, but remember, you need to know your target audience for example within the old Netscape 4.7x it will probably throw a fit with all that CSS.

Hence why XHTML is considered better matched for CSS than HTML.

@StefanNov 27.2002 — #[i]Originally posted by jpmoriarty [/i]

A few things - could you show me how to make it only display 4 across at a time?

[/QUOTE]

That would be something like

<img />

<img />

<img />

<img />

<br />

<img />

<img />

<img />

<img />

<br />

etc

And instead of having <div> boxes that float you just specify text-align:center and add margins to your images in eg %.

And also I've played around to no avail - how do i make it give a margin below the last row of images so that it looks symmetrical to the top?[/QUOTE]

Actually there is already supposed to be a small one. If you get no margin at all currently it's probably becuse you are looking at the page in a buggy IE version. ?

Anyway, the easy fix is to add something like this after the last div

<div style="clear:both;">&nbsp;</div>

@allierDec 04.2002 — #The result is quite good , but how will you do so that all the 100px X 100 px box will be centered in the left box or that the right margin of the left box will be always equal to the left one

Excuse me if it's a silly question but like the float:middle; doesn't exit ...

?

@jpmoriartyauthorDec 04.2002 — #I've tried that float:middle thingy a few times myself...

I do keep coming back to the opinion though that it's SOOOOOOOOOOOO much easier to get the effect that you want with tables.

@StefanDec 04.2002 — #[i]Originally posted by allier [/i]

[B]The result is quite good , but how will you do so that all the 100px X 100 px box will be centered in the left box or that the right margin of the left box will be always equal to the left one

Excuse me if it's a silly question but like the float:middle; doesn't exit ...

? [/B][/QUOTE]

Well there is only float left or right and it does unfortunately make it impossible to exactly center the rows.

The workaround I use is normally to put a padding of 1/3 to 1/2 the width of a floated box on the left side (if the boxes are floated left) to balance out the look "on average".

In this case with 100px boxes eg 40px space on the left usually looks nice.

@StefanDec 04.2002 — #[i]Originally posted by jpmoriarty [/i]

[B]I've tried that float:middle thingy a few times myself...

I do keep coming back to the opinion though that it's SOOOOOOOOOOOO much easier to get the effect that you want with tables. [/B][/QUOTE]

You are wrong.

What you do with float there is simply no way to do at all with tables.

If you want it like you do with tables you have to determine in advance how many boxes you have on each row.

That creates an extremly inflexible layout that doesn't scale well from eg 640px to 1280px.

If <table> work well at 640 it will lok like crap at 1280 with huge white spaces on the side(s).

It's to get away from this limitation that you HAVE to use CSS floats.

@allierDec 04.2002 — #If you want it like you do with tables you have to determine in advance how many boxes you have on each row. [/QUOTE]

I don't thing so : with tables you just have to :

<center><table width="60%"><tr><td><center><img src ="titi.gif">><img src ="titi.gif">...><img src ="titi.gif"></center></tr></td></table></center>

I just trying to know if I will convert to css, but I still hesitate seeing all the diffilcuties to have things centered. It's seems to be the bad side of css and has I like things centered and I don't like pages which just look good on a 800x600 bases and ugly on a 21" 1224x768 screen.

Still to be convinced by css ... but of course, there are lots of good things in css.

@StefanDec 05.2002 — #[i]Originally posted by allier [/i]

[B]I don't thing so : with tables you just have to :

<center><table width="60%"><tr><td><center><img src ="titi.gif">><img src ="titi.gif">...><img src ="titi.gif"></center></tr></td></table></center>

[/QUOTE]

<img> on it's own is inline content amd will wrap/center fine anywhere.

<div> boxes however will not.

Don't confuse the 2.

@tobakeDec 05.2002 — #It isn´t that hard to center things with CSS as you think.

you can use:
[CODE]text-align:center[/CODE]

or you can set both right and left margins to auto..

read more at this site

[URL=http://bluerobot.com/web/css/center2.html]http://bluerobot.com/web/css/center2.html[/URL]

[URL=http://bluerobot.com/web/css/center1.html]http://bluerobot.com/web/css/center1.html[/URL]

@allierDec 07.2002 — #It isn´t that hard to center things with CSS as you think. read more at this site

http://bluerobot.com/web/css/center2.html

http://bluerobot.com/web/css/center1.html [/QUOTE]

Those links are quite interesting but the "CSS Centering Negative Margin" doesn't work on my screen (win98 IE5.5 800*600)

The block in not center (there is 1cm (05 in) difference between the left and the right border) so it doesn't seems that easy ...

The "CSS Centering Auto-width Margins" is ok .

nb : To see that the block with "CSS Centering Negative Margin" is or is not centered you can modifiy the source .

For example with my screen width = 800 px

768 + 2*15 + 2*1= 800

The source must be :

#Content {

position:absolute;

left:50%;

width:768px;

margin-top:50px;

margin-left:-400px;

padding:15px;

border:1px dashed #333;

background-color:#eee;

}

In tis case, ,there is 1 cm at the right of my screen .

I put the result on-line :

[URL=http://www.infopilat.net/CSSCentering.htm]CSSCentering.htm[/URL]

Ii you have only one block centered that way that doesn't matter, but if you have several that does not look good.

Also in #CSS _↴

Flash layer problem MAC making an image dimmer on hover Why do block elements not wrap around elements with the "float" property at times?

Success!

Help @jpmoriarty spread the word by sharing this article on Twitter...

Tweet This

CSS to replace tables for layout

12 Comments(s) _↴

Also in #CSS _↴

Success!

Social

Version

CSS to replace tables for layout

12 Comments(s) ↴

Also in #CSS ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

12 Comments(s) _↴

Also in #CSS _↴