Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

CSS list background image

Posted on 2011-03-11
21
Medium Priority
?
352 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 10
  • 9
  • 2
21 Comments
 
LVL 20

Assisted Solution

by:Mark Brady
Mark Brady earned 200 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
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

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

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

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 …
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

609 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