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 2522
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*********@ti scali.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*********@ti scali.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 - This thread has been closed and replies have been disabled. Please start a new discussion. Similar topics |
by: Luke McCarthy |
last post by:
Hi,
I'm trying to accomplish what I (perhaps naively) assumed would be a
relatively easy task. I am trying to center a box in the middle of the
display. That's all. Something like this here:
http://bioinfo.usask.ca/~lukem/css/
The crux of the problem I'm having is that I'm unable to stop a
block-level element from filling up the entire available width without
making it a float, and once it's a float, I'm uable to center it.
|
by: Christopher Benson-Manica |
last post by:
http://ataru.gomen.org/files/html/files/test.html:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Test page</title>
<style type="text/css">
.center { margin-left: auto; margin-right: auto; text-align: center; }
#listdiv { width: 400px; margin-left: auto; margin-right: auto; }
|
by: Matt |
last post by:
Hi,
Got an unordered list with 100% width, with 5 list items of 20% width
styled to fill the width of the container element.
Renders fine in Mozilla, but when you change the size of the window in
IE, the last item in the list has a nasty tendency to wrap down to the
next line (and stay there).
I can hack it (imperfectly) by setting the width of the list items to
|
by: Piers Lawson |
last post by:
If the following is displayed in IE6 or FireFox, the text box forces the
second DIV to expand beyond its 15em width. Is there a way to have the text
box fit within the DIV (preferably without losing its default borders)?
Thank you in advance
Piers
<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Strict//EN'
'http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd'>
|
by: NullBock |
last post by:
Hi,
I'm trying to create a form with a text-input (not textarea) that
expands to the size available, using CSS. I thought that a simple
display:block would work:
<form>
<div>
<input type="text" style="display: block">
</div>
| |
by: Shadow Lynx |
last post by:
Consider this simple HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 STRICT//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Strict kills my widths!</title>
</head>
<body>
<table style="width:400px; table-layout:fixed;">
|
by: ChrisW |
last post by:
Just out of interest, does anyone know what the behaviour of the
following is supposed to be:
<div style="width: 80%">
<div style="width: 600px">
<!--HTML code goes here -->
</div>
|
by: Taras_96 |
last post by:
Hi everyone,
Can anyone tell me why the top paragraph block stretches across the
screen (as you would expect), while the bottom div doesn't stretch
across the entire screen? When I set the width to 100% (which I
interpret as saying 'make this width the same width as the parent
(which is the entire screen)) the div is made just wide enough to fit
it's contents, and if I decrease the value for the width, the width of
the div stretches?!
|
by: Summercool |
last post by:
wow... i didn't know that, for
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://
www.w3.org/TR/html4/loose.dtd">
<span style="width: 100px; background: yellow">a</span>b
<div style="width: 100px; background: yellow">a</div>b
|
by: marktang |
last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main usage, and What is the difference between ONU and Router. Let’s take a closer look !
Part I. Meaning of...
|
by: Hystou |
last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it.
First, let's disable language synchronization. With a Microsoft account, language settings sync across devices. To prevent any complications,...
| |
by: jinu1996 |
last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that captivates audiences and drives business growth.
The Art of Business Website Design
Your website is...
|
by: isladogs |
last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM).
In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules.
He will explain when you may want to use classes instead of User Defined Types (UDT). For example, to manage the data in unbound forms.
Adolph will...
|
by: conductexam |
last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one.
At the time of converting from word file to html my equations which are in the word document file was convert into image.
Globals.ThisAddIn.Application.ActiveDocument.Select();...
|
by: adsilva |
last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
|
by: 6302768590 |
last post by:
Hai team
i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system
|
by: muto222 |
last post by:
How can i add a mobile payment intergratation into php mysql website.
| |
by: bsmnconsultancy |
last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating effective websites that not only look great but also perform exceptionally well. In this comprehensive...
| |