Codice da incollare
style.css
h1.titolo{
display: block;
text-align: center;
margin-top: 0;
padding-bottom: 2em;
} |
Importante per far si che il titolo del capitolo venga centrato. Se si applica al solo h1 non funziona.
---------------- 0 ---------------
Se si vuole visualizzare un'immagine in una pagina di testo bisoga aggiungere queste classi css. In questo caso abbiamo un'immagine di 1200x1600 pixel che deve essere visualizzata dopo un titolo ed entrabe devono rimanere nella stessa pagina.
Devi dire al reader:
“Questo รจ un unico blocco visivo, non due elementi separati”
Nell'xhtml/html:
<body class="img-page" id="toc_titolo">
<div class="title-block">
<h1 class="img-title">TITOLO</h1>
<img src="tito.jpg" alt="Titolo"/>
</div>
</body>
|
Nel css:
body.img-page {
margin: 0;
padding: 0;
text-align: center;
}
.img-title {
margin: 0.2em 0;
}
body.img-page img {
max-width: 100%;
max-height: 85vh; /* spazio lasciato al titolo */
width: auto;
height: auto;
display: block;
margin: 0 auto;
} |
Nel Toc:
L’ID del TOC non deve stare sull’<h1>, ma sul <body> o sul <div> contenitore:
<li><a href="index_split_001.html#toc_titolo">TITOLO</a></li> |
Se invece volessi visualizzare solo l'immagine a piena pagina, in tal caso basta
Nell'xhtml/html:
<body class="img-page">
<img src="tito.jpg" alt="Titolo"/>
</body> |
Nel css:
body.img-page {
margin: 0;
padding: 0;
text-align: center;
}
body.img-page img {
max-width: 100%;
width: auto;
height: auto;
display: block;
margin: 0 auto;
} |
Nel Toc:
<li><a href="index_split_001.html">TITOLO</a></li> |
---------------- 0 ---------------
titlepage.xhtml
<?xml version="1.0" encoding="utf-8"?>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="it">
<head>
<title>Cover</title>
<style type="text/css">
body { margin:0; padding:0; text-align:center; }
img { max-width:100%; height:auto; display:block; margin:auto; }
</style>
</head>
<body epub:type="cover">
<img src="cover.jpg" alt="Copertina"/>
</body>
</html> |
content.opf
<package xmlns="http://www.idpf.org/2007/opf" version="3.0" unique-identifier="uuid_id"
prefix="calibre: https://calibre-ebook.com">
<metadata xmlns:dc="http://purl.org/dc/elements/1.1/">
<dc:identifier id="uuid_id">uuid:ca75c6be-6def-4bce-a8fd-e1bf3f6e4ed2</dc:identifier>
<dc:title>Lost Face</dc:title>
<dc:creator id="aut">Jack London</dc:creator>
<dc:language>it</dc:language>
<meta property="dcterms:modified">2026-01-22T10:00:00Z</meta>
</metadata>
<manifest>
<item id="titlepage" href="titlepage.xhtml" media-type="application/xhtml+xml"/>
<item id="cap1" href="cap1.xhtml" media-type="application/xhtml+xml"/>
<item id="cap2" href="cap2.xhtml" media-type="application/xhtml+xml"/>
<item id="cap3" href="cap3.xhtml" media-type="application/xhtml+xml"/>
<item id="cap4" href="cap4.xhtml" media-type="application/xhtml+xml"/>
<item id="cap5" href="cap5.xhtml" media-type="application/xhtml+xml"/>
<item id="cap6" href="cap6.xhtml" media-type="application/xhtml+xml"/>
<item id="cap7" href="cap7.xhtml" media-type="application/xhtml+xml"/>
<item id="nav" href="nav.xhtml" media-type="application/xhtml+xml" properties="nav"/>
<item id="css" href="style.css" media-type="text/css"/>
<item id="cover-image" href="cover.jpg" media-type="image/jpeg" properties="cover-image"/>
</manifest>
<spine>
<itemref idref="titlepage"/>
<itemref idref="cap1"/>
<itemref idref="cap2"/>
<itemref idref="cap3"/>
<itemref idref="cap4"/>
<itemref idref="cap5"/>
<itemref idref="cap6"/>
<itemref idref="cap7"/>
</spine>
</package>
|
nav.xhtml
<?xml version='1.0' encoding='utf-8'?>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:epub="http://www.idpf.org/2007/ops"
lang="it" xml:lang="it">
<head>
<title>Navigation</title>
</head>
<body>
<nav epub:type="toc">
<ol>
<li><a href="titlepage.xhtml">Copertina</a></li>
<li><a href="cap1.xhtml">FACCIA PERSA</a></li>
<li><a href="cap2.xhtml">FIDUCIA</a></li>
<li><a href="cap3.xhtml">PER ACCENDERE UN FUOCO</a></li>
<li><a href="cap4.xhtml">QUEL POSTO</a></li>
<li><a href="cap5.xhtml">FLUSSO D'ORO</a></li>
<li><a href="cap6.xhtml">LA SCOMPARSA DI MARCUS O'BRIEN</a></li>
<li><a href="cap7.xhtml">L'INGEGNO DI PORPORTUK</a></li>
</ol>
</nav>
</body>
</html>
|
|