...

View Full Version : Image Alignment



Uzair
05-05-2006, 10:29 AM
I want my text aligned left to the image & I dont the text go beneath the image. It should go down straight. I dont wanna use 2 cells for this. How can I do this? ? ?

Masterslave
05-05-2006, 10:44 AM
<img src="dummi.jpg" alt="Dummi" style="float: left;"/>
This is text this is text this is text

Uzair
05-05-2006, 10:55 AM
No, its not working. It places the text below image while I need the text right to the image. My image is 8x4 in size (a bullet) & the test is a whole story of a big paragraph. I wanna align the whole paragraph to Right. The text should not go below the bullet.

Arbitrator
05-05-2006, 01:20 PM
I actually stumbled onto a way of doing this dynamically using CSS's text-indent property: text-indent the link with a negative value equal to the distance you want to indent subsequent lines; then add padding of the same value except positive.

For the first line of text these two properties will cancel each other out; additional lines will automatically be indented at the specified value.

Source: http://forums.dreamincode.net/index.php?showtopic=15268&st=15&#entry153834 I modified this a little bit to compensate for the image. Here's a working example below:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html lang="en-us">
<head>

<!-- This Page Is Valid XHTML 1.0 Strict! -->

<meta http-equiv="content-type" content="text/html; charset = utf-8"/>

<title>test009b</title>

<style type="text/css">
p {
padding-left: 45px; /* 40px (image width) + 5px (image padding) */
text-indent: -45px; /* -40px (image width) + -5px (image padding) */
text-align: justify;
}
img.bullet {
width: 40px;
height: 25px;
padding-right: 5px;
}
</style>

</head>
<body>

<p><img class="bullet" alt="Frying Pan Emoticon" title="Paragraph Bullet" src="http://i10.photobucket.com/albums/a117/PLGaries/Icons/fryingpan7aa.gif"/>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>

</body>
</html>

Donkey
05-05-2006, 01:26 PM
Wouldn't it be easier and use less code to place the text in a div and float the div alongside the image?

Arbitrator
05-05-2006, 01:33 PM
Wouldn't it be easier and use less code to place the text in a div and float the div alongside the image?Don't let all the extra information fool you. All my code really is is text-indent and padding-left; I don't see what's so hard about that. If you used multiple paragraphs, the multiple div would add up to more code. Not only that but if you wanted to change the behavior to say a floated image with wrapping text, you would have to go back and remove all the div tags.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum