SitePoint Sponsor

User Tag List

Results 1 to 7 of 7

Thread: invisible image

  1. #1
    SitePoint Wizard
    Join Date
    May 2012
    Posts
    1,106
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Post invisible image

    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.


    HTML Code:
     <!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. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,170
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    You can set the dimensions for the image in the CSS and/or the HTML. E.g.

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

  3. #3
    SitePoint Wizard
    Join Date
    May 2012
    Posts
    1,106
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    You can set the dimensions for the image in the CSS and/or the HTML. E.g.

    Code:
    <img src="img1.png" width="200" height="100" />
    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. #4
    SitePoint Evangelist silver trophybronze trophy
    Join Date
    Jul 2013
    Posts
    406
    Mentioned
    22 Post(s)
    Tagged
    0 Thread(s)
    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. #5
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,507
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    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. #6
    SitePoint Wizard
    Join Date
    May 2012
    Posts
    1,106
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Thank you so much it solves my problem.

  7. #7
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,507
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    You are very welcome, jemz. Thank you for the feedback. Have a nice day.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •