width of block elements

Florian Brucker

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

Jul 20 '05 #1

Els

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 -

Jul 20 '05 #2

Harlan Messinger

"Florian Brucker" <to**@torfbold.com> wrote in message
news:2i************@uni-berlin.de...

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; }

?

Jul 20 '05 #3

Florian Brucker

> 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

Jul 20 '05 #4

Florian Brucker

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

Jul 20 '05 #5

Els

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 -

Jul 20 '05 #6

Florian Brucker

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

Jul 20 '05 #7

Neal

On Mon, 07 Jun 2004 22:19:45 +0200, Els <el*********@tiscali.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.

Jul 20 '05 #8

Els

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 -

Jul 20 '05 #9

Els

Neal wrote:

On Mon, 07 Jun 2004 22:19:45 +0200, Els <el*********@tiscali.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 -

Jul 20 '05 #10

Florian Brucker

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.

Well, I think it's a pretty handy thing to have and I really don't care
if IE understands it or not :)
(This is my personal opinion and not a flame bait for yet another
browser vs. specification vs. webdesigner vs. hairstyle discussion *g*)

Florian

Jul 20 '05 #11

Florian Brucker

http://2.www.kevinhatch.com/tutorials/css/browsers.php

Could anybody explain to me what the "P" and "B" fields mean? "Y" and
"N" are for yes and no, I guess :)

"B" for buggy, "P" for perfect?

Florian

Jul 20 '05 #12

Neal

On Mon, 07 Jun 2004 22:53:40 +0200, Florian Brucker <to**@torfbold.com>
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.

Well, I think it's a pretty handy thing to have

No argument from me!
and I really don't care if IE understands it or not :)
Well, so long as it is not interfering with usability, go ahead.
(This is my personal opinion and not a flame bait for yet another
browser vs. specification vs. webdesigner vs. hairstyle discussion *g*)

:) EVERYTHING eventually leads to that discussion, no matter how hard you
try otherwise...

Jul 20 '05 #13

Andrew Thompson

On Mon, 07 Jun 2004 22:53:40 +0200, Florian Brucker wrote:

..vs. hairstyle discussion *g*)

Now, the 'Mullet'.
...that's a fine hairdo, no?

(ducks)

Jul 20 '05 #14

Els

Florian Brucker wrote:

http://2.www.kevinhatch.com/tutorials/css/browsers.php

Could anybody explain to me what the "P" and "B" fields mean? "Y" and
"N" are for yes and no, I guess :)

"B" for buggy, "P" for perfect?

I think the P is for partial, and the B either for buggy, or
else just plain bad :-)

The same letters are used on a chart from 2001, where a mix
of Y and N is defined as P, as is a mix of B and Y.

<http://devedge.netscape.com/library/xref/2003/css-support/css2/selectors.html>

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

Jul 20 '05 #15