Hello, i am trying to create a ul li list but with blocks. The thing
that i cant understand is how to put the background image into the a
block. My html file is the following:
<div class="controls">
<ul class="communicate">
<li class="title">Master menu title</li>
<li class="communicate-top"><a href="#">Title1 <br /><span
class="info">Here is the info for title 1.</span></a></li>
<li class="download"><a href="#">Title 2 <br /><span
class="info"> Here is the info for title 2.</span></a></li>
<li class="share"><a href="#">Title 3 <br /><span
class="info"> Here is the info for title 3.</span></a></li>
<li class="create-new"><a href="#">Title 4 <br /><span
class="info"> Here is the info for title 4.</span></a></li>
</ul>
</div>
The css used for the above code is the following:
.controls {
width:200px;
float:left;
margin-top:50px;
margin-left:50px;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border:1px solid #D5D6D7;
border-bottom:none;
}
.communicate {
list-style-type:none;
background-color:#ffffff;
margin:0;
padding:0;
}
.communicate li {
padding:10px 10px 15px 60px;
border-bottom:1px solid #D5D6D7;
}
.communicate li a {
color:#999;
text-decoration:none;
display:block;
border:none;
}
.communicate li a:hover {
background-color:#E5F1FA;
}
.communicate .title {
background-color:F3F0DE;
font-weight:bold;
margin:0;
padding:3px;
}
.communicate-top {
background: url("images/icon-1.png") no-repeat scroll 10px 13px
transparent;
display:block;
}
a.communicate-top {
display:block;
}
.communicate .share {
background: url("images/icon-2.png") no-repeat scroll 10px 13px
transparent;
}
.download {
background: url("images/icon-3.png") no-repeat scroll 10px 13px
transparent;
}
.create-new {
background: url("images/icon-4.png") no-repeat scroll 10px 13px
transparent;
}
The problem is that i cannot make all the li acting like a block. It
only works for the a href inside the li tag but not with the
background image.
Do you have any ideas what can i do???
Thanks for your time
Kostas
--
--
You received this because you are subscribed to the "Design the Web with CSS"
at Google groups.
To post: [email protected]
To unsubscribe: [email protected]
