DTP


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


Go Back   Desktop Publishing Forum > General Discussions > Web Site Building & Maintenance

Reply
 
Thread Tools Display Modes
Old 06-06-2006, 07:44 AM   #1
Bo Aakerstrom
Member
 
Bo Aakerstrom's Avatar
 
Join Date: Mar 2005
Location: Derby,UK
Posts: 1,321
Default Padding it out...

I've been adding padding to font declarations (headings that is) to create a coloured background that fills the width of a column and that will resize with the font size. See attached image.

Are there any potential problems with doing that - is it better to put the text in a div with padding instead?
Attached Thumbnails
Click image for larger version

Name:	example.png
Views:	105
Size:	2.4 KB
ID:	586  

   
__________________
www.boaakerstrom.com
Behance Portfolio
Bo Aakerstrom is offline   Reply With Quote
Old 06-06-2006, 08:27 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 Bo Aakerstrom
I've been adding padding to font declarations (headings that is) to create a coloured background that fills the width of a column and that will resize with the font size. See attached image.

Are there any potential problems with doing that - is it better to put the text in a div with padding instead?
I can’t think of any hazard (but will be interested in what Marjolein has to say on this).

It seems like a very clean and logical way to do it if it gives you the effect you want.

   
__________________
[SIZE=2][COLOR=LemonChiffon]::[/COLOR][/SIZE]
[SIGPIC][/SIGPIC]
ktinkel is offline   Reply With Quote
Old 06-06-2006, 08:53 AM   #3
Kelvyn
Staff
 
Kelvyn's Avatar
 
Join Date: Feb 2005
Location: In the Heart of the English Lake District
Posts: 1,381
Default

If it is a heading then you can style it however you wish (within reason ;-) ). On the page there will still be <hx>-Your text-</hx> so semantically that is correct. I think a lot or people forget that you can use background colour (or background images) for any container.

   
__________________
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 06-06-2006, 09:21 AM   #4
Bo Aakerstrom
Member
 
Bo Aakerstrom's Avatar
 
Join Date: Mar 2005
Location: Derby,UK
Posts: 1,321
Default

Quote:
Originally Posted by Kelvyn
If it is a heading then you can style it however you wish (within reason ;-) ). On the page there will still be <hx>-Your text-</hx> so semantically that is correct. I think a lot or people forget that you can use background colour (or background images) for any container.
It just seemd like a good idea to me, haven't seen anyone writing about it though. Why I don't know, they seem to have covered everything else, many times over...

I've tried to do that with images too, but haven't found a use for that yet.

As it is a local page it works fine, but I have noticed that there are differences in how a browser renders local and remote pages - or is that just me!?

And why do I have to be reasonable?

   
__________________
www.boaakerstrom.com
Behance Portfolio

Last edited by Bo Aakerstrom; 06-06-2006 at 09:25 AM. Reason: adding a silly comment
Bo Aakerstrom is offline   Reply With Quote
Old 06-06-2006, 09:24 AM   #5
Kelvyn
Staff
 
Kelvyn's Avatar
 
Join Date: Feb 2005
Location: In the Heart of the English Lake District
Posts: 1,381
Default

Quote:
Originally Posted by Bo Aakerstrom
I have noticed that there are differences in how a browser renders local and remote pages - or is that just me!?
That should not happen. Must be you.

   
__________________
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 06-06-2006, 09:28 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 Bo Aakerstrom
As it is a local page it works fine, but I have noticed that there are differences in how a browser renders local and remote pages - or is that just me!?
Doesn’t sound right to me.

Do have margins on your hx? If not, different browsers will likely apply different margins to the element. Best to set them to 0 (or whatever you want). Browsers are tediously inconsistent on padding and margin.

   
__________________
[SIZE=2][COLOR=LemonChiffon]::[/COLOR][/SIZE]
[SIGPIC][/SIGPIC]
ktinkel is offline   Reply With Quote
Old 06-06-2006, 09:34 AM   #7
Bo Aakerstrom
Member
 
Bo Aakerstrom's Avatar
 
Join Date: Mar 2005
Location: Derby,UK
Posts: 1,321
Default

Didn't think of adding a margin declaration as well - I'll try anything once!

   
__________________
www.boaakerstrom.com
Behance Portfolio
Bo Aakerstrom is offline   Reply With Quote
Old 06-06-2006, 11:49 AM   #8
donmcc
Member
 
Join Date: Feb 2005
Location: Sarnia, Canada
Posts: 1,122
Default

Run it through the css validator at w3.org. If that doesn't grumble, you should be okay.
donmcc is offline   Reply With Quote
Old 06-06-2006, 11:57 AM   #9
iamback
Member
 
iamback's Avatar
 
Join Date: Oct 2005
Location: Amsterdam, NL
Posts: 4,894
Default

Quote:
Originally Posted by Bo Aakerstrom
I've been adding padding to font declarations (headings that is) to create a coloured background that fills the width of a column and that will resize with the font size. See attached image.

Are there any potential problems with doing that - is it better to put the text in a div with padding instead?
If you want to style an element it's better to actually style the element than to style whatever is surrounding it! And that way you'll know what style applies to what. (You sometimes may be forced to use a roundabout method - but use it only then, avoid whenever possible.)

   
__________________
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 06-06-2006, 05:13 PM   #10
Bo Aakerstrom
Member
 
Bo Aakerstrom's Avatar
 
Join Date: Mar 2005
Location: Derby,UK
Posts: 1,321
Default

Quote:
Originally Posted by iamback
If you want to style an element it's better to actually style the element than to style whatever is surrounding it! And that way you'll know what style applies to what. (You sometimes may be forced to use a roundabout method - but use it only then, avoid whenever possible.)
Good to know I'm on the right track here! It's easy to come up with some hairbrained idea when I've only got my PC to talk to - the wife is away for a few days, not that she's a great help when it comes to css...

Quote:
Originally Posted by donmcc
Run it through the css validator at w3.org. If that doesn't grumble, you should be okay.
Did that and it didn't grumble. Still not 100% sure if valid code will work as intended in some browers though.

   
__________________
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


All times are GMT -8. The time now is 05:29 PM.


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