开发者

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:

  1. You can't set "staticimage.png" as a default in any other way but as a background image using CSS
  2. 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

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜