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]
