Centering text within a line

[Tristan Miller]

Greetings.

Is there any way of using CSS alone to make an object centered and with a
dotted or dashed line extending on either side to the borders of the
enclosing object? For example, I have the HTML heading

<h1 class="centerli ne">Foo</h1>

and I would like it to display as follows:

------------------------------- Foo --------------------------------

Regards,
Tristan

--
_
_V.-o Tristan Miller [en,(fr,de,ia)] >< Space is limited
/ |`-' -=-=-=-=-=-=-=-=-=-=-=-=-=-=-= <> In a haiku, so it's hard
(7_\\ http://www.nothingisreal.com/ >< To finish what you

[Barbara de Zoete]

Re: Centering text within a line

On Thu, 17 Feb 2005 11:35:15 +0100, Tristan Miller
<psychonaut@not hingisreal.com> wrote:
[color=blue]
> Is there any way of using CSS alone to make an object centered and with a
> dotted or dashed line extending on either side to the borders of the
> enclosing object? For example, I have the HTML heading
>
> <h1 class="centerli ne">Foo</h1>
>
> and I would like it to display as follows:
>
> ------------------------------- Foo --------------------------------
>[/color]

I would create a small image, like dots.png, and use it as a background:

..centerline
/*btw it is wise to use something that represents the semantic meaning of
the class, the reason for creating the class, something like
'important-header'; otherwise if anywhere in the future you change your
mind on visual effects for this header 'Foo', like you want it to be a use
red font, right aligned, you're stuck with this 'centerline' thing which
really doesn't mean a thing then anymore; a semanticly meaningful class
name lets you recycle your markup code easily*/
{
text-align: center;
background-image: url(dots.png);
background-position: center;
background-repeat: repeat-x;
}


--
,-- --<--@ -- PretLetters: 'woest wyf', met vele interesses: ----------.
| weblog | http://home.wanadoo.nl/b.de.zoete/_private/weblog.html |
| webontwerp | http://home.wanadoo.nl/b.de.zoete/html/webontwerp.html |
|zweefvliegen | http://home.wanadoo.nl/b.de.zoete/html/vliegen.html |
`-------------------------------------------------- --<--@ ------------'

[Els]

Re: Centering text within a line

Tristan Miller wrote:
[color=blue]
> Greetings.
>
> Is there any way of using CSS alone to make an object
> centered and with a dotted or dashed line extending on
> either side to the borders of the enclosing object? For
> example, I have the HTML heading
>
> <h1 class="centerli ne">Foo</h1>
>
> and I would like it to display as follows:
>
> -------------------- Foo -------------------[/color]

h1.centerline{
text-align:center;
background-image:url(dot-or-dash.jpg);
background-position:center ;
background-repeat:repeat-x;
}
h1.centerline span{background-color:white;}

<h1 class="centerli ne"><span>Foo </span></h1>


--
Els http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -
Now playing: Saxon - Wheels Of Steel

[Tristan Miller]

Re: Centering text within a line

Greetings.

In article <Xns9600783BEF6 30Els@130.133.1 .4>, Els wrote:[color=blue][color=green]
>> Is there any way of using CSS alone to make an object
>> centered and with a dotted or dashed line extending on
>> either side to the borders of the enclosing object? For
>> example, I have the HTML heading
>>
>> <h1 class="centerli ne">Foo</h1>
>>
>> and I would like it to display as follows:
>>
>> -------------------- Foo -------------------[/color]
>
> h1.centerline{
> text-align:center;
> background-image:url(dot-or-dash.jpg);
> background-position:center ;
> background-repeat:repeat-x;
> }
> h1.centerline span{background-color:white;}
>
> <h1 class="centerli ne"><span>Foo </span></h1>[/color]

Thanks, but I'm developing this CSS file as a template for other users and
therefore can't guarantee that they'll have any particular image file. I
need this to be done in CSS alone, without reference to other files.

Regards,
Tristan

--
_
_V.-o Tristan Miller [en,(fr,de,ia)] >< Space is limited
/ |`-' -=-=-=-=-=-=-=-=-=-=-=-=-=-=-= <> In a haiku, so it's hard
(7_\\ http://www.nothingisreal.com/ >< To finish what you

[Rijk van Geijtenbeek]

Re: Centering text within a line

On Thu, 17 Feb 2005 12:31:12 +0100, Tristan Miller
<psychonaut@not hingisreal.com> wrote:[color=blue]
> In article <Xns9600783BEF6 30Els@130.133.1 .4>, Els wrote:[/color]
[color=blue][color=green][color=darkred]
>>> Is there any way of using CSS alone to make an object
>>> centered and with a dotted or dashed line extending on
>>> either side to the borders of the enclosing object? For
>>> example, I have the HTML heading
>>>
>>> <h1 class="centerli ne">Foo</h1>[/color][/color][/color]

[color=blue][color=green]
>> h1.centerline{
>> text-align:center;
>> background-image:url(dot-or-dash.jpg);
>> background-position:center ;
>> background-repeat:repeat-x;
>> }
>> h1.centerline span{background-color:white;}
>>
>> <h1 class="centerli ne"><span>Foo </span></h1>[/color]
>
> Thanks, but I'm developing this CSS file as a template for other users
> and therefore can't guarantee that they'll have any particular image
> file. I
> need this to be done in CSS alone, without reference to other files.[/color]

I use DIV containers for the sections on my pages, and the section headers
go on top of the container edge. Something like this:

<style type="text/css">
body {
margin: 0; padding: 2.5%;
position: relative;
}

div {
margin: 1.5em 0 0; padding: 1.5em;
border: 1px dashed #aaa;
position: relative;
z-index: 1;
}

h3 {
margin: 0; padding: 0;
font-size: 1.5em;
position: absolute;
top: -.7em;
width: 95%;
text-align: center;
z-index: 3;
}

p {
text-align: center;
}
</style>

<div>
<h3>Headline</h3>
<p>Content</p>
</div>


--
Rijk van Geijtenbeek

The Web is a procrastination apparatus:
It can absorb as much time as is required to ensure that you
won't get any real work done. - J.Nielsen

[Tristan Miller]

Re: Centering text within a line

Greetings.

In article <op.smcbwhwbcvf ty8@news.indivi dual.net>, Rijk van Geijtenbeek
wrote:[color=blue]
> I use DIV containers for the sections on my pages, and the section
> headers go on top of the container edge. Something like this:[/color]

I think I can adapt this; thanks!

Regards,
Tristan

--
_
_V.-o Tristan Miller [en,(fr,de,ia)] >< Space is limited
/ |`-' -=-=-=-=-=-=-=-=-=-=-=-=-=-=-= <> In a haiku, so it's hard
(7_\\ http://www.nothingisreal.com/ >< To finish what you

[Robin Rattay]

Re: Centering text within a line

Tristan Miller wrote:[color=blue]
> Is there any way of using CSS alone to make an object centered and with a
> dotted or dashed line extending on either side to the borders of the
> enclosing object? For example, I have the HTML heading
>
> <h1 class="centerli ne">Foo</h1>
>
> and I would like it to display as follows:
>
> ------------------------------- Foo --------------------------------[/color]

How about this:

h1 {
border-bottom: 5px dashed red;
text-align: center;

padding: 0;
margin: -0.5em 0 0.5em 0;
}
h1 span {
background-color: white; /* same as general background-color */
position: relative;

top: 0.5em;
padding: 0 1em;
}
</style>

<h1><span>Foo </span></h1>

Robin

[Ali Babba]

Re: Centering text within a line

Tristan Miller wrote:
[color=blue]
> Greetings.
>
> In article <op.smcbwhwbcvf ty8@news.indivi dual.net>, Rijk van Geijtenbeek
> wrote:
>[color=green]
>>I use DIV containers for the sections on my pages, and the section
>>headers go on top of the container edge. Something like this:[/color]
>
>
> I think I can adapt this; thanks!
>
> Regards,
> Tristan
>[/color]


a variation on the idea of Rijk:

..line {
border-bottom: 1px dashed black;
background-color: #ffeeee;
height: 10px;
font-size: 0; /* lower-limit-height-hack for IE */
}
..text {
display: table; /* to center the text */
margin-left: auto; /* " */
margin-right: auto; /* " */
margin-top: -0.6em;
width: 0%; /* fix for IE */
background-color: white;
}

<body>
<div class=line>&nbs p;</div>
<div class=text>bffb la</div>
</body>

gl
martin

[Rijk van Geijtenbeek]

Re: Centering text within a line

On Thu, 17 Feb 2005 15:07:15 +0100, Ali Babba <AliBabba@40Ban dits.com>
wrote:
[color=blue]
> a variation on the idea of Rijk:
>
> .line {
> border-bottom: 1px dashed black;
> background-color: #ffeeee;
> height: 10px;
> font-size: 0; /* lower-limit-height-hack for IE */
> }
> .text {
> display: table; /* to center the text */
> margin-left: auto; /* " */
> margin-right: auto; /* " */
> margin-top: -0.6em;
> width: 0%; /* fix for IE */
> background-color: white;
> }
>
> <body>
> <div class=line>&nbs p;</div>
> <div class=text>bffb la</div>
> </body>[/color]

Maybe you can even use <hr> for the line element, I haven't tried that
myself because I wanted a DIV for each section anyway. Using a DIV for a
header is not a good idea, it is easy enough to remove the default padding
and margin and size of headers to control its placement.

You'll find that there are little if any unneeded elements on my pages,
I'm trying to code as semantic as possible.
For example at http://people.opera.com/rjk/opera/

--
Rijk van Geijtenbeek

The Web is a procrastination apparatus:
It can absorb as much time as is required to ensure that you
won't get any real work done. - J.Nielsen