PDA

View Full Version : Adding padding to an image


Octavius
10-11-2011, 01:33 PM
This is driving me bananas.

I've selected a Page Design (CSS) template. Then I clicked on an image placeholder and typed in the source for one of my images. This worked fine.

Now I'm trying to put some white space padding around the image to separate it from the text. It would seem that if I could access the CSS Style Definition box for this image I could add some padding. But I can't find this Definition box anywhere.

Can someone put me straight?

Cheers!

MX 2004 and I'm using "The Missing Manual" book for reference.

Corrosive
10-11-2011, 02:03 PM
Are you floating the image so the text wraps around it?

Octavius
10-11-2011, 02:17 PM
Corrosive,
Well, all I done was open up one of the canned templates. This template had an image placeholder so I just gave it the source for this image. My image then appeared, as expected.
Cheers!
The text is right up against the right side and bottom of the image.

Corrosive
10-11-2011, 02:23 PM
Oh right, OK. Bit hard to debug that without seeing it. Are you able to put it online temporarily?

Octavius
10-11-2011, 02:53 PM
Thanks for the help Corrosive.

http://tinyurl.com/5vxdlkt

While you are there, you'll notice seven Global Links (each with sub-links) in the bar at the top of the page. I'd like to put in an eighth. I managed to do that by adding some code but I don't feel comfortable doing that - there must be a way to do it via the Design mode.

Cheers!

Corrosive
10-11-2011, 03:00 PM
Line 334 in your stylesheet;

.feature img{
float: left;
padding: 0px 10px 0px 0px;
}

Change the padding values to suit. Remember that CSS shorthand goes clockwise so top, right, bottom, left (0px 10px 0px 0px)

Hope that helps.

I have no idea how to do stuff through Design Mode. I hand code, sorry :(

Octavius
10-11-2011, 03:18 PM
Ha!
And I know nothing about coding!
How do you access the stylesheet?
Thanks!

gentleone
10-11-2011, 03:23 PM
I'd recommend to change padding to margin. The padding will do the trick, but not for.... who else... IE (in quirks mode).

But using a padding on an img tag can come in handy if you also want to put a border around it and then using margin to space the text. Simple, but neat effect.

Corrosive
10-11-2011, 03:25 PM
It is in the root of your site folder and it is called "emx_nav_left.css".

Learning enough code to be dangerous is a good idea as you develop your skills. You are always going to come up against problems you can't solve in Design View alone I'm afraid. Plus the WYSIWYG is terrible in MX 2004. I use it still at home and I can't think of a single site I have built that displays OK in it.

Corrosive
10-11-2011, 03:26 PM
I'd recommend to change padding to margin. The padding will do the trick, but not for.... who else... IE (in quirks mode).



Yes, that is a good call :)

Octavius
10-11-2011, 05:14 PM
Well, I tried adding that bit of code but it didn't seem to do anything when I saved and then "previewed" in IE.

Actually, the preview, without the added code, shows that there is actually a bit of space so I think I'll leave it at that.

As far as the Global Links in the template, does anyone know how to "copy and paste" them in Design view?

Cheers

gentleone
10-12-2011, 01:48 PM
Well, I tried adding that bit of code but it didn't seem to do anything when I saved and then "previewed" in IE.
Change padding to margin.

Octavius
10-12-2011, 08:29 PM
Yeah, I tried that as well and nothing happened.
Cheers

DWcourse
10-12-2011, 10:13 PM
It's time to bite the bullet and upgrade. Newer versions handle CSS (and almost everything else much better) and, while Design View still sucks, the Live Preview is pretty nice.

Of course you'll be in for a learning curve but better to do the learning on a piece of software that isn't obsolete.

colaroid
02-21-2012, 01:08 PM
I think I have a padding issue. I set up a webpage a while ago and I am adding some stuff and have forgotten a lot my previous understanding of dreaweaver. My template is set up with padding in the main content section. I would like some of my images to stretch across the entire page with no padding (no gap between the edges of the main content section and the content). Is there a way to apply this to the particular image or do I have to remove the padding from the main content?

I hope this makes some sense!

edbr
02-22-2012, 12:01 AM
use a class for that element

kritiana08
02-29-2012, 08:42 AM
Ha!
And I know nothing about coding!
How do you access the stylesheet?
Thanks!
I'd recommend to change padding to margin. The padding will do the trick, but not for.... who else... IE (in quirks mode).

But using a padding on an img tag can come in handy if you also want to put a border around it and then using margin to space the text. Simple, but neat effect.