View Single Post
Old 08-23-2009, 02:59 PM   #40
afv011
Captain Penguin
afv011 ought to be getting tired of karma fortunes by now.afv011 ought to be getting tired of karma fortunes by now.afv011 ought to be getting tired of karma fortunes by now.afv011 ought to be getting tired of karma fortunes by now.afv011 ought to be getting tired of karma fortunes by now.afv011 ought to be getting tired of karma fortunes by now.afv011 ought to be getting tired of karma fortunes by now.afv011 ought to be getting tired of karma fortunes by now.afv011 ought to be getting tired of karma fortunes by now.afv011 ought to be getting tired of karma fortunes by now.afv011 ought to be getting tired of karma fortunes by now.
 
afv011's Avatar
 
Posts: 2,947
Karma: 2077653593
Join Date: May 2009
Location: Vancouver, BC
Device: Kobo Libra 2, Nook Glowlight
Hi,

this code will display a solid horizontal line before and after some text, which can be used for chapters.

Code:
h1 {text-align:center;}

.solid-line {
    padding-left: 6em;
    font-size: .4em;
    vertical-align: middle;
    line-height: 1em;
    margin-left: 1em;
    margin-right: 1em;
    position: relative;
    bottom: .25em;
    background-color: black;
}
You would use it like this:

Code:
<h1><span class="solid-line">&nbsp;</span>Chapter One<span class="solid-line">&nbsp;</span></h1>
This controls the width of the line:
padding-left: 6em;

This controls the separation between the line and the text:
margin-left: 1em;
margin-right: 1em;
afv011 is offline   Reply With Quote