CSS: having line break before but not after an element

[Martin Magnusson]

Hi.

I'm trying to modify a header tag to have a line break before the header
(like display:block would do and like headers normally behave), but not
after (like display:inline would do).

How can I do this with CSS?

 

[Sid Ismail]

On Wed, 25 May 2005 10:48:25 +0200, Martin Magnusson

: Hi.
:
: I'm trying to modify a header tag to have a line break before the header
: (like display:block would do and like headers normally behave), but not
: after (like display:inline would do).
:
: How can I do this with CSS?


top style-
..header1 {margin-top:6px; margin-bottom:1px;
font-size:180%; font-weight:bold;}

then,
<div class=header1>bla bla bla</div>


Sid

 

[Martin Magnusson]

On Wed, 25 May 2005 10:48:25 +0200, Martin Magnusson

: Hi.
:
: I'm trying to modify a header tag to have a line break before the header
: (like display:block would do and like headers normally behave), but not
: after (like display:inline would do).
:
: How can I do this with CSS?


top style-
.header1 {margin-top:6px; margin-bottom:1px;
font-size:180%; font-weight:bold;}

then,
<div class=header1>bla bla bla</div>

I would rather modify <h4> directly, instead of having to use different
types of divs etc. And using
h4{
margin-top:6px;
margin-bottom:1px;
}
still makes the browsers I've tried line break after the </h4>. Is there
any way to prevent that?

 

[Steve Pugh]

I'm trying to modify a header tag to have a line break before the header
(like display:block would do and like headers normally behave), but not
after (like display:inline would do).

How can I do this with CSS?

The closest is display: run-in
http://www.w3.org/TR/CSS21/visuren.html#run-in

The technicalities are bit complex and I've never used it myself so
I;m not sure about browser support.

Steve

 

[Spartanicus]

The closest is display: run-in
http://www.w3.org/TR/CSS21/visuren.html#run-in

The technicalities are bit complex and I've never used it myself so
I;m not sure about browser support.

Supported by Opera and KHTML browsers, not by Gecko based browsers and
IE.

 

[Martin Magnusson]

The closest is display: run-in
http://www.w3.org/TR/CSS21/visuren.html#run-in

The technicalities are bit complex and I've never used it myself so
I;m not sure about browser support.

Steve

Great, that's what I was looking for, but I couldn't find it at W3Schools.

 

[Steve Pugh]

Great, that's what I was looking for, but I couldn't find it at W3Schools.

W3Schools is very IE-centric (and hence rather limited) as well as
being rather error prone, better to check the actual CSS specs at
w3c.org.

Steve

 

[Mark Parnell]

I'm trying to modify a header tag to have a line break before the header
(like display:block would do and like headers normally behave), but not
after (like display:inline would do).

ISTM that everyone is trying to make it more complicated than it should
be. Isn't this basically what float is for? Setting float: left; on the
heading seems to do the trick (with an appropriate width, of course).
You may need to play with clears/margins on the surrounding elements,
depending on context.