Help with Chapter seperators (lines underneath chapter headings)

[indieauthor83]

Hi,

I can't figure out how to create bold lines beneath chapter headings.

I've spotted many kindlebooks that make use of these, but I have no idea how they do it!

I am able to use a simple underscore and run it along the page, but even when this is (h1 size) it doesn't look that bold.

I've spotted books that use fancy lines too. If anyone can help me with this, it would be much appreciated. Thanks!

Sarah.

[JSWolf]

A lot of times, those fancy lines are just graphic images.

[DiapDealer]

Horizontal rule (an hr tag) is probably what you're looking for (if you don't want to use a graphic). You can size it and style it how you like.

[GrannyGrump]

Try using <hr /> (horizontal rule) for simple straight lines.

You can style it in the CSS stylesheet to be any thickness you like, or a double line, etc, etc.

In the stylesheet, something like:

hr 
{border-top: 1pt solid; margin-top: .5em; margin-bottom: .5em}

or

hr
{border-top: 4pt double; margin-top: .5em; margin-bottom: .5em}

}

The greater the number of "points" (1pt, 4pt, 10pt), the thicker the line.

Then in the HTML, you could put something like this:

<h2>CHAPTER ONE</h2>
<hr />

W3schools have very helpful tutorials to learn about html and css.
for instance, a quick "try it yourself" tutorial on horizontal rules can be found here: https://www.w3schools.com/tags/tryit...hr_default_css


And JSWolf is correct in pointing out that the fancy swirly decorated lines are usually pictures.

[GrannyGrump]

Dang. DiapDealer posted while I was shooting screens.

[DiapDealer]

Originally Posted by GrannyGrump

Dang. DiapDealer posted while I was shooting screens.

Yeah, but you gave examples ... so you still win!

[indieauthor83]

Thanks everyone for your advice! This is much appreciated!



Sarah

[theducks]

and if you use the "Border" method.
Padding (same place) moves the line away from the text

Do look at the treatise on the "box Model"

[RbnJrg]

There are many ways to get what you want. Beside the previous answers, you can use something like the following:

1. In your .xhtml file

<h1>Title 1</h1>
<p class="border1">&nbsp;</p>

<h1>Title 2</h1>
<p class="border2">&nbsp;</p>

2. In your .css stylesheet

h1 {
    text-align: center;
    margin: 1em 0 0;
}

.border1 {
    height: 2px;
    border-top: 2px solid black;
    border-bottom: 2px solid black;
    margin: 0 25% 1em;
    width: 50%;
}

.border2 {
    height: 2px;
    background: black;
    margin: 0 25% 1em;
    width: 50%;
}

Here you can watch how it looks in Sigil:


Of course, you can change everything in the "border1" and "border2" classes (top margin, bottom margin, height (thickness of the line), background color, type of borders, border color, width of the lines, etc., etc.)

Regards
Rubén

[indieauthor83]

Thanks 'the ducks' and 'RbnJrg' for the extra tips.

Much appreciated!

Sarah