Take a look at this fiddle.
Quick info:
The div is 500px wide
The image inside it is centered with css (margin: 0 auto)
The image has an anchor tag wrapper around it (no css)
Problem:
If you inspect the anchor tag (firebug or other inspector), it shows as the same width and height as the image, which to me is correct, BUT the full div is clickable.
Questions:
Is firebug showing the wrong size of the anchor tag?
Are the browsers wrong? (I assume not)
What's going on? :)
I suspect it's because the <img> is styled with display:block. That means that the <img> element (!) (as opposed to the graphic image itself) will expand to fill whatever width is allocated to it. Note that when you remove display:block setting, the clickable area falls back to the expanse of the image, as expected.
The question then becomes: How do you center the linked image while limiting the clickable area to the image? One way is:
div { width: 500px; text-align:center; }
The anchor tag as around the image. The image has a margin. auto isn't 0 here, it's the difference between 500 and the width of the image / 2.
If you would like to not include the margin, wrap the image and anchor in a div, then position that with margin:0 auto;
Related
Here is a test-case for my problem:
http://game-point.net/misc/testParaPadding/
I want the progressBarGreen.png image to be inside the DIV, and the DIV is exactly the right height (15px) to hold it, but there are a couple of pixels padding at the top of the DIV. Why? The browser seems to be sizing the content as if it contained text because the padding changes if I remove the font-family styling for the body, but there is no text in the DIV.
Interestingly this problem doesn't happen in Firefox's quirks mode.
jsFiddle Example
You need line-height:15px on the div holding the image
edit: Explanation for this behaviour line-height affecting even no-text blocks
Your image is the right size, but images are inline elements by default, and will be affected by the page's line-height, font-size, and other properties of inline elements.
If you add a line to your image's style reading display: block;, it will become a block-level element, and not be affected by any of those properties.
The initial value for vertical-align is always "baseline".
You can fix that by adding a vertical-align:top to your image ;)
Use
position:absolute;
To get the image on the other DIV exactly inside it.
Check this fiddle: http://jsfiddle.net/sRhXc/2/
I have the strict need to set a big background under a little button icon in such a way:
<img
src="little-icon.png"
style="background: url('main-image.jpg') no-repeat center;
margin: auto; padding: 0;
height: 240px; width: 180px;"
/>
Where height and width are the parameters of the (big) main background image. In a nutshell: I need to set img.src as a clickable icon, and its background-image as a big image. This is something quite simple to do with a div tag which wraps the img one. But I have, due to other circumstances, to do all in the same img tag.
The code right above does its job, but the icon is deformed to the size of the background one. Is there the chance to do what I need to do?
I think there are better ways to do this, but if you absolutely have to do it your way, use padding - setting the width and height of your image with CSS, will definitely deform it ...
Example here (using :hover as way of explanation)
No, there is no way you can do that inside of one img tag, as the background and the image itself are assigned the same height and width so they will always overlap each other and be stretchd or shrunk into the dimensions you specify.
What you could do is merge the images into one, thats probably your only chance in case you are really stuck with a one tag only policy.
Definitely, when you apply height and width style to img tag, it will apply to the main image ie image in src. You can only control the background position within that area.
As per the question, if you want large background below, small icon, you need to create the large image of icon with transparent background.
I have a list of items, like a menu, where the current item has a background image that is kind of like a big pointer to the right. This background image pointer thing should escape the bounding box of the div it's contained within. Here is a screenshot of how it appears in Chrome and FF, which is as i expected it to appear:
I've set up a jsfiddle with the code, minus the background image thing as I can't be bothered uploading it anywhere. But I've set the background colour so you can see what I'm referring to
The code is here: http://jsfiddle.net/V8TNm/
So in Chrome and FF, the yellow background of the active item will stretch past the grey gradient box. But in IE9, it's cut off.
Any ideas why, and what an easy fix may be?
Simply add position:relative.
#nav_mod_list div.current {
position: relative;
}
http://jsfiddle.net/V8TNm/3/
The selector #nav_mod_list div.current has a width of 210px as well as padding and margin where as the container is 200px. Change the 210 to 200 and remove the margin and padding.
Edit:
You could also just remove width property altogether. That way it will simply extend the width of the container.
I want to achieve something like this:
A) Is an square image, say 65x65.
B) This icon is another image which
need to be floated inside A.
C) The minimum length of the row is
the height of A. The maximum depends
of the length of the text
description.
Usually when I have floating images like A and B, I would put my container position as relative, and obsolute for the floating image, and that will do it, but I'm a little lost with the text here.
This is just going to be used on webkit browsers, if that is of any use.
If the image size is fixed and unlikely to change in the future, then I'd recommend applying position absolute to the image (what you're saying). I'm guessing your problem is that if the text is too short, the height of the image would exceed the height of the container. This is easily fixable with min-height:
.module {
min-height: 65px; /*your image height*/
}
You can view a demo here:
http://jsfiddle.net/RkeJJ/
This should work all the way down to IE7.
If your image size is variable, then I'd recommend display: table/table-row/table-cell, but this will work only on IE8+ and the rest of the modern browsers.
Me debes una caña! ;)
You know the width of image A (the large image). The title goes in a h1 for example, and the text in a p (or div), so set these two elements to have a left margin greater than the width of image A.
You can then float image A to the left and position the icon B over the image using absolute positioning.
Finally, I would have a wrapper div with overflow: auto to have a border (if needed) and to allow for a bottom margin to provide white space between the following element.
Partial answer: see my code snippet at http://jsfiddle.net/audetwebdesign/Nam52/
You just need to add the date element after the title.
When I try to turn a div into a link, all of the area to the right of the div also becomes a div. The div displays as a block and has a fixed width. When I make the div linkable, the white space to the right of the div becomes linked, too. I thought that making the div a block and fixing its width would make only the area inside of the div linkable.
Without having any code to look at, I would imagine the problem is that you have it set as a block. By definition the block attribute makes the tag it is acting on display the entire width of the parent container. Try changing it to display:inline instead.