Solved

CSS list background image

Posted on 2011-03-11
21
337 Views
Last Modified: 2012-05-11
Hello experts.
I want to style a image list menu.i also need for every image a background (like image holder-frame).
I'm setting for this a background for the list but it is not working.
Any help?
#mainmenu {height:146px;margin: 0;padding: 0;}
#mainmenu  li {background: url(images/menu_img_bg.jpg); background-repeat: no-repeat;border:0;display: inline;}
#mainmenu  img { border:0; width:100px; height:116px;}
  <ul id="mainmenu">
    <li>
     <a href = "#">
        <img name="catimage1" id="catimage1" src = "images/LinkImage1" border="0" alt="" title="">
     </a>
    </li>
    <li>
     <a href = "#">
        <img name="catimage2" id="catimage2" src = "images/LinkImage2" border="0" alt="" title="">
     </a>
    </li>
 </ul>
0
Comment
Question by:Panos
  • 10
  • 9
  • 2
21 Comments
 
LVL 20

Assisted Solution

by:Mark Brady
Mark Brady earned 50 total points
ID: 35107523
You are missing the quotes around the image location. Change

url(images/menu_img_bg.jpg);

to

url("images/menu_img_bg.jpg");
0
 
LVL 10

Expert Comment

by:gavsmith
ID: 35107603
I had problems recently similar to this and it was because I wasn't putting the image name in quotation/apostrophe marks I.E

#mainmenu  li {background: url(images/menu_img_bg.jpg); background-repeat: no-repeat;border:0;display: inline;}

Doesn't work

#mainmenu  li {background: url('images/menu_img_bg.jpg'); background-repeat: no-repeat;border:0;display: inline;}

Does work

I'm not sure if that's what is causing your problem, just a suggestion.

0
 
LVL 20

Expert Comment

by:Mark Brady
ID: 35107606
Why didn't I think of that?
0
 
LVL 10

Expert Comment

by:gavsmith
ID: 35107644
sorry for cross posting I got distracted doing other things while responding your post wasn't there when I started!
0
 
LVL 2

Author Comment

by:Panos
ID: 35107700
Hi.
It is still not working
0
 
LVL 2

Author Comment

by:Panos
ID: 35107774
Hi again.
I put the 'a'  tag inside a 'p' tag but i can t get the list 'inline'.(the images are shown now)
<ul id="mainmenu">
<li style="display:inline">
<p style="background:url(style/images/menu_img_bg.jpg) no-repeat; height:146px; width:108px;">
<a href = "#">
<img name="catimage1" id="catimage1" src = "images/images.jpg" border="0" alt="" title="" style="border:0; width:80px; height:100px;">

</a></p>
</li>
<li style="display:inline">
<p style="background:url(style/images/menu_img_bg.jpg) no-repeat; height:146px; width:108px;">
<a href = "#">
<img name="catimage2" id="catimage2" src = "images/images_cd.jpg" border="0" alt="" title="" style="border:0; width:80px; height:100px;">
</a></p>
</li>
</ul>

Open in new window

0
 
LVL 10

Expert Comment

by:gavsmith
ID: 35107913
it looks like you are putting your pictures over the top of the background. You shouldn't need the 'p' tags. Can you provide pictures of how this looks?
0
 
LVL 2

Author Comment

by:Panos
ID: 35107985
Attached code and screen shot
<table width="100%" cellpadding="0" cellspacing="0">
<tr>
  <td>
  <ul id="mainmenu" style="width:500px">
    <li style="display:inline">
     <p style="background:url(style/images/menu_img_bg.jpg) no-repeat; height:146px; width:108px;">
     <a href = "#">
	  <img name="catimage1" id="catimage1" src="style/images/images.jpg" border="0" alt="" title="" style="border:0; width:80px; height:100px;">
     </a></p>
    </li>
    <li style="display:inline">
     <p style="background:url(style/images/menu_img_bg.jpg) no-repeat; height:146px; width:108px;">
     <a href = "#">
	  <img name="catimage2" id="catimage2" src="style/images/images.jpg" border="0" alt="" title="" style="border:0; width:80px; height:100px;">
     </a></p>
    </li>
 </ul>
</td>
</tr> 
</table>

Open in new window

screen.gif
0
 
LVL 2

Author Comment

by:Panos
ID: 35108007
without the p tag
<table width="100%" cellpadding="0" cellspacing="0">
<tr>
  <td>
  <ul id="mainmenu" style="width:500px">
    <li style="background:url('style/images/menu_img_bg.jpg') no-repeat; height:146px; width:108px;display:inline;">
     <p style="">
     <a href = "#">
	  <img name="catimage1" id="catimage1" src="style/images/images.jpg" border="0" alt="" title="" style="border:0; width:80px; height:100px;">
     </a></p>
    </li>
    <li style="background:url('style/images/menu_img_bg.jpg') no-repeat; height:146px; width:108px;display:inline;">
     <a href = "#">
	  <img name="catimage2" id="catimage2" src="style/images/images.jpg" border="0" alt="" title="" style="border:0; width:80px; height:100px;">
     </a>
    </li>
 </ul>
</td>
</tr> 
</table>

Open in new window

screen2.gif
0
 
LVL 10

Expert Comment

by:gavsmith
ID: 35108148
Your right it's not enforcing the sizes on the li because of the content but I would use <div> not <p>

try:

<table width="100%" cellpadding="0" cellspacing="0">
<tr>
  <td>
  <ul id="mainmenu" style="width:500px">
    <li style="display:inline">
     <div style="background:url('style/images/menu_img_bg.jpg') no-repeat; height:146px; width:108px;padding-left:10px;padding-top:16px">
     <a href = "#">
	  <img name="catimage1" id="catimage1" src="style/images/images.jpg" border="0" alt="" title="" style="border:0; width:80px; height:100px;">
     </a></div>
    </li>
    <li style="display:inline">
     <div style="background:url('style/images/menu_img_bg.jpg') no-repeat; height:146px; width:108px;padding-left:10px;padding-top:16px">
     <a href = "#">
	  <img name="catimage2" id="catimage2" src="style/images/images.jpg" border="0" alt="" title="" style="border:0; width:80px; height:100px;">
     </a></div>
    </li>
 </ul>
</td>
</tr> 
</table> 

Open in new window

0
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 
LVL 2

Author Comment

by:Panos
ID: 35108196
I still can't get it inline
0
 
LVL 10

Accepted Solution

by:
gavsmith earned 450 total points
ID: 35108205
If that format's it correctly you don't really need the ul

<table width="100%" cellpadding="0" cellspacing="0">
<tr>
  <td>
     <div style="background:url('images/Banner-earth-lrg.jpg') no-repeat; height:146px; width:108px;padding-left:10px;padding-top:16px">
     <a href = "#">
	  <img name="catimage1" id="catimage1" src="images/ISSOnlineLogo.gif" border="0" alt="" title="" style="border:0; width:80px; height:100px;">
     </a></div>
     <div style="background:url('images/ISSOnlineLogo.gif') no-repeat; height:146px; width:108px;padding-left:10px;padding-top:16px">
     <a href = "#">
	  <img name="catimage2" id="catimage2" src="images/ISSOnlineLogo.gif" border="0" alt="" title="" style="border:0; width:80px; height:100px;">
     </a></div>
</td>
</tr> 
</table>  

Open in new window


Should give the same effect
0
 
LVL 10

Expert Comment

by:gavsmith
ID: 35108216
can you post a screenshot of how it looks now?
0
 
LVL 2

Author Comment

by:Panos
ID: 35108355
for your last code screen 3
0
 
LVL 10

Expert Comment

by:gavsmith
ID: 35108393
Do you have some styling somewhere that floats divs? what browser are you using? can you post all the code for the page and css file if you have a seperate one?
0
 
LVL 2

Author Comment

by:Panos
ID: 35108434
This is a test page.
I don't have any other style.
0
 
LVL 10

Expert Comment

by:gavsmith
ID: 35108766
That's odd then cause it looks completely different for me:

 Screen
0
 
LVL 2

Author Comment

by:Panos
ID: 35110056
Ok.I see now.I did keep the display inline style .that 's why my result was not like yours.
But the problem with the inline remains gavsmith.
0
 
LVL 2

Assisted Solution

by:Panos
Panos earned 0 total points
ID: 35110124
OK.I have the full solution.
I did add a float left and it is working now in all browsers.May i should check this with list way too.
Thank you for your help.
<style type="text/css">
.divclass{
 background:url('style/images/menu_img_bg.jpg') no-repeat;
 height:146px;
 width:108px;
 padding-left:10px;
 padding-top:16px;float:left;}
</style>
<table width="100%" cellpadding="0" cellspacing="0">
<tr>
  <td>
     <div class="divclass">
     <a href = "#">
        <img name="catimage1" id="catimage1" src="style/images/images.jpg" border="0" alt="" title="" style="border:0; width:80px; height:100px;">
     </a>
   </div>
     <div class="divclass">
     <a href = "#">
        <img name="catimage2" id="catimage2" src="style/images/images.jpg" border="0" alt="" title="" style="border:0; width:80px; height:100px;">
     </a></div>

</td>
</tr>
</table>  
0
 
LVL 10

Expert Comment

by:gavsmith
ID: 35113737
Turns out the reason it was ignoring the set sizes is because you were using display:inline. If you had used display:inline-block it would have done what you wanted (I think). There is often more than one way to achieve the same result in css.
0
 
LVL 2

Author Closing Comment

by:Panos
ID: 35145529
Thank you for your help.
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
This article discusses four methods for overlaying images in a container on a web page
In this tutorial viewers will learn how to customize the background color and font color of highlighted text using the ::selection element in CSS Begin by defining the selected text as an element in CSS by typing "::selection": Style the ::selection…
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…

920 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

11 Experts available now in Live!

Get 1:1 Help Now