/    Sign up×
Community /Pin to ProfileBookmark

Image/Text Spacing

Copy linkTweet thisAlerts:
Jun 08.2011

Hi

I have an image aligned to the left and then some text next to it but the text is right up against the image making it hard to read. Is there a way to fix this?

Here’s the html

[FONT=”Courier New”]<img src=”Images/GRASS_SUNSET.jpg” width=”400″ height=”268″ alt=”Sunset” align=”left”/>
<p>A yellow sunset through a field of grass. This photo was taken on a Nikon D60 with no flash. The aperture was set to f/10 and shutter speed to 1/25 sec. ISO was at 100 and focal length was 55mm. The photo RAW file was then edited in Photoshop CS5 to give a dynamic yellow look. This photo was taken on May 5th 2011</p>[/FONT]

and the CSS (for the whole div, although I don’t think it’s necessary)

[FONT=”Courier New”]#body { background-color:#f0eccd;
width:780px;
margin-left:auto;
margin-right:auto;
overflow:auto;
padding-left:10px;
padding-right:10px;
padding-top:5px;
padding-bottom:20px;

}[/FONT]

Thanks ?
Thomas

to post a comment
HTML

3 Comments(s) ↴

Copy linkTweet thisAlerts:
@cootheadJun 09.2011 — Hi there TomTom100,

the align attribute is deprecated in favour of CSS.

Try it like this...
[color=navy]
&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd"&gt;
&lt;html lang="en"&gt;
&lt;head&gt;

&lt;meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"&gt;
&lt;meta name="language" content="english"&gt;
&lt;meta http-equiv="Content-Style-Type" content="text/css"&gt;

&lt;title&gt;grass sunset&lt;/title&gt;

&lt;style type="text/css"&gt;
#body {
width:780px;
margin:auto;
overflow:hidden;
padding:5px 10px 20px;
background-color:#f0eccd;
}
#sunset {
float:left;
width:400px;
height:268px;
margin-right:10px;
} <br/>
&lt;/style&gt;

&lt;/head&gt;
&lt;body&gt;

&lt;div id="body"&gt;

&lt;img id="sunset" src="Images/GRASS_SUNSET.jpg" alt="Sunset"&gt;

&lt;p&gt;
A yellow sunset through a field of grass. This photo was taken on a Nikon D60 with no flash.
The aperture was set to f/10 and shutter speed to 1/25 sec. ISO was at 100 and focal length
was 55mm. The photo RAW file was then edited in Photoshop CS5 to give a dynamic yellow look.
This photo was taken on May 5th 2011
&lt;/p&gt;

&lt;/div&gt;

&lt;/body&gt;
&lt;/html&gt;
[/color]
[i]coothead[/i]
Copy linkTweet thisAlerts:
@TomTom100authorJun 09.2011 — Thank you! Everything is sorted now! ?

Best Regards

Thomas
Copy linkTweet thisAlerts:
@cootheadJun 09.2011 — [indent]No problem, you're very welcome. ?[/indent]
×

Success!

Help @TomTom100 spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.19,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...