Jump to content


Photo
- - - - -

Banner Image Styling? Css


  • Please log in to reply
7 replies to this topic

#1 hireconrad

hireconrad

    Super Member

  • Members
  • 155 posts
  • Country: Country Flag

Posted 20 October 2012 - 08:29 PM

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

#2 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 20 October 2012 - 09:14 PM

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?

#3 hireconrad

hireconrad

    Super Member

  • Members
  • 155 posts
  • Country: Country Flag

Posted 21 October 2012 - 12:27 AM

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.

#4 Danny

Danny

    Is Awesome!

  • Moderators
  • 12988 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 21 October 2012 - 09:37 AM

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

#5 hireconrad

hireconrad

    Super Member

  • Members
  • 155 posts
  • Country: Country Flag

Posted 21 October 2012 - 02:12 PM

Please Login or Register to see this Hidden Content



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

#6 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 21 October 2012 - 04:31 PM

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.

#7 hireconrad

hireconrad

    Super Member

  • Members
  • 155 posts
  • Country: Country Flag

Posted 21 October 2012 - 11:32 PM

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?

#8 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 22 October 2012 - 12:01 AM

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

Please Login or Register to see this Hidden Content


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!