aligning title and paragraphs differently

[Sjef Janssen]

Hallo,
I'm trying to create boxes that have nicely spaced paragraphs, but a title
that is in a colored line full-width.

Here is my styles:

In the div content I create the framed boxes and give then a padding at the
left of 20px. Problem is that hte title gets the same padding, whereas it
should align at the left frameline of the box.

#content
{
background-color:white;
border:1px solid gray;
padding: 0px 0px 0px 20px;
}

#content h1
{
left:0;
font-size: 1.4em;
font-weight:bold;
font-style: italic;
padding:0px 0px 0px 10px;
margin:0px 0px 0px -20px;
background-color:#CCCC99;
width:100%;
}

I cannot give a negative padding. Is there a solution for this?

--
sjef janssen
http://www.extranet.ou.nl/studie-profiel/836551051.asp

[Jukka K. Korpela]

Scripsit Sjef Janssen:

Here is my styles:

As usual, a URL would have helped.

In the div content I create the framed boxes and give then a padding
at the left of 20px. Problem is that hte title gets the same padding,
whereas it should align at the left frameline of the box.

No, the h1 element does not get the padding, but the div element's padding
restricts the width available to the h1 element. A simple solution is to set
no padding for the div element but (different) margins for the elements
inside it.

left:0;

What's the point? Are you using positioning in some part of a style sheet?

--
Jukka K. Korpela ("Yucca")
http://www.cs.tut.fi/~jkorpela/

[Sjef Janssen]

Yes, the content div is positioned inside a complete setup.
I will try setting margins for the elements
Thanks!!
Sjef

"Jukka K. Korpela" <jk******@cs.tut.fiwrote in message
news:tC*********************@reader1.news.saunalah ti.fi...

Scripsit Sjef Janssen:

Here is my styles:

As usual, a URL would have helped.

In the div content I create the framed boxes and give then a padding
at the left of 20px. Problem is that hte title gets the same padding,
whereas it should align at the left frameline of the box.

No, the h1 element does not get the padding, but the div element's padding
restricts the width available to the h1 element. A simple solution is to

set

no padding for the div element but (different) margins for the elements
inside it.

left:0;

What's the point? Are you using positioning in some part of a style sheet?

--
Jukka K. Korpela ("Yucca")
http://www.cs.tut.fi/~jkorpela/

[Sjef]

I changed the margins and it looks fine in IE. But in Firefox the H1 box
extends uotside the div box only on the right side. A difference between IE
and Firefox. Is there an easy way to correct this?

Thanxs!! Sjef

"Sjef Janssen" <ma*************@planet.nlschreef in bericht
news:46***********************@text.nova.planet.nl ...

Hallo,
I'm trying to create boxes that have nicely spaced paragraphs, but a title
that is in a colored line full-width.

Here is my styles:

In the div content I create the framed boxes and give then a padding at
the
left of 20px. Problem is that hte title gets the same padding, whereas it
should align at the left frameline of the box.

#content
{
background-color:white;
border:1px solid gray;
padding: 0px 0px 0px 20px;
}

#content h1
{
left:0;
font-size: 1.4em;
font-weight:bold;
font-style: italic;
padding:0px 0px 0px 10px;
margin:0px 0px 0px -20px;
background-color:#CCCC99;
width:100%;
}

I cannot give a negative padding. Is there a solution for this?

--
sjef janssen
http://www.extranet.ou.nl/studie-profiel/836551051.asp

[David Stone]

In article <46***********************@text.nova.planet.nl>,
"Sjef" <ma*************@planet.nlwrote:

"Sjef Janssen" <ma*************@planet.nlschreef in bericht
news:46***********************@text.nova.planet.nl ...

Hallo,
I'm trying to create boxes that have nicely spaced paragraphs, but a title
that is in a colored line full-width.

[snip]

I changed the margins and it looks fine in IE. But in Firefox the H1 box
extends uotside the div box only on the right side. A difference between IE
and Firefox. Is there an easy way to correct this?

[snip]

If you want h1 and p elements in the same div, but you want
different indentation (or any other effect) on the h1 compared
to the p's, you have three choices:

- style ALL p elements to have the indentation you want
- create a rule that applies to any p elements within the specific div
- have a second, inner div below the h1

A fourth alternative is to simply leave the h1 _outside_ the div.
Which method to chose and how to code it is left as a minor
exercise for the reader.

I can't help you with explaining why your styles render differently
in IE versus FF, other than to note that the usual reason is errors
in the html or css triggering 'quirks mode' in IE. Either that, or
you are coding for a non-standards compliant browser, then complaining
that a standards-compliant one doesn't break the rules in the same
way...

If you _really_ want help, post a URL so people can see what you are
trying to achieve.