View Single Post
Old 12-09-2012, 10:45 PM   #1
Rand Brittain
Bookmaker
Rand Brittain ought to be getting tired of karma fortunes by now.Rand Brittain ought to be getting tired of karma fortunes by now.Rand Brittain ought to be getting tired of karma fortunes by now.Rand Brittain ought to be getting tired of karma fortunes by now.Rand Brittain ought to be getting tired of karma fortunes by now.Rand Brittain ought to be getting tired of karma fortunes by now.Rand Brittain ought to be getting tired of karma fortunes by now.Rand Brittain ought to be getting tired of karma fortunes by now.Rand Brittain ought to be getting tired of karma fortunes by now.Rand Brittain ought to be getting tired of karma fortunes by now.Rand Brittain ought to be getting tired of karma fortunes by now.
 
Posts: 260
Karma: 1964738
Join Date: Sep 2010
Device: Cybook Opus
Two Neighboring SVG Tags

So, I've been putting together a book with frequent title/icon combinations, and I've been putting the icon PNGs in an SVG tag to make sure they size right. So far, it's worked pretty well.

But now, I've run into a title with two icons, and I've been trying to figure out how to make them display side-by-side. They don't seem to want to do it.

Here's the title page:

Code:
<h2 class="iconic-title" title="Adversity">O<span class="small-caps">UTSIDE-</span>D<span class="small-caps">UST</span> T<span class="small-caps">REATMENT</span></h2>

  <div class="iconic-image-left">
    <svg xmlns="http://www.w3.org/2000/svg" height="20%" preserveAspectRatio="xMidYMid meet" version="1.1" viewBox="0 0 511 553" xmlns:xlink="http://www.w3.org/1999/xlink">
      <image height="553" width="511" xlink:href="../Images/Pastoral.png"></image>
    </svg>
  </div>

  <div class="iconic-image-right">
    <svg xmlns="http://www.w3.org/2000/svg" height="20%" preserveAspectRatio="xMidYMid meet" version="1.1" viewBox="0 0 475 542" xmlns:xlink="http://www.w3.org/1999/xlink">
      <image height="542" width="475" xlink:href="../Images/Heroic.png"></image>
    </svg>
  </div>

  <p class="iconic-marker">Shared Action or Adversity</p>
And here's the CSS:

Code:
.iconic-title {
	page-break-before: always;
	padding-top: 20%;
}

.iconic-image {
	margin-left: auto;
	margin-right: auto;
	margin-top: 1.0em;
	max-width: 30%;
}

.iconic-image-left {
	margin-top: 1.0em;
	max-width: 50%;
	float: left;
}

.iconic-image-right {
	margin-top: 1.0em;
	max-width: 50%;
	float: right;
}

.iconic-marker {
	font-style: italic;
	text-align: center;
	text-indent: 0;
	font-size: 85%;
	margin-top: 1.0em;
	page-break-after: always;
}
What am I doing wrong?
Rand Brittain is offline   Reply With Quote