Just put the padding code to the 'a' element.
2011/10/26 Konstantinos <[email protected]> > Hello AJ, > what i am trying is to make block hover effect for a list of links. > But i want into each block to have an image and a text side-by-side. > When i am adding a background-image and i use the " padding:10px 10px > 15px 60px; " in my li element inside my block, the background image is > not clickable but only the a link <a href="#">Title 3 <br /><span > class="info"> Here is the info for title 3.</span></a>... > > In other words, i want to have inside a block an image and a text and > use it as a link. > > I hope i helped you... > > I want to do something like this http://tinyurl.com/5wcq2cm. > > Thanks > > > On Oct 25, 11:38 pm, "AJ" <[email protected]> wrote: > > 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] -- -- 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]
