Styled Text Tricks Page 2
We have all used the ‘Align Image Right’ (or left) command to place an image to one side and wrap the text around it. Why don’t we add some more functionality to this? Many of you will have seen this done on the RapidWeaver Forum by such gurus as Sundog (Larry) and Phil Warrender.
Image Styling.
<div class ="myimage">
your image goes in here </div>
We now add some CSS for styling.
.myimage{
display: block;
float: right;
background-color: #EC9030
padding-right: 10px;
padding-left:10px;
padding-bottom: 20px;
margin-right: 50px;
margin-left: 14px;
padding-top: 20px;
border-left: 4px solid lightblue;}
This code is to be placed in the Custom CSS box in the Page Inspector’s Header tab. This produces the effect to the right of the HTML code. Try enlarging the text on this page, and see what happens. Because the divs with the text and picture in do not have absolute positions attched as the would in iWeb or Blocks, you will see that their positions move to accommodate this enlargement. It also stops any issues with fonts requiring different spaces in different browsers.
Taking It Further.
Maybe we now want a caption for the image? We will want it to stay with the image, so we create a new div for the caption, and place it inside the div for the image. We will make the div for the caption the same size as the image, then the text align center command for the caption, will center the caption under the image.
This is our caption Description. Now we could have added a border all the way around, by taking the ‘-left’ out of the CSS. I have left it the same, to show the same CSS being used on more than one occasion. This text also shares the same ‘class’ as the description above, to use the same CSS as before.
Again before the image we have<div class ="myimage">
but after the image we have<div class ="caption">This is our caption</div></div>
The CSS code for the caption is .caption{
font-size: 16px;
font-weight: bold;
height: 18px;
margin-top: 10px;
display: block;
color: black;
background-color: lightblue;
width:330px;
text-align: center;
}
Removing the background colors can provide you with something that looks so much more ‘seamless’, but wouldn’t make it as clear here what we were doing, hence our use of them for the examples.
Page 3