[thelist] How do I replicate this table behaviour in CSS?

Chris.Marsh at Callserve.com Chris.Marsh at Callserve.com
Tue Apr 19 12:43:45 CDT 2005


Ken

> > I'd like certain paragraphs in my client's website to have 
> a background
> > colour.  The colour should fill 100% of the column, but the contents
> > will usually be less than 100% wide.
> >
> > The paragraphs will be created on the fly by my client, so 
> doing this
> > needs to be extremely simple.  (He'll be using Contribute so I can
> > train him to an extent.)
> >
> > The content might be text - one or several paragraphs - or 
> it might be
> > images.
[..]
> 	<style>
> 	.test1 {
> 		display: block;
> 		width: 100%;
> 		background-color: Yellow;
> 		padding-bottom: 1em;
> 		padding-top: 1em;
> 	}
> 
> 	.test2 {
> 		display: block;
> 		width: 100%;
> 		background-color: Aqua;
> 		padding-top: 1em;
> 		padding-bottom: 1em;
> 		text-align: right;
> 	}
[..]
> <div class="test1"><p>This is in test1</p></div>
> <div class="test2"><p>This is in test2</p></div>
[..]

Is there any reason you've nested the paragraphs in the divs? From my
perspective I would consider <p> to be sufficient markup (semantically) for
a paragraph. If there was an image, I would nest it in a <div>, as it would
be a logical page division. Also, both <div> and <p> are (I believe)
naturally block level elements. I would therefore use something like:

<style type='text/css'>
p.column, div.column
{
    width: 450px;
    padding: 1px 2px 3px 4px;
    background-color: #CC0000;
}
</style>
<p class='column'>Content</p>
<div class='column'><img src='/test.gif' /></div>
<p class='column'>Content</p>

What do you think?

Regards

Chris Marsh

_______________________________________________________________________
This email and any files transmitted with it are confidential and intended solely for the use of the individual or entity to whom they are addressed. If you have received this email in error please notify the sender and delete the email immediately. If you are not the intended recipient you are notified that disclosing, copying, distributing or taking any action in reliance on the contents of this information is strictly prohibited. 

Please note that any views or opinions presented in this email are solely those of the author and do not necessarily represent those of the company.

Finally, the recipient should check this email and any attachments for the presence of viruses. Callserve Communications accepts no liability for any damage caused by any virus transmitted by this email. _______________________________________________________________________
This email has been scanned for all viruses by the MessageLabs SkyScan
service.


More information about the thelist mailing list