|
Word Count: 463 A Webmaster's Guide: How to wrap text around images?An HTML Quickie for the rest of us!
Ever seen websites that have images neatly inserted within the content? You
know, where the text wraps around the image? This gives a professional look to
things, doesn't it? Keep reading and I'll show you a common and very easy method on
how this is done.
With the use of the HTML DIV tag and inline CSS [Google for
more information on these acronyms], you'll be able to place images
within your document content, and just where you want them and without the need
for tables.
The trick to creating this visual effect is in the CSS used. Specifically,
the float element. The CSS float element is used to align images [or any element
of a document, including, but not limited to Adsense (hint!)] on left or right sides of text or other content items.
This method will give your document a more natural flow, look and feel over the
alternative table method.
Here's a code template that you may freely use for this purpose:
<div style="float:right;"><img src="location_of_image" alt="some descriptive
text for the image" border="0" height="" width=""/></div>
Here's another code template that you may freely use that includes padding:
<div style="float:right; padding-left: 5px; padding-bottom: 5px;"><img src="location_of_image" alt="some descriptive
text for the image" border="0" height="" width=""/></div>
The CSS padding elements above will create space on the left and bottom of the image. You can change the padding elements to create space on the right by changing the padding-left to padding-right. You can also add more or less space by changing the 5px (px stands for pixels) to a higher or lower value.
Simply, insert your image information into the image tag and adjust the
style's float element to place the image on the left or right sides of your
content [the float element only does left or right]. Use the src element for the
location of the image. The src tag needs to be a relative or full URL to the
image, but I recommend using the full URL. And be sure to modify the alt text
[used for addition information (text tip), when someone puts their mouse over
your image], height and width values before using this code template within an
actual HTML document. Now, place the completed code template where you want the
image to show within your document and check your page.
Feels good, doesn't it?
*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*
Ray Gilman has been helping Webmasters with Web applications, tools,
knowledge and advice over the past nine years and in His early days offered Web
Awards to Webmasters for Great Achievements. For free PHP scripts and more
information, please visit:
http://www.webraydian.com. |
