http://down123.xxmn.com/wemade/
there is no padding or margin under the image. but i don't know why there is about 1px under the image.which locates at the top right of the page.
how to remove the 1px which ix under the image? thank you
While Andres' solution works, it doesn't actually deal with the issue directly, which is the vertical alignment of the image. The way to fix it is to give the image an alignment other than baseline, such as top or bottom.
This is what I usually use:
img {
vertical-align: top;
}
This way you aren't 'hacking' together a solution by changing the image's natural display mode, but rather dealing with the problem directly.
Also, if you are worried about the way that the inline anchor wraps the inline image, then change the display mode on the anchor, not the image (i.e. block or inline-block).
Just define your image as a block level element to allow your link to properly wrap around your image;
#top a img {
display: block;
}
Related
I am now using the Envo Magazine Theme for Wordpress. I switched themes recently. I have a wider post area to work with. However, that means for older posts with smaller images, the images are floating on the left and text is wrapping around the images.
I don't want any text wrapping around images.
How do I force all post images to be center-aligned and not floating?
I tried forcing the post area to be a smaller width and that takes care of the overflow text, but that defeats the purpose of switching to a wider theme. I can't seem to find the right code to select all post-attached images. Please advise. Thank you!
Here is one example of a code I tried. I wanted to force all post images to be center-aligned with no text overwrap.
.single-entry-summary img {display: block; margin: 0 auto;}
It looks like you can't simply select all images on the page, because they are not build with the same structure. You can prevent the text from wrapping around the first image by removing the class pibfi_float_left from the span that is surrounding it. Or you can edit the class and remove the float: left.
For the other pictures, you need to remove the class alignleft from the surrounding div. Or you can edit the class and remove the float: left.
To center the images, you also need to add display: block to the surrounding span:
.single-entry-summary span {
display: block;
}
.single-entry-summary img {
display: block;
margin: 0 auto;
}
Important note: For all images except the first one, you need to adjust the width of the attachment divs (which have an id starting with attachment), otherwise they won't be centered. You can do it like that:
.single-entry-summary div[id^='attachment'] {
width: 1000px !important;
}
I'm trying to learn the basics in CSS but I still have some problems.
How can I hide this "a" space under the img?
I gave it a red background to make it easier to explain which part I'm talking about.
here is the problem:
http://jsfiddle.net/3c48P/7/
.feedEkList li a {
background: red;
}
This is the CSS but I cannot hide it (I want to keep the img of course)
Try display:block on image:
http://jsfiddle.net/3c48P/9/
.feedEkList li a img
{
display:block;
}
The issue is that your <a> and <img> are both inline elements so spaces are preserved during display.
However, you are treating them as block level elements and expect them to contain no such spaces.
The simplest (without going in-depth into other issues) is to make both the <a> tags and <img> tags display: block (although as salivan pointed out the img tag alone should be sufficient).
Just add this line display:block;. it will solve your problem because the img is shown in line by default
Add it in the css like this
img {
width:100%;
height: auto;
display: block;
}
img elements are "inline", just like text. This white space is the part of the line that holds the descending part of letters (for example j or g) and the vertical align of the image is set at the "baseline" of the line, where the bottom of most letters rest (abcd).
One option is, as pointed, display block in spite of it's default "inline" display. You can also avoid it changing the "vertical-align" to "bottom".
Is it possible to prevent non-clickable area between lines in a multi-line html anchor tag? Here in this example I use line height 1.5 and you can't click between lines.
I know in html5 we can put block-level tags in anchor like <a><div>Link</div></a> but the problem is this part of content can be edited by users and I can't ask them to write their anchor links like this. Is it possible to fix this issue with css only?
CSS:
a {
line-height:1.5em;
}
HTML:
This is a <br> multiline anchor
<br><br><br>
This is a very long anchor displayed as a multiline anchor without BR
DEMO:
http://jsfiddle.net/ergec/F52uY/2/
You can set display: inline-block; or display: block to a, and then it will be clickable.
Example: http://jsfiddle.net/RMXfc/
Or you can increase padding and set negative margin at the same time. This will reduce gap.
Example: http://jsfiddle.net/693z4/
If you give your anchor tags a display: block; you will have a solid clickable area.
a {
line-height:1.5em;
display: block;
}
JSFIDDLE
One problem with display: block; is without a specified width, then entire 100% width is clickable.
The only way to approximate it without messing with the rest of the layout of your text (including the surrounding text of the link) is to add some top/bottom paddings to these links..
So adding padding:3px 0; to your code would fix the issue.
(it will require adjusting, though, in relation to your font-size and line-height)
Demo at http://jsfiddle.net/F52uY/7/
http://74.52.155.226/~projtest/team/harmeet/smoke51/products.html
That is the design that i am currently working on. If you inspect element on the banner below the navigation you can see that the 10px solid white border is taking some gap below the image. I am puzzled as to where is that coming from as logically the border should surround the image only no matter what the height of image is.
you can put display: block; on your <img>
That is because your image in the div.innerbanner is inline (images are inline be default). The space you seen is the descender height.
You need to create a block element of the image to prevent any descender height to show. Try adding this to your CSS:
div.innerbanner img { display: block; }
I need to place an icon of 48x48 as background. I have this icon in my image sprite where of course there are many other images.
Is there a way to show as background only a porition of the image?
thanks
EDIT: Is there a way to do this without setting width-height of the backgrounded element? (I am not sure if acutally i can set a width-height)
Edit2: this is what i need: http://jsfiddle.net/pdxnj/
Thanks
Set the width and height of the element to 48px.
.element{
width: 48px;
height: 48px;
}
Set the background of the element to your image
.element{
background-image: url('image.png');
}
Move the background so that the top left corner of the icon is positioned correctly.
.element{
background-position: 20px 94px;
}
The two numbers in background-position are the X and Y coordinates (respectively) where the top left corner of your 48px by 48px is in your sprite image. So maybe it's actually 96px 0px or something.
EDIT
If you can't control the width and height of the element you are trying to put the background in, but you can add new DOM elements, you can try adding a span inside the element you really want to put the image as a background for.
It would look something like:
<div id="noControl">
<span id="justCreated">
</span>
</div>
and the CSS would look exactly the same as above, except you would need to treat the inline span as a block element:
#justCreated{
display: inline-block;
}
EDIT 2
If you have control over new DOM elements, and want to make your sprite the background without messing with a span, just add another div inside your original one.
Would wind up looking like:
<div id="noControl">
<div id="justCreated">
ALL of the content that used to be inside #noControl
</div>
</div>
and the CSS for it would be
#justCreated{
width: 48px;
height: 48px;
background-image: url('image.png');
background-position: 96px 0px;
z-index: -200;
/* z-index of all the contents needs to be not set, or set to larger than -200 */
}
This is all theoretical, but it SHOULD work.
This way, you can apply the sprite sizing to a block element without messing with the inline stuff. This may affect CSS if it addresses elements by child status (like #noControl > a), because you are inserting a div between the parent and the child.
I am still researching whether you can do this at all if you have no control over the DOM at all.
simple answer no, but by using html elements you can. Html element hight and width should match the background portion of image.
You can if you're not going to be setting a repeating background. Otherwise no.
To do this, you need to play around with the background offset, and width/height of the actual element that you're setting the background on.
it will depend on how much whitespace is around it in the sprite whether it will fit where you need it to without showing parts of other images.. however you could e.g. put a span where you want the image and crop the span to 48x48 so that it only shows the icon itself. it kind of depends what you want to use it for and how the sprite is built
It's better using ::before or ::after so you can easily define your image size without having overflow problems!
This is possible. You need to display that in a 48x48 div then set position: absolute style for the div and define left and top too for it. Also set z-index: 0 for the div so that it appears under everything.