Quote:
Originally Posted by HeartWare
From what I've read elsewhere, shouldn't it be
.image {width=50%; height=auto; float:left}
and if not, then why not (just asking to learn).
|
If you leave the height off it defaults to "auto" and keeps the proper aspect ratio. Use it, or not, at your discretion.
Quote:
Originally Posted by HeartWare
And is it the img {width:100%; max-width: 1000px *or whatever the width of your image*} part that makes the 50% be 50% of the page width and not the image width?
|
The <div> width of 50% is telling it to take up 50% of the container… in this case the <body>. The <img> width is telling it to take up 100% of its container… the <div>… which is half the <body>. The float on the <div> allows the following elements to take up the remaining space and flow around the <div>.
Quote:
Originally Posted by HeartWare
Also, where do I put the "Text, text" part - inside or outside the <div>? And should the <div> be embedded in a <p> or does the <div> replace the <p> ?
|
The <div> replaces the <p> in this case. Technically you could use either, but to be more semantically correct I’d use a <div> (for ePub2) since an image isn’t really a "paragraph". For ePub3 you could be even more semantically correct and use the <figure> and <figcaption> tags instead of the <div>.
For the ePub2 <div> example I would put the text right after the <img> inside the <div>, possibly surrounded by a <span>, but not necessarily. Then use the CSS to style it however you want.
Code:
<div class="image"><img src="…" alt="…"/><span>Some Caption Text</span></div>
.image {width:50%; float:left}
.image img {width:100%; max-width:1000px}
.image span{display:block; font-size:.6em; font-style:italic; margin-top:.5em;
text-align:center; yadda-yadda}
EDIT: Be aware that having the text inside the <div> does
NOT guarantee the text and image will be kept together on the same "screen" that is entirely dependent on factors that you can’t control. You can use CSS to tell the renderer what your preferences are (eg. page-break-inside: avoid) but it isn’t required to follow your request. The only way to guarantee they are kept together is to include the caption as part of the image (using photoshop or some image editor) but there are reasons why that technique is not recommended.