Solved

CSS list background image

Posted on 2011-03-11
21
340 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
Does Powershell have you tied up in knots?

Managing Active Directory does not always have to be complicated.  If you are spending more time trying instead of doing, then it's time to look at something else. For nearly 20 years, AD admins around the world have used one tool for day-to-day AD management: Hyena. Discover why

 
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
 
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

PRTG Network Monitor: Intuitive Network Monitoring

Network Monitoring is essential to ensure that computer systems and network devices are running. Use PRTG to monitor LANs, servers, websites, applications and devices, bandwidth, virtual environments, remote systems, IoT, and many more. PRTG is easy to set up & use.

Question has a verified solution.

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

So you have coded your own WordPress plugin and now you want to allow users to upload images to a folder in the plugin folder rather than the default media location? Follow along and this article will show you how to do just that!
This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

770 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