CSS - problems with images/links
I'm trying to create a CSS for these lines, but they are not working in the way I want. There will be several similar lines like this(about 60).
First: all lines will use img src="staticimage.png". Is it possible to set this image as default in CSS(It will handle a link, set in the "a" tag before)?
Second: how can I remove the dimensioning code (width="50" align="right) from this image and put it in the CSS?
Here is my code:
HTML Code:
<div id="whiteborder"><img src="image1.png">Text 1<a href="linkone.html"><img src="staticimage.png" width="50" align="right"></a></div>
<div id="whiteborder"><img src="image2.png">Text 2<a href="linktwo.html"><img src="staticimage.png" width="50" align="right"></a></div>
<div id="whiteborder"><img src="image3.png">Text 3&开发者_如何学运维lt;a href="linkthree.html"><img src="staticimage.png" align="right"></a></div>
CSS code:
#whiteborder
{
background: white;
margin: 2px 10px 0px 10px;
box-sizing: border-box;
padding: 20px;
text-align: left;
font-weight: bold;
font-size:10px;
}
PS: all texts with numbers will be different. I don't want any Javascript to set these lines.
Thanks in advance!
I'm not entirely clear on what you're trying to build here but to address your individual queries:
- You can't set "staticimage.png" as a default in any other way but as a background image using CSS
- To remove the "dimensioning code" from the image HTML you can set width:50px; in your CSS and align it to the right with float:right;
You should be able to sort your image alignment out like this:
#whiteborder a img
{
width: 50px;
float: right;
}
However, if you change your a
tag to display: block; float: right
and set a background-image
on it, you can then dispense with the img
and set the style for all those a
tags in one place.
Working Demo
HTML:
<div id="whiteborder">
<img src="image1.png">Text 1 <a href="linkone.html"></a>
<img src="image2.png">Text 2 <a href="linktwo.html"></a>
<img src="image3.png">Text 3 <a href="linkthree.html"></a>
</div>
CSS:
#whiteborder a{
background: repeat-x url("staticimage.png");
width: 50px;
height: 10px;
...
}
P.S. you shouldn't use the same id several times, but if you need you can use class instead
精彩评论