I'm working on a psd to html and I have an image like so:
So meaning I have a <a href=""></a> tag with Image. My problem now is how can I design the link in there? Do I need to have a <br /> after the text or what?
<ul id="steps-nav">
<li>
<img src="img/building-details.png" alt="Building Details"/>
<a href="#">STEP 1: ENTER YOUR BUILDING DETAILS</a>
</li>
<li>
<img src="img/electricity-details.png" alt="Electricity Details"/>
<a href="#">STEP 2: ENTER YOUR
ELECTRICITY DETAILS</a>
</li>
</ul>
Here's my CSS:
#steps-container{
background-color:#0a0806;
opacity: 0.7;
margin-top: 43px;
border-bottom: solid 10px #abd038;
}
#steps-container .steps{
width:960px;
margin:auto;
height:50px;
}
#steps-container .steps ul li{
float:left;
}
#steps-container .steps ul li a{
text-decoration: none;
color:#ffffff;
border:solid 1px;
}
#steps-container .steps ul li a:after{
content:"\A"; white-space:pre;
}
