Quote:
Originally Posted by Dalegaard
Hello
I'm new to Sigil and I have a problem I was hoping someone who have an answer to.
I'm trying to create a line over a sub chapter heading but when I used the overline in text-decoration, the line is too close to the text and I don't know how to increase the distance between the text and the line.
I have also tried to use the border option but I don't know how to stop the border from going over the entire page width but only where the text is.
Hope it makes sense
|
This trick can be useful for you but I think it doesn't work in ADE; in K4NT works perfectly. In your css stylesheet, write the following:
Code:
h2 {
display: table; /*the key in order to get the top-line*/
font-size: 1.4em;
padding-top: 0.4em; /*here you control the gap between the text and the top-line*/
margin: -0.35em auto 2em; /*the complement of the key*/
border-top: 2px solid black;
}
p {
font-size: 1em;
text-align: justify;
text-indent: 0;
}
p + p {
text-indent: 1em;
}
.center {
text-align: center;
}
.bold {
font-weight: bold;
}
Now in your .html file write:
Code:
<body>
<p class="center bold">CHAPTER 1</p>
<h2>BLA BLA BLA BLA BLA</h2>
<p>...</p>
<p>...</p>
...
</body>
As you can see, the key is to display the text with the top-line AS A TABLE. And you center the table by applying margin-left and margin-right as "auto". With that you get what you want
Also you can use, alternatively, the following styles:
Code:
p {
font-size: 1em;
text-align: justify;
text-indent: 0;
}
p + p {
text-indent: 1em;
}
.top_line {
display: table; /*the key in order to get the top-line*/
font-size: 1.4em;
font-weight: bold;
text-indent: 0;
padding-top: 0.4em; /*here you control the gap between the text and the top-line*/
margin: -0.35em auto 2em; /*the complement of the key*/
border-top: 2px solid black;
}
.center {
text-align: center;
}
.bold {
font-weight: bold;
}
And in your .html file:
Code:
<body>
<p class="center bold">CHAPTER 1</p>
<p class="top_line">BLA BLA BLA BLA BLA</p>
<p>...</p>
<p>...</p>
...
</body>
Below you can see a screenshot of my Kindle and I attach the respective .epub.
Regards
Rubén