Solved

CSS list background image

Posted on 2011-03-11
21
336 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
How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

 
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

Better Security Awareness With Threat Intelligence

See how one of the leading financial services organizations uses Recorded Future as part of a holistic threat intelligence program to promote security awareness and proactively and efficiently identify threats.

Join & Write a Comment

Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
This article explains how to prepare an HTML email signature template file containing dynamic placeholders for users' Azure AD data. Furthermore, it explains how to use this file to remotely set up a department-wide email signature policy in Office …
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…
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

706 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

20 Experts available now in Live!

Get 1:1 Help Now