DTP


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


Go Back   Desktop Publishing Forum > General Discussions > Web Design

Reply
 
Thread Tools Display Modes
Old 07-30-2007, 06:27 PM   #1
jgr
Member
 
Join Date: Dec 2004
Posts: 276
Default Recreate effect with CSS?

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? Thanks.

   
__________________
-- jgr
jgr is offline   Reply With Quote
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
Old 07-31-2007, 05:52 AM   #3
dthomsen8
Member
 
dthomsen8's Avatar
 
Join Date: Aug 2005
Location: Philadelphia, PA 19130
Posts: 2,158
Default

The website now has beautiful graphics, and the source has comments and also CSS for purposes other than layout, all of which is very good.

Suggestions: be sure to specify character encoding, and use the same DOCTYPE on every page. Marjolein has given you a good start on the layout. Let us know how you are doing.
dthomsen8 is offline   Reply With Quote
Old 07-31-2007, 07:12 AM   #4
ktinkel
Founding Sysop
 
ktinkel's Avatar
 
Join Date: Oct 2004
Location: In Connecticut, on the Housatonic River near its mouth at Long Island Sound.
Posts: 11,189
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.
The DTP Forum Web Home is similar to what you plan (organizationally, I mean). You could look at that and grab the CSS to see how it goes together.

Do you have the Web Developer plug-in for FireFox? It has some good tools for troubleshooting pages as you work (and for analyzing those you happen to see). I find the CSS > View Style Information and the Information > Display Element Information tools to be especially useful. (You select one of those options and then select an element on the real page.)

You can also grab the source or validate HTML or CSS from items in the menu with that plug-in.

   
__________________
[SIZE=2][COLOR=LemonChiffon]::[/COLOR][/SIZE]
[SIGPIC][/SIGPIC]
ktinkel is offline   Reply With Quote
Old 07-31-2007, 08:22 AM   #5
jgr
Member
 
Join Date: Dec 2004
Posts: 276
Default

Quote:
Originally Posted by iamback View Post
This just gives you a general approach from how to get from a table layout to a structure HTML + CSS markup.
That helps a great deal, thanks. One problem I can't grasp is in getting the left sidebar background image to work. I used the following:
Code:
#sidebar {background-image:
url('left1bg.jpg');
background-repeat: repeat-y}
But I think there's something I'm missing -- a padding command or something -- because it doesn't repeat vertically in a solid unit; it shows, then there's white space, then it repeats.

   
__________________
-- jgr
jgr is offline   Reply With Quote
Old 07-31-2007, 08:23 AM   #6
jgr
Member
 
Join Date: Dec 2004
Posts: 276
Default

Quote:
Originally Posted by ktinkel View Post
Do you have the Web Developer plug-in for FireFox? It has some good tools for troubleshooting pages as you work (and for analyzing those you happen to see). I find the CSS > View Style Information and the Information > Display Element Information tools to be especially useful. (You select one of those options and then select an element on the real page.)
I do, but haven't used it nearly as much as I should. Thanks!

   
__________________
-- jgr
jgr is offline   Reply With Quote
Old 07-31-2007, 08:25 AM   #7
jgr
Member
 
Join Date: Dec 2004
Posts: 276
Default

Quote:
Originally Posted by dthomsen8 View Post
The website now has beautiful graphics, and the source has comments and also CSS for purposes other than layout, all of which is very good.
Now if I could just understand the layout bit! As in (for example) how you get one div to be right up against another div so there's no gap in the graphics!

Quote:
Originally Posted by dthomsen8 View Post
Suggestions: be sure to specify character encoding, and use the same DOCTYPE on every page.
Oh ouch... I hadn't noticed that. Will do, thanks.

   
__________________
-- jgr
jgr is offline   Reply With Quote
Old 07-31-2007, 09:30 AM   #8
ktinkel
Founding Sysop
 
ktinkel's Avatar
 
Join Date: Oct 2004
Location: In Connecticut, on the Housatonic River near its mouth at Long Island Sound.
Posts: 11,189
Default

Quote:
Originally Posted by jgr View Post
I think there's something I'm missing -- a padding command or something -- because it doesn't repeat vertically in a solid unit; it shows, then there's white space, then it repeats.
Did you set the img to have margin: 0; padding: 0; ?

That little problem catches me so often that I sometimes start the style sheet by zeroing out margin and padding for everything (p, img, a, li, you name it).

That lets me see how things look without. If I later decide that I actually want a little padding or margin, I can specify it exactly, for that element within a div of ID #X, for example.

   
__________________
[SIZE=2][COLOR=LemonChiffon]::[/COLOR][/SIZE]
[SIGPIC][/SIGPIC]
ktinkel is offline   Reply With Quote
Old 07-31-2007, 06:14 PM   #9
jgr
Member
 
Join Date: Dec 2004
Posts: 276
Default

Quote:
Originally Posted by ktinkel View Post
Did you set the img to have margin: 0; padding: 0; ?
Not yet... (I have to update the site tonight using the existing code; I'll keep working on the CSS conversion afterwards...)

   
__________________
-- jgr
jgr is offline   Reply With Quote
Old 08-01-2007, 06:59 PM   #10
Bo Aakerstrom
Member
 
Bo Aakerstrom's Avatar
 
Join Date: Mar 2005
Location: Derby,UK
Posts: 1,321
Default

Quote:
Originally Posted by dthomsen8 View Post
...use the same DOCTYPE on every page...
This is strictly speaking not neccessary since it relates to the code on the page it is on. Although it is a good idea to stick with a Strict DTD when starting from scratch.

Joe Clark (who knows a thing or three about compliant web pages) is writing about that here under the heading "Start off with DOCTYPE".

This page (from Apple) about best practices is a good place to start as it is a little easier to digest than W3C's information.

   
__________________
www.boaakerstrom.com
Behance Portfolio
Bo Aakerstrom is offline   Reply With Quote
Reply

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 03:48 PM.


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