Forum Moderators: not2easy

Message Too Old, No Replies

Block level image links span the entire parent?

Is there anyway to have a linked image maintain inline status but put ...

         

apacheMan

11:01 pm on Jul 16, 2008 (gmt 0)

10+ Year Member



There is a particular area in one of my designs where I have a short text header (an <h3> to be exact) and underneath I want to have one single image (that is linked) of unknown size (changes daily) centered.. and underneath that image should be a paragraph. All three elements should be center-aligned within my parent div.

{ Text Heading }

[ LINKED IMAGE ]

{ paragraph }

Sounds simple enough... but I cannot figure out how I can put top padding on the linked image to seperate it from the <h3> header! The xhtml I have is as follows:

<h3>Heading Goes Here</h3>

<a href="otherpage.php"><img src="img.gif" alt="img here" /></a>

<p>Paragraph goes here...</p>

If I apply top padding to the <a> link above, it does nothing, because it's an inline element. I can apply padding to the image, but then the link still wraps that blank padded area above the image which is also not what I want.

I tried turning the <a> link into a block-level element, and that works, but then the link spans the entire parenting div's width, which is also not what I want.

I know I can float everything and set explicit widths and paddings, but I have like 20 of these types of buggers on numerous pages that need updated daily, and having to deal with varying sized elements and reseting all those properties would be a pain.

I also know I can wrap the linked image in a <div> and use that new div to set padding on the linked image... and that would work perfectly... but I am trying to avoid extranneous code as much as possible... especially considering this occurs numerous times on multiple pages.

Any ideas would be so greatly appreciated. Thank you for any help or guidance.

D_Blackwell

2:40 am on Jul 17, 2008 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Without seeing the CSS that you are currently using, could it be as simple as margin-bottom: on the <h3> or margin-top: on the <img>?

How are you centering the three pieces?

SuzyUK

7:46 am on Jul 17, 2008 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



You could increase/decrease the margins of the h3 and p elements, or you could wrap the image and link in a block element, a div, and margin it