Hello Kostas, Please bear with me. Can you explain exactly what you want and/or expect it to do? I am unclear as to what you mean when you say, "... 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.". Thank you. Omicron
-----Original Message----- From: [email protected] [mailto:[email protected]] On Behalf Of Konstantinos Sent: Monday, October 24, 2011 6:05 PM To: Design the Web with CSS Subject: [Design with CSS 3581] My list block is not working 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] -- -- 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]
