DTP


 
Lively discussions on the graphic arts and publishing — in print or on the web


Go Back   Desktop Publishing Forum > General Discussions > Web Design

 
 
Thread Tools Display Modes
Prev Previous Post   Next Post Next
Old 07-31-2007, 12:26 AM   #2
iamback
Member
 
iamback's Avatar
 
Join Date: Oct 2005
Location: Amsterdam, NL
Posts: 4,894
Default

Quote:
Originally Posted by jgr View Post
I'm webmaster of a small family genealogy website and need to try to recreate the main page (www.pamunkeybakers.com) using CSS. It's now plain HTML using tables. I've never understood the basic theory behind doing in CSS what you can do with a table. Is there some good explanation of how to accomplish this that I can look at?
Take it "outside in" and draw some boxes. On paper! Something like:
Code:
+----------------------------------+
|                                  |
+----------------------------------+
+----------------------------------+
|+---++---------------------------+|
||   ||                           ||
||   ||                           ||
||   ||                           ||
||   ||                           ||
||   ||                           ||
||   ||                           ||
||   ||                           ||
||   ||                           ||
||   ||                           ||
||   ||                           ||
|+---++---------------------------+|
+----------------------------------+
Recognize your page? in HTML that structure becomes:
HTML Code:
<div id="header">
</div>
<div id="body">
    <div id="sidebar">
    </div>
    <div id="content">
    </div>
</div>
Put some dummy content in first. Then you use CSS to lay out those boxes - the only trick here is to get the content to appear next to the sidebar - there are plenty of CSS examples out there for this simple structure.

Then "pour" in your content - even if maybe some parts still use (nested) tables now (side bar? I didn't look at your source). Next you tackle those tables. For instance, your sidebar would simply contain a number of menus, each of which you can mark up as an unordered list - it could even become one nested list of lists. Once you have the structure right, then you use CSS to style those. Again, many examples out there.

This just gives you a general approach from how to get from a table layout to a structure HTML + CSS markup.

   
__________________
Marjolein Katsma
Look through my eyes on Cultural Surfaces (soon!), My ArtFlakes shop and Flickr.
Occasionally I am also connecting online dots... and sometimes you can follow me on Marjolein's Travel Blog
iamback is offline   Reply With Quote
 

Thread Tools
Display Modes

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

Forum Jump

Similar Threads
Thread Thread Starter Forum Replies Last Post
Jigsaw puzzle effect in Photoshop marlene Images 11 07-10-2007 03:22 AM
Affect or Effect dthomsen8 On Language & Literature 14 11-22-2006 11:10 AM
Sheening effect in CorelDraw? misty Images 3 05-05-2006 05:59 PM
Quick 'n' Dirty Chrome Effect Clayton Images 1 04-05-2006 03:00 PM
Effect of site design on men vs women ktinkel Web Design 7 08-22-2005 05:23 PM


All times are GMT -8. The time now is 07:04 AM.


Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2017, vBulletin Solutions, Inc.
Contents copyright 2004–2014 Desktop Publishing Forum and its members.