Jump to content

Cre8asiteforums Internet Marketing
and Conversion Web Design


Css Modification

  • Please log in to reply
2 replies to this topic

#1 achieve


    Unlurked Energy

  • Members
  • 7 posts

Posted 29 May 2008 - 09:48 PM

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:

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

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…


#2 yannis


    Sonic Boom Member

  • 1000 Post Club
  • 1634 posts

Posted 29 May 2008 - 10:50 PM

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

img {


#3 fisicx


    Sonic Boom Member

  • Hall Of Fame
  • 1976 posts

Posted 30 May 2008 - 02:49 AM

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.

RSS Feed

0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users