2015-09-04 5 views
5

Mein Problem bezieht sich auf Ebook-Formatierung, aber die Codierung ist sehr ähnlich zu HTML und CSS für das Web. Ich habe eine Box für Text ähnlich einem Zitat, das als "{text text text}" angezeigt wird. Ich brauche diese Elemente, um horizontal auszurichten und weiterhin auszurichten, wenn sich die Schriftgröße ändert.html & CSS für Ebooks align Bilder und Text

üBERARBEITET HTML und CSS:

HTML:

<?xml version="1.0" encoding="UTF-8"?> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> 
<html xml:lang="en-gb" xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title>Lies They Teach in School</title> 
<link rel="stylesheet" type="text/css" href="stylesheet.css"/> 

</head> 
<body> 
<h2 class="h2">O<small>UR</small> F<small>IRST</small> P<small>RESIDENT</small></h2> 

<div id="bigbox"> 
    <div class="textbox"> 
    <div class="imageleft"><img src="images/c1.jpg" alt="Image"/></div> 
    <div class="imageright"><img src="images/c2.jpg" alt="Image"/></div> 
    <div class="noindentt">George Washington was the first president of our country.<br/><b>Don&#8217;t you believe it</b>.</div> 
    </div> 
</div> 

<p class="indent">In the formative days of our union, dating from September 1774, seven men, beginning with Peyton Randolph of Virginia, held the office of president of the Continental Congress, the first functioning government of our fledgling nation.</p> 
<p class="indent">With the adoption of the Articles of Confederation, in March 1781, the Continental Congress officially became the &#8220;United States, in Congress Assembled,&#8221; marking the beginning of transition from an alliance of colonies to a central government. John Hanson of Maryland was unanimously chosen as the first presiding officer serving a full term under the Articles. Because of his prominence in the Revolution and his influence in the Congress, other potential candidates declined to run against him. Hanson is thus considered by many historians as the first &#8220;president of the United States.&#8221;</p> 
<p class="indent">Hanson was the head of the government, presiding over Congress but without true executive powers, which were exercised by the Congress as a whole. Seven other &#8220;presidents&#8221; followed Hanson, including Richard Henry Lee of Virginia and John Hancock of Massachusetts, each serving an average of one year.</p> 
<p class="indent">But the government under the Articles of Confederation was too inefficient for the young amalgamated country, relinquishing too much power to the several states. In response to the need for a stronger central authority, the Congress assembled for the last time in March 1789 and produced the Constitution of the United States, naming George Washington as president.</p> 
<p class="indent">Thus, while George Washington was the first &#8220;president of the United States&#8221; under the Constitution, in actuality he was preceded by eight others who held that title.</p> 
</body> 
</html> 

Ich griff nur den oberen Teil des CSS, die auf dieser Seite bezieht.

CSS:

bigbox 
{ 
margin-right:0em; 
margin-left:0em; 
margin-top:5em; 
margin-bottom:1em; 
padding-right:1.5em; 
padding-left:1.5em; 
border-color:#EF3F35; 
} 
.textbox 
{ 
width:100%; 
} 
.imageleft 
{ 
float:left; 
height:100px; 
} 
.imageright 
{ 
float:right; 
height:100px; 

} 
.noindentt 
{ 
font-size:1em; 
padding-left:0.5em; 
padding-right:0.5em; 
padding-top:1em; 
padding-bottom:1em; 
text-align:justify; 
background:green; 

Wenn ich meinen Code in einem Web-Browser anzeigen, sieht es gut aus. Aber wenn ich eine Vorschau in Adobe Digital Editions als epub anschaue, bekomme ich den Header an der richtigen Stelle, dann das Textfeld als nächstes, dann die Bilder (die Klammern) darunter. Hier ist ein Screenshot des epub, wenn das hilft? enter image description here

+0

Sind Sie bereit, Bootstrap zu verwenden? –

+0

Hallo Bipashant - Ich komme kaum durch HTML & CSS: (Ich habe keine Kenntnis von Bootstrap. – mizsue

+0

@ Maximillian Laumeister - danke, ich glaube, ich habe meine Revisionen zum ursprünglichen Beitrag hinzugefügt .... Ich hoffe:) – mizsue

Antwort

1

Versuchen Sie unter Code und es funktioniert.

HTML:

<div id="bigbox" > 
    <div class="textbox"> 
    <div class="imageleft"><img src="images/c1.jpg" alt="Image"/></div> 
    <div class="imageright"><img src="images/c2.jpg" alt="Image"/></div> 
    <div class="noindentt">George Washington was the first president of our country.<br/><b>Don&#8217;t you believe it</b>.</div> 
    </div> 
</div> 

Css:

#bigbox 
{ 
margin-right:0em; 
margin-left:0em; 
margin-top:0.7em; 
margin-bottom:2.5em; 
padding-right:1.5em; 
padding-left:1.5em; 
border-color:#EF3F35; 
} 
.textbox 
{ 
width:100% 
} 
.imageleft 
{ 
float:left; 
background:yellow; 
height:100px; 
} 
.imageright 
{ 
float:right; 
background:red; 
    height:100px; 
} 
.noindentt 
{ 
font-size:1em; 
padding-left:2em; 
padding-right:2em; 
text-align:justify; 
margin-bottom:0em; 
background:green; 
    height:100px; 
} 
+0

Arun Kumar M - Danke, dass du dir das angeschaut hast. Ich habe diese Anpassungen mit teilweise Erfolg gemacht. Die Bilder sind perfekt und ausgerichtet. Das Problem besteht jetzt darin, dass die Textbox oben auf der Seite gestartet wurde, anstatt oben auf den Bildern zu sein. Außerdem gibt es eine große Lücke zwischen den beiden Textzeilen. – mizsue

+0

Ich habe meine Datei als epub getestet und die Bilder bleiben ausgerichtet, unabhängig von der Schriftgröße, das ist ein großer Fortschritt. Der Text in den Bildern bleibt zusammen, also keine Lücke - das ist großartig. Das Problem, das ich immer noch habe, ist, dass das Textfeld zum Anfang der Seite springt und eine Überschrift vollständig ausfüllt. Wie kann ich die Textbox an den oberen Rand der Bilder ausrichten? – mizsue

+0

Arun Kumar M - Ich habe das Rand-Top in Bigbox weiter auf 5em angepasst und es hat meine Textbox jetzt in die richtige Position gebracht. Das letzte Problem besteht darin, die Bilder so auszurichten, dass sie am oberen Rand des Textfelds ausgerichtet sind und nicht unter dem Textfeld angezeigt werden. – mizsue

2

Nach quälenden, geisttötende, line-by-line Justieren - ich das Problem gelöst. In der html "bigbox" entfernte ich "noindent" von "bigbox" div und änderte es zurück in p tag; musste Anpassungen in der Polsterung usw. vornehmen, aber es hat zu arbeiten. Danke @Arun Kumar M für deine Hilfe bei der Bildausrichtung - das hat enorm geholfen! Ich bin fast fertig mit meiner Arbeit an diesem Projekt - puh!

+0

Das ist großartig @mizsue und Sie, sehr willkommen –