www.webdeveloper.com
Results 1 to 3 of 3

Thread: row image swap dont click

  1. #1
    Join Date
    Sep 2006
    Posts
    375

    row image swap dont click

    Hi,

    I have code that has links in a row and swaps images.
    This was an ordeal to say the least.

    The images dont resize as i thought on browser resize so I had to use media queries to alter size of these images.

    Can I get the images to resize without adding media queries?



    Code:
    img, embed, object, video {
    
      max-width: 100%;
       
    }
    
    ul.nav
    {
        list-style-type: none;
        padding: 0;
        margin: 0;
        float: left;
        
    }
    
    
    .nav li#welcome a {
    	 background-image:url(images/ic1.png); 
      background-repeat: no-repeat; 
    	 
    	 }
    .nav li#welcome a:hover {
    	 background-image:url(images/ic1b.png); 
      background-repeat: no-repeat; 
     
      
       }
    
    .nav li#welcome2 a {
    	 background-image:url(images/ic1.png); 
      background-repeat: no-repeat; 
    	 
    	 }
    .nav li#welcome2 a:hover {
    	 background-image:url(images/ic1b.png); 
      background-repeat: no-repeat; 
      
       }
     .nav li#welcome3 a {
    	 background-image:url(images/ic1.png); 
      background-repeat: no-repeat; 
    	 
    	 }
    .nav li#welcome3 a:hover {
    	 background-image:url(images/ic1b.png); 
      background-repeat: no-repeat; 
     
      
       }
    
    .nav li#welcome4 a {
    	 background-image:url(images/ic1.png); 
      background-repeat: no-repeat; 
    	 
    	 }
    .nav li#welcome4 a:hover {
    	 background-image:url(images/ic1b.png); 
      background-repeat: no-repeat; 
      
       }
     
       
    #head ul li a
    	{
    	text-decoration: none;
    	
    	float:left;
    	margin-right:40px;
    
    	}
    
    #head ul li 
    {
         display: inline;
    	 
    
     }
    #head img
    {
          max-width: 100%;
    
     }
    
    
    #head ul
    {
    /*margin-left: 15%;*/
    padding:0;
    
    list-style-type: none;
    
    border:none;
    
    }	
    
    
    
    @media screen and (min-width: 960px) 
    {
    	ul.nav a{  height: 100px; width: 100px;}
    }
    
    @media screen and (max-width: 959px) 
    {
    	ul.nav a{  height: 50px; width: 50px;}
    }
    
    </style>
    </head>
    
    <body>
    
    lkjl
    <div id="head">
      <ul class="nav">
        <li id="welcome"><a href="home.html"></a></a></li>
        <li id="welcome2"><a href="home.html"></a></a></li>
          <li id="welcome3"><a href="home.html"></a></a></li>
        <li id="welcome4"><a href="home.html"></a></a></li>
      </ul>
    </div>
    Last edited by jagguy; 05-17-2013 at 09:25 PM.

  2. #2
    Join Date
    Mar 2011
    Posts
    1,160
    The CSS rule for the 'img' element at the top of your stylesheet does not apply to background images. For that, you need to set the 'background-size' property.

  3. #3
    Join Date
    Sep 2006
    Posts
    375
    NO that doesnt work (background size with %) I tried it. I gave up on the idea I cant find a solution anywhere.
    I set the different sizes with media query but that means loading resized images.


    Code:
    <style type="text/css">
    
     img, embed, object, video {
    
      max-width: 100%;
       
    }
    
    ul.nav
    {
        list-style-type: none;
        padding: 0;
        margin: 0;
        float: left;
        
    }
    
    
    
    #head ul li 
    {
         display: inline;
    	 
    
     }
    #head img
    {
         
    
     }
    
    
    #head ul
    {
    /*margin-left: 15%;*/
    padding:0;
    
    list-style-type: none;
    
    border:none;
    
    }	
    
    
    
    
    
    
    .nav li#welcome2 a {
    	 background-image:url(images/ic1.png); 
      background-repeat: no-repeat; 
       width:100px;
      height:100px;
    	 background-size:100% 100%;
    	 }
    .nav li#welcome2 a:hover {
    	 background-image:url(images/ic1b.png); 
      background-repeat: no-repeat; 
      
    }
    
    #head ul li a
    	{
    	text-decoration: none;
    	float:left;
    	margin-right:40px;
    
    	}
    #head ul li 
    	{
    	
    
    	}	
    
    @media screen and (min-width: 960px) 
    {
    	.nav li#welcome a {
    	 background-image:url(images/ic1.png); /*todo  set %size here */
      background-repeat: no-repeat; 
      width:100px;
      height:100px;
      
    	
    	 }
    .nav li#welcome a:hover {
    	 background-image:url(images/ic1b.png); 
      background-repeat: no-repeat; 
     
      
       }
    }
    
    @media screen and (max-width: 959px) 
    {
    	.nav li#welcome a {
    	 background-image:url(images/bcave1.png); /*todo  set %size here */
      background-repeat: no-repeat; 
      width:80px;
      height:80px;
      
    	
    	 }
    .nav li#welcome a:hover {
    	 background-image:url(images/boy3.png);
      background-repeat: no-repeat; 
     
      
       }
    }
    
    </style>
    </head>
    
    <body>
    
    lkjl33
    <div id="head">
      <ul class="nav">
        <li id="welcome"><a href="home.html"></a></li>
        <li id="welcome2"><a href="home.html"></a></li>
          
      </ul>
    </div>

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles