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 09-17-2005, 08:35 AM   #1
dacoyle
Member
 
dacoyle's Avatar
 
Join Date: Aug 2005
Location: Arlington, VA (across the river from Washington, DC)
Posts: 560
Default CSS layout question

See the top of this page's content with this text:

Contact: Constituent Services Office
Office: 703-549-8253
E-mail: info@adamebbin.com

I would like Constituent, 703-, and info@ aligned evenly with the bolded words still left aligned. Anyone have any ideas how to do that with CSS? This site is tableless layout, though if there isn't an easy CSS way I could use a table as technically it could be considered a data table...

Going on a 24 hour or so trip. Will have my laptop with me, but little time to use it...

10 minutes later: never mind... I created to classes with padding-left and spanned the unbolded text in the 2nd two lines. Can a few people let me know how it looks on their systems?

Thanks,

   
__________________
Dennis
dacoyle is offline   Reply With Quote
Old 09-17-2005, 08:53 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

Quote:
Originally Posted by dacoyle
See the top of this page's content with this text:

Contact: Constituent Services Office
Office: 703-549-8253
E-mail: info@adamebbin.com

I would like Constituent, 703-, and info@ aligned evenly with the bolded words still left aligned. Anyone have any ideas how to do that with CSS? This site is tableless layout, though if there isn't an easy CSS way I could use a table as technically it could be considered a data table...
If you meant that the three unbolded items should look as if indented to the same point, the bottom two work but the Constitutent... line is further to the left (very close to Contact.

Mac, Firefox 1.4 beta and Safari 2.0.1.

What about creating two divs, one for the three bold lines, the other for the three unbold lines?

Have a good trip.

   
__________________
[SIZE=2][COLOR=LemonChiffon]::[/COLOR][/SIZE]
[SIGPIC][/SIGPIC]
ktinkel is offline   Reply With Quote
Old 09-17-2005, 09:01 AM   #3
Daudio
Member
 
Daudio's Avatar
 
Join Date: Aug 2005
Location: Royal Oak, Detroit suburb
Posts: 174
Default

Dennis,

It looks fine to me on Mac WaMCom.

But I would like to see the bolded items to be right aligned.

I have always believed that to be a more attractive and readable layout. Reading is enhanced by the 'envelope' or shape of the overall, mixed case, text. And I think a symetrical set of right aligned labels and left aligned data text reads much easier.

Any thoughts on that from the graphics design gurus here ?

   
__________________
Dave

DaveAyers.com, Brass Backshop Forum
Daudio is offline   Reply With Quote
Old 09-17-2005, 09:06 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 Daudio
But I would like to see the bolded items to be right aligned.

I have always believed that to be a more attractive and readable layout. Reading is enhanced by the 'envelope' or shape of the overall, mixed case, text. And I think a symetrical set of right aligned labels and left aligned data text reads much easier.

Any thoughts on that from the graphics design gurus here ?
I actually often do that in things like mastheads, with a long list of editors, contributors, and so on; or on a letterhead for an organization that lists its officers down the side.

But then the entire array then is typically centered in a narrow column, not floating on a larger page, where I think it might call distracting attention to itself.

In this case, though, it would simplify the CSS layout, and might be worth a try.

   
__________________
[SIZE=2][COLOR=LemonChiffon]::[/COLOR][/SIZE]
[SIGPIC][/SIGPIC]
ktinkel is offline   Reply With Quote
Old 09-17-2005, 09:19 AM   #5
dacoyle
Member
 
dacoyle's Avatar
 
Join Date: Aug 2005
Location: Arlington, VA (across the river from Washington, DC)
Posts: 560
Default

Quote:
Originally Posted by ktinkel
If you meant that the three unbolded items should look as if indented to the same point, the bottom two work but the Constitutent... line is further to the left (very close to Contact.

Mac, Firefox 1.4 beta and Safari 2.0.1.

What about creating two divs, one for the three bold lines, the other for the three unbold lines?

Have a good trip.
Kathleen, I thought the bottom two were off a bit. There's just one space before constituent, so I decreased padding by 1 px below and I think it's aligned now.

   
__________________
Dennis
dacoyle is offline   Reply With Quote
Old 09-17-2005, 09:19 AM   #6
dacoyle
Member
 
dacoyle's Avatar
 
Join Date: Aug 2005
Location: Arlington, VA (across the river from Washington, DC)
Posts: 560
Default

Quote:
Originally Posted by Daudio
Dennis,

It looks fine to me on Mac WaMCom.

But I would like to see the bolded items to be right aligned.

I have always believed that to be a more attractive and readable layout. Reading is enhanced by the 'envelope' or shape of the overall, mixed case, text. And I think a symetrical set of right aligned labels and left aligned data text reads much easier.

Any thoughts on that from the graphics design gurus here ?
Dave,

I thought of that, but share Kathleen's concern. Though if she thinks it's worth a try I may play with it tomorrow. No time today.

   
__________________
Dennis
dacoyle is offline   Reply With Quote
Old 09-17-2005, 09:56 AM   #7
Kelvyn
Staff
 
Kelvyn's Avatar
 
Join Date: Feb 2005
Location: In the Heart of the English Lake District
Posts: 1,381
Default

Dennis, it looks fine to me, now.

PC, Firefox 1.5 Beta1, IE6 Sp1, Opera 8.0

   
__________________
Kelvyn

Web site design, hosting and marketing, Keswick in the UK Lake District

If you are planning a visit to Keswick then try Keswick Tourist Information website

Kelvyn is offline   Reply With Quote
Old 09-17-2005, 01:22 PM   #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 dacoyle
Kathleen, I thought the bottom two were off a bit. There's just one space before constituent, so I decreased padding by 1 px below and I think it's aligned now.
Sounds as if we are not seeing the same thing so I will attach an image of what I see in both browsers.

As it appears to me, the plain text in the first line is to the left of the lower two.
Attached Thumbnails
Click image for larger version

Name:	dennis.png
Views:	139
Size:	6.2 KB
ID:	195  

   
__________________
[SIZE=2][COLOR=LemonChiffon]::[/COLOR][/SIZE]
[SIGPIC][/SIGPIC]
ktinkel is offline   Reply With Quote
Old 09-17-2005, 01:24 PM   #9
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 dacoyle
I thought of that, but share Kathleen's concern. Though if she thinks it's worth a try I may play with it tomorrow. No time today.
I think it might work, especially with that block as far to the right as it is now.

Lots easier to code, and easier to read. Sounds like a win to me!

   
__________________
[SIZE=2][COLOR=LemonChiffon]::[/COLOR][/SIZE]
[SIGPIC][/SIGPIC]
ktinkel is offline   Reply With Quote
Old 09-17-2005, 02:40 PM   #10
dacoyle
Member
 
dacoyle's Avatar
 
Join Date: Aug 2005
Location: Arlington, VA (across the river from Washington, DC)
Posts: 560
Default

Kathleen,

Been trying to think how to do it... I may have a lot of these in the future so want something that's easy to apply.

Hotel has free wifi. Woo Hoo!

Dennis

   
__________________
Dennis
dacoyle 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
Help with layout problem Linda Baldwin Web Design 57 07-06-2006 02:09 PM
Magazine Layout Help for Newbie! romany Print Design 4 03-03-2006 02:43 PM
Layout Automation luckyyank Print Design 11 12-07-2005 10:45 PM
Page layout on the cheap Mike Print Design 1 10-16-2005 01:19 PM
Layout Inspiration danakay Print Design 9 04-11-2005 07:24 AM


All times are GMT -8. The time now is 10:00 AM.


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