Jump to content

Cre8asiteforums

Web Site Design, Usability, SEO & Marketing Discussion and Support

  • Announcements

    • cre8pc

      20 Years! Cre8asiteforums 1998 - 2018   01/18/2018

      Cre8asiteforums In Its 20th Year In case you didn't know, Internet Marketing Ninjas released many of the online forums they had acquired, such as WebmasterWorld, SEOChat, several DevShed properties and these forums back to their founders. You will notice a new user interface for Cre8asiteforums, the software was upgraded, and it was moved to a new server.  Founder, Kim Krause Berg, who was retained as forums Admin when the forums were sold, is the hotel manager here, with the help of long-time member, "iamlost" as backup. Kim is shouldering the expenses of keeping the place going, so if you have any inclination towards making a donation or putting up a banner, she is most appreciative of your financial support. 
achieve

Css Modification

Recommended Posts

Hello and thanks in advance.

 

I hope this is the right place to post a message as follows:

 

I need to insert an image and I need the image to be align to the left and to have some space around it so that the text wraps around it nicely.

 

So this is what I have:

 

<img src="images/horse_small.jpg" width="228" height="217" [b]hspace="10" vspace="10"[/b] border="1" align="left" />

 

Now because the text around has the following attributes in the CSS file I do not get any vertical or horizontal space (hspace="10" vspace="10") around the image:

 

.text_normal{
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
color: #000000;
text-decoration: none;
text-align: left;
padding:0px 10px 0px 18px;
text-align:left;
}

 

How do you suggest me to modify the CSS so that I have the space around the image and the text wraps around it nicely?

 

Hope this makes sense…

 

Thanks/Regards

Share this post


Link to post
Share on other sites

Do not use hspace and vspace, rather use CSS as folllows:

 

img {

padding-top:7px;

padding-right:7px;}

 

 

Yannis

Share this post


Link to post
Share on other sites

Because the image is an inline element, the browser will not wrap the text, it will put the next line of text below the image leaving you with a big wodge of whitespace. To get the text to wrap around the image you need to use a 'float'. How to do it

 

You can also experiment with your border to make it look pretty. If you have:

 

img{border: none}

then the blue line normally seen on linked images will disappear

 

But if you add:

 

img {border-bottom: 1px solid grey; border-right: 1px solid grey;}

you will give it a bit of depth.

 

Please excuse the egg sucking lesson if you already knew this.

Share this post


Link to post
Share on other sites

×