30 June 2014
Fixed-width email or e-newsletter (example)
<table width="100%" border="0" cellspacing="0" cellpadding="5">
<tr>
<td bgcolor="#D98200"> </td>
<td bgcolor="#D98200" style="width:600px"> </td>
<td bgcolor="#D98200"> </td>
</tr>
<tr>
<td bgcolor="#D98200" style="border-bottom: solid 2px #d98200"> </td> <!--Without this border-bottom style, there would be a white line at the bottom of this first column, because the second column has a 2px border in colour #c17402 -->
<td style="width:600px; border-right: outset 2px #c17402; border-bottom: outset 2px #c17402">
<table width="600px" border="0" cellspacing="0" cellpadding="5" style="font-family:'Trebuchet MS', Arial, Helvetica, sans-serif; font-size: 12px">
<tr>
<td>CONTENTS</td> <!--Contents of e-newsletter is actually here-->
</tr>
</table></td>
<td bgcolor="#D98200" style="border-bottom: solid 2px #d98200"> </td> <!--Without this border-bottom style, there would be a white line at the bottom of this third column, because the second column has a 2px border in colour #c17402 -->
</tr>
<tr>
<td bgcolor="#D98200"> </td>
<td bgcolor="#D98200" style="width:600px"> </td>
<td bgcolor="#D98200"> </td>
</tr>
</table>
Wrap text around an image with CSS
http://www.homeandlearn.co.uk/WD/wds4p6.html
Let's see how to get the following style:
As you can see, the image is on the right and the text flows around it. There
is also space between the image and the text.
The first thing to do is to set up a STYLE in the HEAD section of the HTML. Add the highlighted code to your own HTML:
The style we've set up is called TextWrap. In between the two curly brackets
we have this:
To apply the style to the image, you need to add the CLASS attribute to the IMG tag:
Amend your own IMG tag and add CLASS="TextWrap" to your own IMG code. Before you try it out, add a paragraph of text below the image:
Save your work and view the results in your browser.
There is, however, a problem with the above code. Suppose we want a second paragraph of text with another image floated on the left. We want to do this:
Here, the second image is nicely aligned below and to the left of the first
image. The text is in the right place, too.
To achieve this, you might think of adding a second style and then applying it to the second image. Like this:
In the second style, we've used float: left and added a 10 pixel margin
as before. In the second IMG tag, we've used the new TextWrapLeft class.
However, saving the work and refreshing gives you this in the browser:
In this version, the second image starts two thirds of the way down the first
image. The text doesn't flow as we want it, as well.
The way to correct this is to use a CSS property called clear. This clears any floating elements and gets you back to the normal, default flow for browsers. The clear property can take four values: left, right, both, none. Because our first image was floated to the right, we want to clear to the right. We can add this to the second style:
If our first image had been on the left, we would have used clear: left.
Let's see how to get the following style:
The first thing to do is to set up a STYLE in the HEAD section of the HTML. Add the highlighted code to your own HTML:
float: right;
margin: 10px;
The CSS property we need in order to move the image is called float.
The float property can take three values: left, right and none. To get some
space between the image and the text we can use the margin property.
We've set it to 10 pixels. This will give you space around the entire image.
If you only want space on specific sides of the image you can use these:margin: 10px;
margin-left
margin-right
margin-top
margin-bottom
So we could have done this:margin-right
margin-top
margin-bottom
margin-left: 10px;
margin-bottom: 10px;
That would get us a 10 pixels margin on the left of the image and 10 pixels
at the bottom.margin-bottom: 10px;
To apply the style to the image, you need to add the CLASS attribute to the IMG tag:
<IMG SRC="york_images/york_minster_2.gif"
CLASS="TextWrap">
The CLASS attribute doesn't have to go at the end. If you prefer, you can put
it after the IMG tag:
<IMG CLASS="TextWrap" SRC="york_images/york_minster_2.gif"
>
Just take note of where all the spaces are in the code above.Amend your own IMG tag and add CLASS="TextWrap" to your own IMG code. Before you try it out, add a paragraph of text below the image:
<IMG class="TextWrap" SRC="york_images/york_minster_2.gif">
<P>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed at ante. Mauris eleifend, quam a vulputate dictum, massa quam dapibus leo, eget vulputate orci purus ut lorem. In fringilla mi in ligula. Pellentesque aliquam quam vel dolor. Nunc adipiscing. Sed quam odio, tempus ac, aliquam molestie, varius ac, tellus. Vestibulum ut nulla aliquam risus rutrum interdum. Pellentesque lorem. Curabitur sit amet erat quis risus feugiat viverra.
</P>
You can, of course, use your own text, and not just the Lorem ipsum text. Make
sure your IMG code is above the first P tag, however.<P>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed at ante. Mauris eleifend, quam a vulputate dictum, massa quam dapibus leo, eget vulputate orci purus ut lorem. In fringilla mi in ligula. Pellentesque aliquam quam vel dolor. Nunc adipiscing. Sed quam odio, tempus ac, aliquam molestie, varius ac, tellus. Vestibulum ut nulla aliquam risus rutrum interdum. Pellentesque lorem. Curabitur sit amet erat quis risus feugiat viverra.
</P>
Save your work and view the results in your browser.
There is, however, a problem with the above code. Suppose we want a second paragraph of text with another image floated on the left. We want to do this:
To achieve this, you might think of adding a second style and then applying it to the second image. Like this:
However, saving the work and refreshing gives you this in the browser:
The way to correct this is to use a CSS property called clear. This clears any floating elements and gets you back to the normal, default flow for browsers. The clear property can take four values: left, right, both, none. Because our first image was floated to the right, we want to clear to the right. We can add this to the second style:
10 June 2014
SysAid Old Service Requests Not Show Up
Problem: After I re-installed SysAid, old service
requests were all gone.
Solution: When I re-installed SysAid, I created a new
database named 'SysAid'. But I saw that there were two databases within MS SQL
Server Management Studio. One was 'SysAid', the other 'SysAid_cics'. I knew
that our former database name was 'SysAid_cics'. I changed the database name in
'Program Files\SysAid Server\root\WEB-INF\conf\ServerConf.xml' from SysAid into
SysAid_cics. Problem is gone.
Error when installing Adobe Reader
Update Microsoft .Net Framework, then you will be successful installing Adobe Reader.
Subscribe to:
Posts (Atom)