PDA

Click to See Complete Forum and Search --> : need some help to aligning image

Taurus
09-15-2005, 02:32 PM
single html page. I want place some image against some text, like this sample
Need some help for code, probably place image inside a table..
If I just place image next to text content, it breaks other formatting, and looks poor.

Thanks
HaganeNoKokoro
09-15-2005, 02:38 PM
You could float the image. You just put the image before the text and give it style="float:right;"

Example:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/HTML401/strict.dtd">
<html lang="en">
<head>
<title>Image Float Demo</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body>
<img src="yourimage.gif" style="float:right;">
<p>blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah </p>
</body>
</html>
Taurus
09-16-2005, 06:48 AM
well, it helps. However, this is not a single paragraf, there is 3 paragrafs and then one ordered list.
LJK
09-16-2005, 07:59 AM
Hi -
Just set a width for your paragraph and float it left, with any margins or padding set to make it the distance you need from the left side and from the image. Be sure the total width of the p and img doesn't exceed the width of the container element they're in - and be sure to clear the floats.
If you want those lines, then after the p/img combo, use something like:
<hr style="clear:both;" /> and if not, try: <br style="clear:both;" />
Same for the list - set a width, no padding or margins, tho - add those to the individual li's.

Good luck,
El
Taurus
09-16-2005, 02:22 PM
well, i am not very clear understand, how it should look? Here is piece of code(before hr>:


<p style="font-family: Arial, sans-serif; font-size:11pt; color: blue;">textext tex ttex ttextt extt ext text texttext
texttext text exttext texttexttext</p>

<p style="font-family: Arial, sans-serif; font-size:11pt;">another text:&nbsp;&nbsp;6.00</p>
<p style="font-family: Arial, sans-serif; font-size:11pt; color: blue; font-weight: bold;">text text:</p>

<ol style="color: blue; font family: Arial, Verdana, sans-serif; font-size: 11pt;">
<li>Name 1</li>
<li>Name 2</li>
<li>Name 3</li>
</ol>

<p style="font-family: Arial, sans-serif; font-size:11pt;">text text text text texttext text</p>

<hr width="60%" size="1" noshade="noshade" />
...
</body>
</html>


Thank you.