Invisible image

HTML & CSS
1

HI, I need some help on this, I am trying to create unordered list which has an image with nested li’s,the problem is that when the image is unresolved in the url the nested li’s will not properly align in the box or the nested li’s will go up…I want that when the image is invisible the neted li’s will properly align in its box or it’s in proper position can you please help me on this…

Thank you in advance.


 <!DOCTYPE html>
<html>
<head>
    <title>Menu image</title>
    <style type="text/css">


        ul.pictest{
            width: 100%;


        }
        ul.pictest li{
            list-style: none;
            float:left;
            margin-right: 5px;
            height: 25px;

        }
        .pictest ul{
          width: 170px;
          border: solid 1px red;
          color:red;
        overflow: hidden;
        position: relative;
        top: -121px;
        text-align: left;
        padding: 0;
        margin: 0;



        }

        .pictest ul li {
            padding: 0;
            width: 150px;
            display: none;

        }

        .pictest   li:hover li {
            display: block;
            background-color: yellow;
        }
    </style>
</head>
<body>

   <ul class="pictest">
        <li><img src="img1.png"/>
          <ul>
            <li><a href="#">ABC</a></li>
            <li><a href="#">EFG</a></li>
            <li><a href="#">HIJ</a></li>
           </ul>
        </li>
       <li><img src="img2.png" >
           <ul>
               <li><a href="#">check</a></li>
               <li><a href="#">graphics</a></li>
               <li><a href="#">design</a></li>
           </ul>
        </li>
       <li><img src="img3.png"></li>
   </ul>

</body>
</html>
2

You can set the dimensions for the image in the CSS and/or the HTML. E.g.

<img src="img1.png" width="200" height="100" />
3

Hi ralph, Thanks for the reply…I mean that when the image is not present i want that the nested li’s will display properly,…because here in my example the nested li’s will go up when i hover on it if there is no image, it will not align properly…my img here is (250 x 129)

4

In that case I guess you can set the height of the ul.pictest li to the needed image-height, and give the .pictest ul li their own height for the submenu links.

Remaining problem though: if the visitor is changing the font-size of the browser, the submenu items can overflow the fixed height.

To avoid that, you can set the images as a background-image (each with a class in the main list items), and draw some extra px in the bottom of the image (with 50px extra no problems, I assume). Or give a background-color for the area where the image is ending. Then you can take a min-height for the main li’s instead of a fixed height.

5

Set the foreground images to {display:block} or {display:inline-block;vertical-align:top;} and they will retain their dimensions if the image is missing.

6

Thank you so much it solves my problem. :slight_smile:

7

You are very welcome, jemz. Thank you for the feedback. Have a nice day. :slight_smile: