I'm a newbie - please help me adjust a paragraph

HTML & CSS
1

Hi

Can anyone help me. I’m tying to make a paragraph move about a centimetre to the right of an image (just to give it a bit of a space). Please someone point me in the right direction of by this doesn’t work.:frowning:

I have a style sheet that contains this :-

.leftpadding{
font-style: italic;
margin: 500px;
}

and a html file that contains :-

<div id="bodycontent">
  <h2>Welcome to this Website</h2>
  <p><img src="divers-circle.jpg" width="200" height="162"
      alt="A circle of divers practice their skills"/>
  </p>
  [COLOR="Red"]<p class "leftpadding">I hope you Enjoy this Website and helps you to have a better day !!</p>[/COLOR]    </div> <!-- end of bodycontent div -->

Thank you anyone
from
Matthew

2

You could add some padding to the image.

3

You just have to float the image to the left of the paragraph:


<div id="bodycontent">
 <h2>Welcome to this Website</h2>
 <img src="divers-circle.jpg" width="200" height="162"
 alt="A circle of divers practice their skills"> <!-- no need to put the img in a paragraph -->
 <p>I hope you Enjoy this Website and helps you to have a better day !!</p>
</div> <!-- end of bodycontent div -->



img {float:left; display:block; margin-right:40px;} /* change the 40px to what you need */
4

Adjust the code as needed…

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

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
  <title></title>
  <style type="text/css">
  /*<![CDATA[*/
img{
 margin: 0 2% 0 0;
 float: left;
}
p{
  font-style: italic;
}

  /*]]>*/
  </style>
</head>

<body>
    <div id="bodycontent">
        <h2>Welcome to this Website</h2>
            <p>
                <img src="divers-circle.jpg" width="200" height="162" alt="A circle of divers practice their skills"/>
                I hope you Enjoy this Website and helps you to have a better day !!
            </p>
    </div>
</body>

</html>

I hope this helps…

5

Hi
Thanks very much.

This definitely worked :-
img imghome {float:left; margin-right:40px;}

However if I try this then the text appears to the bottom right of the image. Anyone know why please. I’m trying to introduce class=“imghome” into it to make the img definition more specific :-

&lt;div id="bodycontent"&gt;
  &lt;h2&gt;Welcome to this Website&lt;/h2&gt;
  &lt;img class="imghome" src="divers-circle.jpg" width="200" height="162" margin:40px
      alt="A circle of divers practice their skills"/&gt;      
  I hope you Enjoy this Website and helps you to have a better day !!
&lt;/div&gt; &lt;!-- end of bodycontent div --&gt;

then trying this in the style sheet :-

img imghome{float:left; margin-right:80px;}
.subtitle {
font-size: 0.8em;
}

If I do then then I find that the margin-right does not work again.

Thanks for any tips you can offer me.

Cheers
Matthew

6

If the classname of the image is imghome, then you should write img.imghome. You have a space there instead of a dot :slight_smile:

7