473,320 Members | 1,993 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,320 software developers and data experts.

Centering text within a line

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="centerline">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
Jul 21 '05 #1
8 2752
On Thu, 17 Feb 2005 11:35:15 +0100, Tristan Miller
<ps********@nothingisreal.com> wrote:
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="centerline">Foo</h1>

and I would like it to display as follows:

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


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 |
`-------------------------------------------------- --<--@ ------------'
Jul 21 '05 #2
Els
Tristan Miller wrote:
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="centerline">Foo</h1>

and I would like it to display as follows:

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


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="centerline"><span>Foo</span></h1>
--
Els http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -
Now playing: Saxon - Wheels Of Steel
Jul 21 '05 #3
Greetings.

In article <Xn*****************@130.133.1.4>, Els wrote:
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="centerline">Foo</h1>

and I would like it to display as follows:

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


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="centerline"><span>Foo</span></h1>


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
Jul 21 '05 #4
On Thu, 17 Feb 2005 12:31:12 +0100, Tristan Miller
<ps********@nothingisreal.com> wrote:
In article <Xn*****************@130.133.1.4>, Els wrote:

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="centerline">Foo</h1>

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="centerline"><span>Foo</span></h1>


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.


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

Jul 21 '05 #5
Greetings.

In article <op***************@news.individual.net>, Rijk van Geijtenbeek
wrote:
I use DIV containers for the sections on my pages, and the section
headers go on top of the container edge. Something like this:


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
Jul 21 '05 #6
Tristan Miller wrote:
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="centerline">Foo</h1>

and I would like it to display as follows:

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


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
Jul 21 '05 #7
Tristan Miller wrote:
Greetings.

In article <op***************@news.individual.net>, Rijk van Geijtenbeek
wrote:
I use DIV containers for the sections on my pages, and the section
headers go on top of the container edge. Something like this:

I think I can adapt this; thanks!

Regards,
Tristan

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>&nbsp;</div>
<div class=text>bffbla</div>
</body>

gl
martin
Jul 21 '05 #8
On Thu, 17 Feb 2005 15:07:15 +0100, Ali Babba <Al******@40Bandits.com>
wrote:
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>&nbsp;</div>
<div class=text>bffbla</div>
</body>


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

Jul 21 '05 #9

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

3
by: Jonah Bishop | last post by:
I have a puzzling problem with centering text, and I'm hoping that someone here can help me out. First of all, let me state that I am using XHTML 1.0 Strict and CSS for all layout purposes (no...
18
by: Heath | last post by:
Is it proper to center images in a <div> by using the text-align: center property? Or is there a better way?
3
by: Robert Latest | last post by:
Hello, me again. This time I'd like to align a DIV both horizontally and vertically centered within a larger DIV. The only alignment-relevant CSS property I could think of was text-align, and...
3
by: John Pote | last post by:
1. Horizontal centering a <divin browser window. The current trend seems to be to place page content in a fixed width area in the middle of the browser window. How is this achieved? If I use a...
5
by: Markus Ernst | last post by:
Hello This is a test example: http://www.markusernst.ch/anthracite/ http://www.markusernst.ch/anthracite/living_divani.html After googling and experimenting for several hours, I ended up...
2
by: rudicheow | last post by:
SHORT VERSION ============= I have a bunch of identical fixed-size single-celled tables that rest against each other horizontally thanks to "float:left". These tables are dynamically generated...
6
by: Michael7 | last post by:
Hi everyone, Me again! I'm having a problem centering a single line in a div. I have a news section that is a block of it's own, and centered. The text in the news section is left aligned of...
4
by: SAL | last post by:
Hello, is there a way to menu control dynamically center itself horizontally on a page? I have placed a menu control in a panel control (no ajax) and would like it to center itself. Depending on...
14
by: issentia | last post by:
I'm working on this site: http://www.essenceofsoy.com/redesign/index2.html and I'm having a few problems with getting the layout exactly right. 1) When the menu items are rolled over, they...
0
by: DolphinDB | last post by:
Tired of spending countless mintues downsampling your data? Look no further! In this article, you’ll learn how to efficiently downsample 6.48 billion high-frequency records to 61 million...
0
by: ryjfgjl | last post by:
ExcelToDatabase: batch import excel into database automatically...
1
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: ArrayDB | last post by:
The error message I've encountered is; ERROR:root:Error generating model response: exception: access violation writing 0x0000000000005140, which seems to be indicative of an access violation...
1
by: PapaRatzi | last post by:
Hello, I am teaching myself MS Access forms design and Visual Basic. I've created a table to capture a list of Top 30 singles and forms to capture new entries. The final step is a form (unbound)...
0
by: CloudSolutions | last post by:
Introduction: For many beginners and individual users, requiring a credit card and email registration may pose a barrier when starting to use cloud servers. However, some cloud server providers now...
1
by: Shællîpôpï 09 | last post by:
If u are using a keypad phone, how do u turn on JavaScript, to access features like WhatsApp, Facebook, Instagram....
0
by: Faith0G | last post by:
I am starting a new it consulting business and it's been a while since I setup a new website. Is wordpress still the best web based software for hosting a 5 page website? The webpages will be...
0
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 3 Apr 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 former...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.