By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
438,445 Members | 1,160 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 438,445 IT Pros & Developers. It's quick & easy.

width of block elements

P: n/a
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
Share this Question
Share on Google+
14 Replies


P: n/a
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 vo. O resto imperfeito.
- Renato Russo -

Jul 20 '05 #2

P: n/a

"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

P: n/a
> 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

P: n/a
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

P: n/a
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 vo. O resto imperfeito.
- Renato Russo -

Jul 20 '05 #6

P: n/a
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

P: n/a
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

P: n/a
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 vo. O resto imperfeito.
- Renato Russo -

Jul 20 '05 #9

P: n/a
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 vo. O resto imperfeito.
- Renato Russo -

Jul 20 '05 #10

P: n/a
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

P: n/a
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

P: n/a
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

P: n/a
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

P: n/a
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 vo. O resto imperfeito.
- Renato Russo -

Jul 20 '05 #15

This discussion thread is closed

Replies have been disabled for this discussion.