Banner Image Styling? Css

[hireconrad 0]

Hi, is there a way to style a particular image in a banner? I want to move an image within a banner, but not effect all banners on a page

[Rob 547]

The options available for banners were insufficient? Each banner is unique, by default and separate from every other banner, even if using several on the same page.

What did you hope to change?

[hireconrad 0]

The vertical position of some of my images in the banners dont line up properly with the text next to them. I have had to modify the margins of all, but now a few images are too low. I would like to be able to tailor which images get adjusted independently of all banner images.

[Danny+ 1,327]

Can you provide a link to the page in question please.

[hireconrad 0]

http://hireconrad.com/hireconrad/renters/

i realize I have a css margin of 100px on that image, however i need it for other images found on my site.

[Rob 547]

Conrad,

Your problem is not coding, it's graphics.

1. In each image where the graphic is close to the top, but not quite at the top of the text associated with it in the banner, the graphic has a gap of whitespace above it. If you fixed your graphics, you'd be able to align the graphic exactly to match the top of the text to the right.

2. The one near the bottom, which seems most problematic is caused not by coding, but by an image that's too wide. It's not allowing sufficient space for the padding and/or margins between the image and the text, thus it is in essence, pushing itself down. There too, you have excess white space, but on the right of the folder. Remember, these images do not scale. You need to edit them in a graphics editor to ensure they're appropriate size. I'd suggest knocking about 50px off the right side, saving and replacing the current picture with the fixed one.

Also, if you obtained and used Firebug, you'd be able to see how the image edge butts right up to the text, where in others, there's a nice gap.

[hireconrad 0]

I use firebug all the time to figure out how to modify the code to work.

A adjusted the size of the image with the blue folders and it moved up a little. I will experiment with it.

Why is the image below (question mark and exclamation mark) larger then the folder image, yet it is higher above the text which neighbours it then the text?

If the size of the image is important, then why did the large blue folder image move down, while the image below it move up?

[Rob 547]

Well, my best guess is that the ? ! in bubbles image is huge. Remember this CSS is default (don't try to change it, please):

#banners .banner-media img {

max-width: 100%;

}

body .content img {

	height: auto;

}

So, the images are set to automatically be as high as they are, and as wide as they are.

It's possible that if you scaled the bubbles down to a smaller size, it would align right too. Worth a shot!