width of block elements

Hi!

Here's what it should look like:

<style type="text/css">
span.h1 {
border-style:solid;
border-width:0px;
border-color:#000000;
border-bottom-width:2px;

padding-left:50px;
}
</style>

<span class="h1">Some Text</span>

That's exactly what I want - except that I'd rather use a block element
(the real h1 for example) instead of the span, because it should behave
like a block element (text float etc.).
But if I use a block element, it will always cover the whole width of
the parent element, and that's not what I want it to do (because this
stretches the border-bottom-line over the whole width, too).

I could put the span in a div:

<div><span class="h1">Some Text</span></div>

But this seems to me like an ugly hack and not like a clean solution.


Any hints how I could force a block element to use only the space it
needs? Fixed widths are of course not an option as the texts will be of
different length.


Thanks for your time
Florian

Florian Brucker wrote:

Here's what it should look like:

style type="text/css"
span.h1 {
border-style:solid;
border-width:0px;
border-color:#000000;
border-bottom-width:2px;

padding-left:50px;
}
/style

span class="h1">Some Text</span

That's exactly what I want - except that I'd rather use a block element
(the real h1 for example) instead of the span, because it should behave
like a block element (text float etc.).
But if I use a block element, it will always cover the whole width of
the parent element, and that's not what I want it to do (because this
stretches the border-bottom-line over the whole width, too).

I could put the span in a div:

div><span class="h1">Some Text</span></div

But this seems to me like an ugly hack and not like a clean solution.

Any hints how I could force a block element to use only the space it
needs? Fixed widths are of course not an option as the texts will be of
different length.

Don't know how badly it goes against the specs, but you
could float the <h1> left, and set clear:left; on the next
element, for instance a <p>.
Only works when there are no other blocks to the left of the
<p>, or else the clear property will mess things up.

--
Els
http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -

"Florian Brucker" <torf (AT) torfbold (DOT) com> wrote

Hi!

Here's what it should look like:

style type="text/css"
span.h1 {
border-style:solid;
border-width:0px;
border-color:#000000;
border-bottom-width:2px;

padding-left:50px;
}
/style

span class="h1">Some Text</span

That's exactly what I want - except that I'd rather use a block element
(the real h1 for example) instead of the span, because it should behave
like a block element (text float etc.).
But if I use a block element, it will always cover the whole width of
the parent element, and that's not what I want it to do (because this
stretches the border-bottom-line over the whole width, too).

How about

h1 { padding-left: 50px; text-decoration: underline; }

?

Don't know how badly it goes against the specs, but you could float the
h1> left, and set clear:left; on the next element, for instance a <p>.
Only works when there are no other blocks to the left of the <p>, or
else the clear property will mess things up.

I thought about that, too, but didn't realize one could do it pretty
elegant using

h1 {
floating:left;
}

h1 + * {
clear:left;
}

If there's no other way to do it, I'll do it like that.

Thanks for the tip,
Florian

Hi!

h1 { padding-left: 50px; text-decoration: underline; }

Didn't work for me using Mozilla 1.6. The "underline" is supposed to
start at x=0 whereas the text should start at x=50 (Over here, both
start at x=50 with your version).
Additionally, I can't use different types of "underlines" with this
method (whereas I can use different border-styles with the other one).

Thanks,
Florian

Florian Brucker wrote:

Don't know how badly it goes against the specs, but you could float
the <h1> left, and set clear:left; on the next element, for instance a
p>.
Only works when there are no other blocks to the left of the <p>, or
else the clear property will mess things up.

I thought about that, too, but didn't realize one could do it pretty
elegant using

h1 {
floating:left;
}

make that float:left;
or it won't work ;-)

h1 + * {
clear:left;
}

h1 + * ?

If there's no other way to do it, I'll do it like that.

Thanks for the tip,

You're welcome :-)

--
Els
http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -

On Mon, 07 Jun 2004 22:19:45 +0200, Els <els.aNOSPAM (AT) tiscali (DOT) nl> wrote:

h1 + * ?

This tells the UA to apply the style to any element follwing an h1. As it
won't work in IE, it's rarely used in practice.

h1 {
floating:left;
}

make that float:left;
or it won't work ;-)

Ouh, of course

h1 + * {
clear:left;
}

h1 + * ?

type1 + type2: Adjacent selectors. See
http://www.w3.org/TR/REC-CSS2/select...cent-selectors

*: Universal selector. See
http://www.w3.org/TR/REC-CSS2/select...ersal-selector

Or did I miss something?


Florian

Florian Brucker wrote:

h1 + * {
clear:left;
}

h1 + * ?

type1 + type2: Adjacent selectors. See
http://www.w3.org/TR/REC-CSS2/select...cent-selectors

Never saw that till now, but it seems it isn't supported by
IE6 :-(
http://2.www.kevinhatch.com/tutorials/css/browsers.php

*: Universal selector. See
http://www.w3.org/TR/REC-CSS2/select...ersal-selector

That I knew.

Or did I miss something?

Nope, I did ;-)



--
Els
http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -

Neal wrote:

On Mon, 07 Jun 2004 22:19:45 +0200, Els <els.aNOSPAM (AT) tiscali (DOT) nl> wrote:

h1 + * ?

This tells the UA to apply the style to any element follwing an h1. As
it won't work in IE, it's rarely used in practice.

That explains why I didn't know about it *ahem* ;-)

--
Els
http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -