Image Spacing! Help!

djcee · #1 (**permalink**) Aug 8th, 2006, 19:35

I want to add a border round an image using the <div style> tag. Ive got my image as a set tag {icon} like that! So my code goes: <div style="float:left; border-style:solid; border-width:2px; border-color:black; padding-right:2px">{icon}</div>

But how can I create padding around the image without the border also lining the padding?? It creates like a white border round the image!!! I want a border round the image but to be able to pad it without the border also lining the blank padded area!!

Can this be done?? Please help!!

moojoo · #2 (**permalink**) Aug 8th, 2006, 19:40

<div style="float:left; border-style:solid; border-width:2px; border-color:black; padding-right:2px">{icon}</div>

The {icon} confuses me. That is for CSS not HTML. Since you are applying a style inline you don't need em. What you should do is place the CSS in the head of your document or link to an external style sheet:

<style type="text/css">
#foo {
float:left;
borde:solid 2px #000;
padding:0 2px 0 0;
}
</style>

<div id="foo">
<img src="" height="" width="" alt="" />
</div>

djcee · #3 (**permalink**) Aug 8th, 2006, 19:45

Quote:

Originally Posted by moojoo

<div style="float:left; border-style:solid; border-width:2px; border-color:black; padding-right:2px">{icon}</div>

The {icon} confuses me. That is for CSS not HTML. Since you are applying a style inline you don't need em. What you should do is place the CSS in the head of your document or link to an external style sheet:

<style type="text/css">
#foo {
float:left;
borde:solid 2px #000;
padding:0 2px 0 0;
}
</style>

<div id="foo">
<img src="" height="" width="" alt="" />
</div>

Im inserting it into a template file for a PHP news system called FusionNews so the {icon} tag is where the users avatar will appear! It is a .php file I am editing. So I want a border round the image, then say a 2px spacing on the right around the image so that you can see the text properly!!

There is no <head> section to the page at all because its PHP. So Im guessing this cant be done then??

moojoo · #4 (**permalink**) Aug 8th, 2006, 19:46

It probably can, wish you specified that earlier =). is there a php include in the top of the documents pulling in a header file? You could set it there.

ukgeoff · #5 (**permalink**) Aug 8th, 2006, 21:06

Unless I'm missing something...

Give the div an id, lets say 'icondiv'. Now you can define a style:

Code: Select all

div#icondiv img {
   ...
}

and that style will be applied to any images that gets placed in that div.

minute44 · #6 (**permalink**) Aug 9th, 2006, 09:30

Quote:

Originally Posted by ukgeoff

Unless I'm missing something...

Give the div an id, lets say 'icondiv'. Now you can define a style:

Code: Select all

div#icondiv img {
   ...
}

and that style will be applied to any images that gets placed in that div.

Or if it's going to repeat...Give it a class.

Code: Select all

.icondiv img {
   ...
}

masonbarge · #7 (**permalink**) Aug 9th, 2006, 11:59

use margin

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Css Spacing Help!	RZX Developer	Web Page Design	5	Aug 13th, 2007 12:26
spacing issue in IE6	snooper	Web Page Design	2	Jun 13th, 2007 16:16
Help needed with Spacing	hbb	Web Page Design	9	Jun 12th, 2007 16:22
div spacing	johnnybravo	Web Page Design	13	Sep 6th, 2006 12:06
spacing around images	AdRock	Web Page Design	4	Aug 2nd, 2006 21:32

		Webforumz.com > Main Forums > Design Your Website > Web Page Design
Image Spacing! Help!