Improve company productivity with a Business Account.Sign Up

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 355
  • Last Modified:

CSS list background image

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
Panos
Asked:
Panos
  • 10
  • 9
  • 2
3 Solutions
 
Mark BradyPrincipal Data EngineerCommented:
You are missing the quotes around the image location. Change

url(images/menu_img_bg.jpg);

to

url("images/menu_img_bg.jpg");
0
 
gavsmithCommented:
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
 
Mark BradyPrincipal Data EngineerCommented:
Why didn't I think of that?
0
Easily Design & Build Your Next Website

Squarespace’s all-in-one platform gives you everything you need to express yourself creatively online, whether it is with a domain, website, or online store. Get started with your free trial today, and when ready, take 10% off your first purchase with offer code 'EXPERTS'.

 
gavsmithCommented:
sorry for cross posting I got distracted doing other things while responding your post wasn't there when I started!
0
 
PanosAuthor Commented:
Hi.
It is still not working
0
 
PanosAuthor Commented:
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
 
gavsmithCommented:
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
 
PanosAuthor Commented:
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
 
PanosAuthor Commented:
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
 
gavsmithCommented:
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
 
PanosAuthor Commented:
I still can't get it inline
0
 
gavsmithCommented:
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
 
gavsmithCommented:
can you post a screenshot of how it looks now?
0
 
PanosAuthor Commented:
for your last code screen 3
0
 
gavsmithCommented:
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
 
PanosAuthor Commented:
This is a test page.
I don't have any other style.
0
 
gavsmithCommented:
That's odd then cause it looks completely different for me:

 Screen
0
 
PanosAuthor Commented:
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
 
PanosAuthor Commented:
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
 
gavsmithCommented:
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
 
PanosAuthor Commented:
Thank you for your help.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Easily Design & Build Your Next Website

Squarespace’s all-in-one platform gives you everything you need to express yourself creatively online, whether it is with a domain, website, or online store. Get started with your free trial today, and when ready, take 10% off your first purchase with offer code 'EXPERTS'.

  • 10
  • 9
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now