Menu
My problem relates to ebook formatting but the coding is very similar to html and css for web. I have a box for text similar to a quotation which is displayed as " { text text text } ". I need these elements to align horizontally and continue to align when the font size changes.
REVISED html and 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’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 “United States, in Congress Assembled,” 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 “president of the United States.”</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 “presidents” 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 “president of the United States” under the Constitution, in actuality he was preceded by eight others who held that title.</p>
</body>
</html>
I just grabbed the top section of the css which relates to this page.
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;
If I preview my code in a web browser, it looks good. But when I preview it in Adobe Digital Editions as an epub, I get the header in the right spot, then text box next, then the images (which are brackets) below that. Here is a a screen shot of the epub if that helps?
393
After excruciating, mind-numbing, line-by-line adjusting - I figured out the problem. In the html "bigbox" I removed "noindentt" from "bigbox" div and changed it back to p tag; had to make adjustments in the padding etc. but got it to work. Thank you @Arun Kumar M for your assistance with the image alignment - that helped tremendously! I'm almost finished my work on this project - whew!
194
Try below code and it is working.
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’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;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
