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 08-14-2008, 10:32 AM   #1
jgr
Member
 
Join Date: Dec 2004
Posts: 276
Default Another stupid CSS/HTML question

Someday, I promise, I will sit down and really learn CSS. Right now, I have to meet a deadline to get some stuff done for my boss. So I appeal to your better natures and plead for help.

I want to create a two-column presentation with an image on the left which is NOT the same height as the text on the right (and I want the columns separate: that is, the text will be in its own column and the image in its own column). But I want the top margin of the image to be on the same level as the top of the text on the right. This will appear within the body of the page, not at the top of the page.

What, please, pray tell, is the easiest way to do this?

Bless you all...

   
__________________
-- jgr

Last edited by jgr; 08-14-2008 at 10:35 AM. Reason: to clarify question
jgr is offline   Reply With Quote
Old 08-14-2008, 11:48 AM   #2
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

Use DIVs to set up the columns.

See if the attached example would do. It works here. It is a bit kludgy — I had to create a picture DIV then make it appear empty for the regular text above; that could be handled more elegantly.
Attached Files
File Type: zip two-col_jgr.zip (16.0 KB, 14 views)

   
__________________
[SIZE=2][COLOR=LemonChiffon]::[/COLOR][/SIZE]
[SIGPIC][/SIGPIC]
ktinkel is offline   Reply With Quote
Old 08-14-2008, 04:57 PM   #3
Bo Aakerstrom
Member
 
Bo Aakerstrom's Avatar
 
Join Date: Mar 2005
Location: Derby,UK
Posts: 1,316
Default

Here's a fixed width version, you didn't say if it was a fixed width or liquid page you are working on.

You could quite easily convert this to a liquid layout if you wanted to. I would add overflow:hidden; to the image DIV, in case the image becomes wider than the space it is inside.

Sorry Kathleen - I borrowed some of your text. Fascinating stuff! Was that the effects of too much coffee or?
Attached Files
File Type: zip 2cols.zip (211.9 KB, 7 views)

   
__________________
www.boaakerstrom.com
Behance Portfolio

Last edited by Bo Aakerstrom; 08-14-2008 at 05:43 PM. Reason: editing attachement
Bo Aakerstrom is offline   Reply With Quote
Old 08-14-2008, 09:58 PM   #4
jgr
Member
 
Join Date: Dec 2004
Posts: 276
Default

Quote:
Originally Posted by ktinkel View Post
Use DIVs to set up the columns.
I'll blend yours and Bo's, thanks. (Yours doesn't have the image at the top of the left column, which is what I need.)

Thanks much. I keep forgetting the #$%@ div stuff. I sometimes wish I'd never learned the old-style HTML and tables. It makes getting my head around CSS so much harder!

   
__________________
-- jgr
jgr is offline   Reply With Quote
Old 08-14-2008, 10:02 PM   #5
jgr
Member
 
Join Date: Dec 2004
Posts: 276
Default

Quote:
Originally Posted by Bo Aakerstrom View Post
Here's a fixed width version, you didn't say if it was a fixed width or liquid page you are working on.
That'll work (with some of Kathleen's stuff mixed in), and many thanks. I didn't bother saying if it was fixed or liquid basically because the layout is so basic that it really doesn't matter. The page will be accessed, about 99.999% of the time, from a desktop or laptop (rather than a mobile device of any kind) and the image on the left is small while the text lines on the right are quite short. It's just that there are more text lines than there is image height!

   
__________________
-- jgr
jgr is offline   Reply With Quote
Old 08-15-2008, 06:56 AM   #6
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'll blend yours and Bo's, thanks. (Yours doesn't have the image at the top of the left column, which is what I need.)
All I did was add a div with a paragraph but no image at the top — I thought you wanted it to be in the middle of a page.

I believe the real difference between Bo’s version and mine is that mine is flexible, his fixed width.

Quote:
Thanks much. I keep forgetting the #$%@ div stuff. I sometimes wish I'd never learned the old-style HTML and tables. It makes getting my head around CSS so much harder!
Oh, don’t feel bad. Even though I never really mastered tables I have trouble remembering CSS coding tricks. I am on my third edition (her 6th) of Castro’s book and it is never far from my chair! I looked at it a lot to construct that sample.

   
__________________
[SIZE=2][COLOR=LemonChiffon]::[/COLOR][/SIZE]
[SIGPIC][/SIGPIC]
ktinkel is offline   Reply With Quote
Old 08-15-2008, 01:52 PM   #7
jgr
Member
 
Join Date: Dec 2004
Posts: 276
Default

Quote:
Originally Posted by ktinkel View Post
I am on my third edition (her 6th) of Castro’s book and it is never far from my chair!
[file file file]I'll have to pick that up from Amazon... Thanks!

   
__________________
-- jgr
jgr is offline   Reply With Quote
Old 08-16-2008, 12:16 PM   #8
iamback
Member
 
iamback's Avatar
 
Join Date: Oct 2005
Location: Amsterdam, NL
Posts: 4,894
Default

Quote:
Originally Posted by Michael Rowley View Post
How does one get their attention?
By sending a PM.

   
__________________
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 08-16-2008, 12:42 PM   #9
Michael Rowley
Member
 
Join Date: Jan 2005
Location: Ipswich (the one in England)
Posts: 5,105
Default

Quote:
By sending a PM
A PM? Can you be more specific? I only know post meridiem, postmaster (also postmistress), post-mortem, prime minister, . . .

   
__________________
Michael
Michael Rowley is offline   Reply With Quote
Old 08-17-2008, 01:01 AM   #10
iamback
Member
 
iamback's Avatar
 
Join Date: Oct 2005
Location: Amsterdam, NL
Posts: 4,894
Default

Quote:
Originally Posted by Michael Rowley View Post
A PM? Can you be more specific? I only know post meridiem, postmaster (also postmistress), post-mortem, prime minister, . . .
You're joking, right? I assume an old hand here knows how to use the forum. Go to your User Control Panel and send a Private Message.

   
__________________
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
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
Why tables for layout is stupid: iamback Web Design 6 11-02-2007 02:08 PM
HTML is Dead. Long live HTML. Five that is... CarlSeiler Web Design 3 07-30-2007 11:04 PM
Stupid Glossary ? curveto Print Production & Automation 21 06-06-2006 02:27 PM


All times are GMT -8. The time now is 10:01 PM.


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