I am confused about using CSS to display an image using the an empty <a> element.
<a class="header" href="#"></a>
does create the clickable area as specified in the following css:
.header { width: 50px; height 50px; background-image:url('images/picture.png') }
however, will not display the picture. If I also include:
.header:hover { background-image:url('images/picture.png'); }
then it will display the picture. My aim is to use the CSS to employ this method of image-to-image replacement, but I don't have the basics understood yet it would seem.
Your on the right track with your css. You must add display:block to allow the anchor tag to pick up the hight.
.header { width: 50px;
height 50px;
background:url('images/picture.png');
display:block;
}
Related
I am trying to have a header div inherit it's width from it's parent.
The header div is position fixed.
However, as you can see in the simple PLNKR i've created here:
http://plnkr.co/edit/wxcvssALhjxtzc7J4w3V
it is actually wider than it's parent element, which is very weird.
The html looks like this:
<div class="category-body">We are in the category-body
<div class="category-header">We are in the category-header</div>
</div>
And the CSS looks like this:
.category-body {
margin-left: 17% !important;
width: 67%;
background-color: red;
height: 500px;
}
.category-header {
position: fixed;
top: 51px;
width: inherit;
background-color: green;
}
Any ideas why this is happening? And, of course, how to fix it?
You are not using a reset css sheet so probably the browser's body margin by default is messing with your code. It will affect your parent as the position is static but it will NOT affect your fixed child as fixed elements get out of the html flow.
just add:
html, body {margin:0;}
FIDDLE
I am trying to add an "external link image" to a-links with a target attribute. I have taken the image Wikipedia uses (http://bits.wikimedia.org/static-1.24wmf5/skins/vector/images/external-link-ltr-icon.svg) and converted it to base64 with http://webcodertools.com/imagetobase64converter. I want to add it as a background image to a[target]:after.
<a target="_blank" href="http://bits.wikimedia.org/static-1.24wmf5/skins/vector/images/external-link-ltr-icon.svg">External link</a>
a[target]:after {
background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwIiBoZWlnaHQ9IjEwIj48ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtODI2LjQyOSAtNjk4Ljc5MSkiPjxyZWN0IHdpZHRoPSI1Ljk4MiIgaGVpZ2h0PSI1Ljk4MiIgeD0iODI2LjkyOSIgeT0iNzAyLjMwOSIgZmlsbD0iI2ZmZiIgc3Ryb2tlPSIjMDZjIi8+PGc+PHBhdGggZD0iTTgzMS4xOTQgNjk4Ljc5MWg1LjIzNHY1LjM5MWwtMS41NzEgMS41NDUtMS4zMS0xLjMxLTIuNzI1IDIuNzI1LTIuNjg5LTIuNjg5IDIuODA4LTIuODA4LTEuMzExLTEuMzExeiIgZmlsbD0iIzA2ZiIvPjxwYXRoIGQ9Ik04MzUuNDI0IDY5OS43OTVsLjAyMiA0Ljg4NS0xLjgxNy0xLjgxNy0yLjg4MSAyLjg4MS0xLjIyOC0xLjIyOCAyLjg4MS0yLjg4MS0xLjg1MS0xLjg1MXoiIGZpbGw9IiNmZmYiLz48L2c+PC9nPjwvc3ZnPg==);
}
The image seems somehow to be there. Chrome inspector seems to know about it, but nothing is shown however. Why is the image not shown? Or rather, what is the minimum CSS I need to add to make the image display?
Here is a fiddle: http://jsfiddle.net/lborgman/8CTWa/
The pseudo element has no dimensions: http://jsfiddle.net/8CTWa/3/
a[target]:after {
background-image: url(...);
content: "";
display: inline-block; /* so we can give dimensions */
height: 50px;
width: 50px;
}
You can also insert the image within content: http://jsfiddle.net/8CTWa/4/
a[target]:after {
content: url("...");
}
I have an unordered list as a menu and the current item has a class active. I want the the active item to have a little box below it like in the image attached. How would I do this using just CSS? If there is no (good) answer I will go old-school and create an image as a background-image.
What you're describing can be done using a pseudo-element and positioning it relative to the element you're decorating: http://jsfiddle.net/fC7gn/
.box {
position: relative;
}
.box:after {
content: '';
position: absolute;
top: 100%;
width: 100%;
height: 10px;
background-color: blue;
}
You can add the following to your CSS:
a:hover{border-bottom:10px solid red;}
You can add the border-bottom style to any element. I attach it to the a tag so it spans the entire width of the content it contains.
Here's an example fiddle (don't mind the extra fluff)
I have an image with text aligned to the left of it. Both the image and text is sitting inside a div that I have styled to look like a red bubble in the background of the post. The bubble only goes as far as the text and not the image (the image goes down much farther than the text), causing the image to break into other posts. How do I make this div the correct size that can fit anything i put into it (in this case the image)?
jsfiddle: http://jsfiddle.net/Sederu/CzNr6/
Add overflow:auto to your .post-bubble rule.
div.post-bubble {
padding: 10px;
background-color: #e17474;
border-radius: 10px;
overflow:auto;
}
jsFiddle example
If you want the content to allow anything inside of it, give it overflow:auto.
If you want the bubble to extend so that it also covers the img tag, however, give .post-bubble a height:
div.post-bubble {
padding: 10px;
background-color: #e17474;
border-radius: 10px;
height:600px;
overflow:auto;
}
The reason why the image extends farther than the div is because the img is taken out of the flow of the page, i.e. no longer being a block element, when you declare align:right.
either add overflow:auto; to your post-bubble div or define a height to the post-bubble div eg.. height: 600px; covers it nicely..
On div tag do a display:block in css
I think the best solution is to force element to self-clear its children.
div.post-bubble:after {
clear: both;
content: '';
display: table;
}
You can also create a specific class for other elements in your project/projects like:
.clear-children:after {
clear: both;
content: '';
display: table;
}
And add this class (.clear-children, without :after) to every element with floated children.
http://jsfiddle.net/CzNr6/4/
I want to wrap an image into an html DIV and, since I want this to be fully scalable with the size of the window, I want to set the width of the DIV in percentage as follows:
html
<div id="wrapper">
<img src="http://openclipart.org/people/netalloy/rally-car.svg" />
</div>
css
#wrapper {
position: absolute;
width: 50%;
}
#wrapper img {
width: 100%;
}
The image should determine the height of its container. This is because the image width is set to 100% and the image height is calculated accordingly maintaining the correct aspect ratio.
The result is visible on jsfiddle: http://jsfiddle.net/lorenzopolidori/5BN4g/15/
My questions are:
Why do all modern browsers render the wrapper DIV 5px taller than the inner image?
How can I get rid of this 5px gap, while still setting all the sizes in percentage and without using javascript?
Surprisingly, this happens in Chrome (21.0.1180.89), Firefox (15.0.1) and IE8, while IE7 renders it correctly, matching the height of the DIV with the height of the image.
Check this out :
http://jsfiddle.net/5BN4g/29/
It's a line-height issue :-)
You need :
#wrapper {
width: 60%;
background-color: #aaa;
margin: 50px auto;
line-height:0;
}
#wrapper img {
width:100%;
border: 1px dashed red;
box-sizing:border-box;
}
I used box-sizing to make sure the width of the image doesn't overflow the container
................
Hi now add vertical-align:top in your img tag throw css
as like this
#wrapper img {
width: 100%;
border: 1px dashed red;
vertical-align:top; // add this line
}
live demo
OK, fiddling about, I found a good possible solution:
#wrapper img {
display: block;
width: 100%;
border: 1px dashed red;
}
Changing from the default inline display to a block display eliminates the line-height problem straight away.
This approach is also semantically correct because in this case what we really want is a single image wrapped in a DIV without any other elements in it, so the concept of line-height needs to be completely wiped off by displaying the image as a block.
It works on all major browsers: http://jsfiddle.net/lorenzopolidori/5Cpf2/3/
I think you shuold set align property to force browser show correctly img tag.
<div id="wrapper">
<img align="center" src="http://openclipart.org/image/800px/svg_to_png/74557/rally-car.png" />
</div>
DEMO
I think is because it doesn't see as a Table
i added the display:table in your code
And it looks fine now, check the link
Example Display Table
Your issue is that an image -- the <img> tag, to be exact -- is an inline element. All you need to do is set display: block on the image and the extra padding goes away. Demo.