I don't seem to be entering the right css code for three scenarios: image on left with text on right, image on right with text on left, and text below graphics. I don't want to use two colums or a table, and the code needs to work for both pdf and epub outputs.
My topic code is:
<?xml version="1.0" encoding="utf-8"?>
<html xmlns:MadCap="http://www.madcapsoftware.com/Schemas/MadCap.xsd" MadCap:onlyLocalStylesheets="True" class="topic">
<head> <link href="../Resources/Stylesheets/styles.css" rel="stylesheet" type="text/css" /></head>
<body>
<h1>Text to right of graphic</h1>
<p class="image">
<img src="../Resources/Images/RedX.png" class="left" style="width: 306px; height: 306px;" />
</p>
<p class="TextRight">First line of text to left of image. This is more text as well. All this is to the left of the image.</p>
<p class="TextRight">Second line of text to left of image.</p>
<p class="TextRight">Third line of text to left of image.</p>
<p class="imgclear">
First line of text below image.
</p>
<h1>Text to left of graphic</h1>
<p class="image">
<img src="../Resources/Images/RedX.png" class="right" style="width: 306px; height: 306px;" />
</p>
<p class="TextLeft">First line of text to left of image. This is more text as well. All this is to the left of the image. this is more text. Additional sentences here are added.</p>
<p class="TextLeft">Second line of text to left of image.</p>
<p class="TextLeft">Third line of text to left of image.</p>
<p class="imgclear">
First line of text below image.
</p>
</body>
</html>
My css code is:
h1
{
font-weight: normal;
line-height: 24pt;
margin-bottom: 20px;
margin-left: 0;
margin-right: 0;
margin-top: 0;
padding: 0;
frame-break-after: avoid;
mc-heading-level: 1;
color: #95a525;
frame-break-before: avoid;
page-break-before: avoid;
font-family: Calibri;
font-size: 20pt;
}
p
{
frame-break-before: avoid;
margin-top: 10px;
margin-bottom: 14px;
line-height: 13px;
font-family: Calibri;
font-size: 11pt;
}
p.image
{
float: left;
}
p.imgclear
{
clear: both;
}
p.TextRight
{
padding-left: 0.25in;
clear: none;
float: right;
}
p.TextLeft
{
clear: none;
float: left;
}
img
{
mc-thumbnail-max-height: auto;
width: auto;
max-width: 100%;
}
img.left
{
width: 50%;
text-align: left;
float: left;
margin-left: 15 px;
clear: none;
}
img.right
{
width: 50%;
text-align: right;
float: right;
margin-left: 15 px;
clear: none;
}
The result is:
Proper styles for side by side text and graphics
-
Isleofgough
- Propeller Head
- Posts: 91
- Joined: Sat Dec 08, 2012 9:05 am
- Location: Seattle WA
Proper styles for side by side text and graphics
You do not have the required permissions to view the files attached to this post.
Last edited by Isleofgough on Wed Oct 17, 2018 7:13 pm, edited 1 time in total.
Re: Proper styles for side by side text and graphics
Try removing the float: left from your p.image. I think it's always forcing your image paragraph to the left. I'm not sure it'll fix the overlapping you're seeing, but it should at least help.
There's also an error with the code you posted. The p.TextLeft doesn't have curly brackets (although that could just be a transcription error).
However, I'm not sure you even need the float on either the TextRight or TextLeft. Things should automatically wrap around the floated elements. You'd still need the imgclear to mark the text that should always be below the image. My rule of thumb is put the float value on the fewest possible elements. So in your case, I'd keep the float on only the images, as everything should then wrap around them.
There's also an error with the code you posted. The p.TextLeft doesn't have curly brackets (although that could just be a transcription error).
However, I'm not sure you even need the float on either the TextRight or TextLeft. Things should automatically wrap around the floated elements. You'd still need the imgclear to mark the text that should always be below the image. My rule of thumb is put the float value on the fewest possible elements. So in your case, I'd keep the float on only the images, as everything should then wrap around them.
-
Isleofgough
- Propeller Head
- Posts: 91
- Joined: Sat Dec 08, 2012 9:05 am
- Location: Seattle WA
Re: Proper styles for side by side text and graphics
Yes, the curly brackets issue was just a transcription. But THANK YOU SO MUCH!!! Removing the extra floats fixed it and it displays perfectly!