/    Sign up×
Community /Pin to ProfileBookmark

Tutorial for replacing tables with CSS?

… is there a decent tutorial floating around in the ether that explains how to replace tables with CSS when it comes to page/graphics layout?

to post a comment
CSS

5 Comments(s)

Copy linkTweet thisAlerts:
@CharlesDec 09.2004 — Tutorial:

Put the content and navigation in two different DIV elements, the content DIV appearing first in the document. Using CSS set the right or left margin of the content DIV to some ammount. Set the width of the navigation DIV to just alittle bit less and then absolutely position the navigation DIV in that margin.
Copy linkTweet thisAlerts:
@fredmvDec 09.2004 — Thing is, you don't just "replace tables with CSS". What you're actually doing is making the markup of your page meaningful (where to begin with, it obviously isn't, since it is using tables for page structure). So for example, the page might consist of an unordered list (navigation), some paragraphs (content), and so on. Tables have their place too, though -- tabulated data.

I think it'd be helpful if you could provide us with an example page that you're working on. Remember, there are lot of pre-built CSS layouts out there that you could adapt to quite easily.
Copy linkTweet thisAlerts:
@pogy366authorDec 09.2004 — ... as you will see, i'm table happy:

[URL=http://www.silentvalor.info]http://www.silentvalor.info[/URL]

[URL=http://www.usssterlet.info]http://www.usssterlet.info[/URL]

i wasn't aware that CSS was a better option for overall page layout than tables. Guess i know better now.
Copy linkTweet thisAlerts:
@fredmvDec 09.2004 — Not a bad tutorial, Charles.

As I suspected, those are both your average multi-column layouts. Take a look at [url=http://glish.com/css/]Glish[/url] or [url=http://www.bluerobot.com/web/layouts/]Blue Robot[/url] for some ideas. Of course, these are just starting points. Use them as your foundation and build off of them.
Copy linkTweet thisAlerts:
@pogy366authorDec 09.2004 — ... thanks for the input, cheers.
×

Success!

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

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 5.28,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...