How to add a horizontal line under the header?

[mzso]

Hi!

I'm trying to add a horizontal line to the header, during conversion (to pdf). I tried everything I found and could think (<hr>, underline, bottom border)of but I can't get a line under the header. Only under the header text.

This is my header:

<div style="font-size:x-small;"><p style="float:left;">_TITLE_</p><p style="float:right;"><i>_SECTION_</i></p></div>

Any ideas?

[theducks]

Originally Posted by mzso

Hi!

I tried everything I found and could think (<hr>, underline, bottom border)of but I can't get a line under the header. Only under the header text.

This is my header:

<div style="font-size:x-small;"><p style="float:left;">_TITLE_</p><p style="float:right;"><i>_SECTION_</i></p></div>

Any ideas?

BOXES (AKA the box model)
Where did you put the HR? or border?

<div>
<p>
</p>
</div>

If the DIV sets the overall block margins, that is where it belongs

(FWIW I don't style inline since I learned about CSS)

[mzso]

Originally Posted by theducks

BOXES (AKA the box model)
Where did you put the HR? or border?

<div>
<p>
</p>
</div>

If the DIV sets the overall block margins, that is where it belongs

?

Everywhere... With the div it doesn't work. The border will always be at the top of the page.

Originally Posted by theducks

(FWIW I don't style inline since I learned about CSS)

There's only an input line for this so no other possibility...

[deback]

Did you try one of the following?

<hr width="100px">

or

<hr width="50%">

(Change the numbers above to whatever you want...)

I don't understand the difference in your question between the "header" and the "header text."

[mzso]

Originally Posted by deback

Did you try one of the following?

<hr width="100px">

or

<hr width="50%">

(Change the numbers above to whatever you want...)

I don't understand the difference in your question between the "header" and the "header text."

It doesn't work. It won't extend to the width of the page.

The difference would be that wether the line extends all the way through the width of the page (minus margins).

[jackie_w]

Maybe I'm totally misunderstanding the problem, but doesn't a plain, simple <hr/> tag display a 100%-width line?

[JSWolf]

Where did you get that really really horrible code?

[theducks]

Originally Posted by mzso

?

Everywhere... With the div it doesn't work. The border will always be at the top of the page.



There's only an input line for this so no other possibility...

SHOW your code that fails. The entire block it is supposed to apply to.
<hr /> fills the space between margins of the current block

And I agrre with the Wolf. Pretty poor coding practice

[mzso]

Originally Posted by JSWolf

Where did you get that really really horrible code?

From the documentation, linked from within the program.

Feel free to suggest something better.

Originally Posted by jackie_w

Maybe I'm totally misunderstanding the problem, but doesn't a plain, simple <hr/> tag display a 100%-width line?

Not in this case it seems. But feel free to combine <hr> with the code I have in a way that works. (Or present an analogous one, which works with <hr>)

[mzso]

Originally Posted by theducks

SHOW your code that fails. The entire block it is supposed to apply to.
<hr /> fills the space between margins of the current block

I already shared my code in the opening post. I tried to add a line dozens of ways, neither of which worked. If you have a (working) way to add a horizontal line to it via <hr> (or anything else) show it.

Originally Posted by theducks

And I agrre with the Wolf. Pretty poor coding practice

You can agree all you want. It's a scarcely modified version of the example in the documentation. (I changed the field to be show.)

[HarryT]

This is not a Calibre question. Moved to the ePub forum.

[JSWolf]

Originally Posted by mzso

From the documentation, linked from within the program.

Feel free to suggest something better.

Better is using HTML/CSS. You might have to change the location of the stylesheet in the HTML to fit yours layout.

CSS Code:

body {
  widows: 1;
  orphans: 1;
  margin-top: 0;
  margin-right: 0;
  margin-bottom: 0;
  margin-left: 0;
  text-align: justify;
}
h2 {
  margin-top: 0.8em;
  margin-bottom: 0;
  text-align: center;
}
hr {
  border-top: 2px solid;
  margin-bottom: 1em;
}
p {
  margin-top: 0;
  margin-bottom: 0;
  text-indent: 1.2em;
}
.noindent {
  text-indent: 0;
}

HTML Code:

<?xml version="1.0" encoding="utf-8"?>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:epub="http://www.idpf.org/2007/ops">
<head>
<title>Dark in Death</title>
<link href="../styles/stylesheet.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<h2>TITLE</h2>
<hr/>
<p class="noindent">This is the first paragraph</p>
<p>This is the second paragraph</p>
</body>
</html>

[mzso]

Originally Posted by HarryT

This is not a Calibre question. Moved to the ePub forum.

This is definitely not an epub question. It was in the conversion section for a reason. I have this issue when I try to convert to PDF. With Calibre of course.
(Though I concede that I neglected to mention this info in the OP)

[HarryT]

It's a book coding question, though, not a conversion question.

[mzso]

Originally Posted by JSWolf

Better is using HTML/CSS. You might have to change the location of the stylesheet in the HTML to fit yours layout.

CSS Code:

body {
  widows: 1;
  orphans: 1;
  margin-top: 0;
  margin-right: 0;
  margin-bottom: 0;
  margin-left: 0;
  text-align: justify;
}
h2 {
  margin-top: 0.8em;
  margin-bottom: 0;
  text-align: center;
}
hr {
  border-top: 2px solid;
  margin-bottom: 1em;
}
p {
  margin-top: 0;
  margin-bottom: 0;
  text-indent: 1.2em;
}
.noindent {
  text-indent: 0;
}

HTML Code:

<?xml version="1.0" encoding="utf-8"?>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:epub="http://www.idpf.org/2007/ops">
<head>
<title>Dark in Death</title>
<link href="../styles/stylesheet.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<h2>TITLE</h2>
<hr/>
<p class="noindent">This is the first paragraph</p>
<p>This is the second paragraph</p>
</body>
</html>

Okay. I don't think I can do this. (Sorry, HarryT's post made me realize that I wasn't near clear enough in my OP, which I now updated. )

There's only a simple one line "header template" input field, for headers in the pdf output section, which I was talking about.