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 14 2426
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" <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; }
?
> 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 <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.
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 - 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
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...
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)
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 - This discussion thread is closed Replies have been disabled for this discussion. Similar topics
9 posts
views
Thread by Luke McCarthy |
last post: by
|
6 posts
views
Thread by Christopher Benson-Manica |
last post: by
|
4 posts
views
Thread by Matt |
last post: by
|
17 posts
views
Thread by Piers Lawson |
last post: by
|
1 post
views
Thread by NullBock |
last post: by
|
50 posts
views
Thread by Shadow Lynx |
last post: by
|
1 post
views
Thread by ChrisW |
last post: by
|
5 posts
views
Thread by Taras_96 |
last post: by
|
5 posts
views
Thread by Summercool |
last post: by
| | | | | | | | | | |