Jump to content

Image Wrapped By Anchor - Anchor Height?


nachumk
 Share

Recommended Posts

I placed a single anchor with an image inside. How do I get the anchor to be sized equal in height and width to the image? I use a background color and an image margin left to show it on the page. This is messing up some effects that I'm trying to implement.Thanx,http://nkcorner.com/tmp.php<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN""http://www.w3.org/TR/html4/strict.dtd"> <html lang="en-US"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8559-1"> </head> <body><a href="tmp.php" style="background-color:red;"><img src="get_adobe_reader.gif" style="width:112px;height:33px;margin-left:50px"></img></a></body> </html>

Edited by nachumk
Link to comment
Share on other sites

The actual clickable area will be extended to the entire image, but since the anchor element is an inline one, the apparent height of the background will only be as high as the font-size. As for the width, remember that, for the parent element, the width of the image really does include the margin. The best way to fix that is probably to just apply the margin to the anchor element instead.

Link to comment
Share on other sites

The actual clickable area will be extended to the entire image, but since the anchor element is an inline one, the apparent height of the background will only be as high as the font-size. As for the width, remember that, for the parent element, the width of the image really does include the margin. The best way to fix that is probably to just apply the margin to the anchor element instead.
That makes sense to me. Is there any way to force an anchor to take up the full size of the image? I don't need to add a margin - that was only for testing purposes. I would like to apply styles in general to the anchor and not the element underneath if possible.Thanx,
Link to comment
Share on other sites

If you give the anchor a display:inline-block property, you can give it a height property that will work. I don't know what your application is, so display:block might actually work better for you. Block causes the next element to appear after a "line break." Inline-block is useful when you want to preserve a continuous, horizontal appearance (like images run inline with text).

Link to comment
Share on other sites

If you give the anchor a display:inline-block property, you can give it a height property that will work. I don't know what your application is, so display:block might actually work better for you. Block causes the next element to appear after a "line break." Inline-block is useful when you want to preserve a continuous, horizontal appearance (like images run inline with text).
Yes but then I have to either use js or hard code the height in. Is there a way to make the anchor be resized to the full size of it's children ie the image?
Link to comment
Share on other sites

Yes but then I have to either use js or hard code the height in. Is there a way to make the anchor be resized to the full size of it's children ie the image?
Both a block and inline-block display should do that.
Link to comment
Share on other sites

Yeah, sorry. As Ingolme says, the anchor will size itself automatically to its contents if it has one of the block display properties. I simply meant that a block-styled element will, in addition to this, accept a height definition if you need it to have one.An inline anchor will not accept a height definition at all, which is the frustration you've been experiencing.Auto-sizing and the ability to accept a CSS dimensional property pretty much go together. If you have one, you have both. If not, neither.(As with everything else, exceptional circumstances--nothing that you're up to now--can mess with this.)

Link to comment
Share on other sites

Thanks for all the information. I know the key thing I just learned is that the anchor is originally the height of the font. Never would've thought of that on my own. The display:inline-block or display:block will definitely be useful. I'm kinda curious as to why there's a tiny bit of height sticking out beneath the image but I'm guessing that's tied into the font issue too. Extra vertical space for g j p ....

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...