www.webdeveloper.com
Results 1 to 13 of 13

Thread: Navigation icons are moving when minimizing the browser page

  1. #1
    Join Date
    Mar 2012
    Posts
    18

    Navigation icons are moving when minimizing the browser page

    Hi to All

    I have a problem on my webpage with the icons that i use for navigation. When I minimize the browser icons move around. I just want them to be fixed and re-sized according to page size. Can anyone please help me on this issue. I googled and tried a lot of codes but no success.

    Thank you for any kind of help

    [www.ideagrapher.com]
    Last edited by graphycraft; 07-14-2012 at 05:20 AM.

  2. #2
    Join Date
    Mar 2011
    Posts
    1,145
    There's no way to help you without seeing your code. Either post a link to the page or post the code here.
    Rick Trethewey
    Rainbo Design

  3. #3
    Join Date
    Mar 2012
    Posts
    18
    Quote Originally Posted by rtrethewey View Post
    There's no way to help you without seeing your code. Either post a link to the page or post the code here.
    I mentioned the link to my webpage though i add the source code here

    Code:
    <!DOCTYPE html>
    
    <html>
    
    <head>
    
    <title> Graphical thoughts </title>
    
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    
    <link rel="stylesheet" type="text/css" href="./main.css" />
    
    <link href="./css" rel="stylesheet" type="text/css" />
    
    </head>
    
    <body>
    
    
    
    	<div id="aboutme" style="position: relative; margin:0px;">
    
    		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    
    	</div> <!--END PAGE A-->
    
    	
    
    	<div id="doodlings" style="position: relative; margin:0px;">
    
    		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    
    	</div> <!--END PAGE B-->
    
    
    
    	<div id="crafts" style="position: relative; margin:0px;">
    
    		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    
    	</div> <!--END PAGE C-->
    
    	
    
    	<div id="contact" style="position: relative; margin:0px;">
    
    		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    
    	</div> <!--END PAGE D-->
    
    	
    
    	<div id="footer">Copyright 2012</div>
    
    	<div id="header">
    
          <ul style="display: block;" id="nav">
    
              <li class="contact"><a href="#contact">Contact</a>    
    
              <li class="doodlings"><a href="#doodlings">Doodlings</a>  
    
              <li class="crafts"><a href="#crafts">Crafts</a>    
    
              <li class="aboutme"><a href="#aboutme">About</a>   
    
          </ul>
    
          </div>
    
          <!-- Start of SimpleHitCounter Code -->
    
          <div align="center"><a href="http://www.simplehitcounter.com" target="_blank"><img src="http://simplehitcounter.com/hit.php?uid=1269064&f=16777215&b=0" border="0" height="18" width="83" alt="web counter"></a><br><a href="http://www.simplehitcounter.com" target="_blank" style="text-decoration:none;">web counter</a></div>
    
    <!-- End of SimpleHitCounter Code -->
    
    
    
    <script src="./jquery.min.js"></script>
    
    <script>$(document).ready(function() {
    
      function filterPath(string) {
    
        return string
    
          .replace(/^\//,'')  
    
          .replace(/(index|default).[a-zA-Z]{3,4}$/,'')  
    
          .replace(/\/$/,'');
    
      }
    
      $('a[href*=#]').each(function() {
    
        if ( filterPath(location.pathname) == filterPath(this.pathname)
    
        && location.hostname == this.hostname
    
        && this.hash.replace(/#/,'') ) {
    
          var $targetId = $(this.hash), $targetAnchor = $('[name=' + this.hash.slice(1) +']');
    
          var $target = $targetId.length ? $targetId : $targetAnchor.length ? $targetAnchor : false;
    
           if ($target) {
    
             var targetOffset = $target.offset().top;
    
             $(this).click(function() {
    
               $('html, body').animate({scrollTop: targetOffset}, 2000);
    
               return false;
    
             });
    
          }
    
        }
    
      });
    
    });</script>
    
    
    
    </body>
    
    </html>
    Code:
    /* ---------by Ozan----------*/
    
    
    
    *{ margin: 0 auto;}
    
    
    
    body {
    
    	margin: 0 auto; 
    
    	font-family:georgia, times,serif; 
    
    	height:2000px;
    	width: 100&#37;;
    
    	}
    
    
    ul {list-style: none inside;}
    a{outline: none;}
    a img{border: none;}
    a, a:hover { 
      color:white;
      text-decoration:none;
      }
    
    
    #header {
    
    	position: fixed;
    	top:0px;
    
    	left:0px;
    
    	background: url(images/logo.png) 50% 0 no-repeat , url(images/header-background.png) repeat-x; 
    
    	height:355px; 
    
    	width:100%;
    
       z-index: 1500px;	
    	}
    
    
    
    ul#nav {
    	}
    	ul#nav li{
    		display: inline;
    		}
    		ul#nav li a{
    			display: block;
    			height: 50px;
    			text-indent: -9999px;
    			float: left;
    			width: 100%;
    			}
    		ul#nav li.contact a{
    	   	width: 60px;
    	   	background: url(images/contact.jpg); margin-left: 90px; margin-top: 150px;
    	   	}
    	   ul#nav li.doodlings a{
    	   	width: 66px;
    	   	background: url(images/doodlings.jpg); margin-left: 158px; margin-top: 150px;
    	   	}
    	   ul#nav li.crafts a{
    	   	width: 78px;
    	   	background: url(images/crafts.jpg); margin-left: 450px; margin-top: 150px;
    	   	}
    	   ul#nav li.aboutme a{  	
    	   	width: 61px;
    	   	background: url(images/aboutme.jpg); margin-left: 140px; margin-top: 150px;
    		   }
          ul#nav li a:hover{
          	background-position: center bottom;
          	}
    
    
    #aboutme {
       background: url(images/about-background.png)	top repeat-x;
       position: relative;
    
    	height:550px;
    
    	width:100%;
    
    	padding-top:370px;
    
    	}
    
    	
    
    #doodlings {
    	background: url(images/doodling-background.png) top repeat-x;
    	position: relative;
    
    	height:550px;
    
    	width:100%;
    
    	padding-top:370px;
    
    	}
    
    	
    
    #crafts {
    
    	background: url(images/craft-background.png) top repeat-x;
    	position: relative;
    
    	height:550px;
    
    	width:100%;
    
    	padding-top:370px;
    
    	}
    
    
    
    #contact {
    
    	background: url(images/contact-background.png) top repeat-x;
    	position: relative;
    
    	height:550px;
    
    	width:100%;
    
    	padding-top:370px;
    
    	}
    Last edited by graphycraft; 07-14-2012 at 09:16 AM.

  4. #4
    Join Date
    Mar 2012
    Posts
    18
    Wow

  5. #5
    Join Date
    Aug 2006
    Posts
    1,922
    The various icons in your #header list all have widths specified in pixels. So that's a fixed size. The #header div itself has a width specified as 100&#37; (ie, whatever size the page width is).

    So you say you want the icons to stay in the same place, regardless of screen size - you'd need to pic a screen size to do this, say 1200px (which seems to be about what they're scaled for), and set that as the width of the #header div.

    If on the other hand you *do* want the icons to move closer together as the browser gets smaller, then you should change the with of the icon areas to be specified as percentages (presumably totaling 100%) and leaver the #header as 100%.

    Dave

  6. #6
    Join Date
    Mar 2012
    Posts
    18

    thank you

    Quote Originally Posted by tracknut View Post
    The various icons in your #header list all have widths specified in pixels. So that's a fixed size. The #header div itself has a width specified as 100% (ie, whatever size the page width is).

    So you say you want the icons to stay in the same place, regardless of screen size - you'd need to pic a screen size to do this, say 1200px (which seems to be about what they're scaled for), and set that as the width of the #header div.

    If on the other hand you *do* want the icons to move closer together as the browser gets smaller, then you should change the with of the icon areas to be specified as percentages (presumably totaling 100%) and leaver the #header as 100%.

    Dave
    I tried to do what you offered but did not help. Am I doing something wrong? Is it possible to show your it on the code for me ?

    Thank you anyway

  7. #7
    Join Date
    Aug 2006
    Posts
    1,922
    Quote Originally Posted by graphycraft View Post
    I tried to do what you offered but did not help. Am I doing something wrong? Is it possible to show your it on the code for me ?

    Thank you anyway
    Which version are you wanting to do, the fixed size, or the one that shrinks with the page size?

    Dave

  8. #8
    Join Date
    Mar 2012
    Posts
    18

    Smile

    Quote Originally Posted by tracknut View Post
    Which version are you wanting to do, the fixed size, or the one that shrinks with the page size?

    Dave
    I want the icons move proportionally to the logo while someone re-sizes the browser window. I want them to be located at the same line...
    Last edited by graphycraft; 07-18-2012 at 03:11 PM.

  9. #9
    Join Date
    Aug 2006
    Posts
    1,922
    So here's a start, hopefully you can follow the lead. Right now you have separate styles created for each of your four header navigation icons. I'd suggest using just two styles. One for the two icons on the left, another for the two on the right. But you could leave it as is, you just need to change all four styles. Here's an update for the "contact" style:
    Code:
    ul#nav li.contact a {width: 10&#37;;
    background: url(images/contact.jpg) no-repeat;
    margin-left:5%;
    margin-top: 150px;
    }
    If you did that, the contact link will be 20% of the page width, regardless of what the width is. You could do similar things for the other three icon styles, hopefully that makes sense. You'll also want to similarly address that margin-top:150px at some point, unless you don't mind letting your users scroll up and down a lot.

    Dave
    [/code]

  10. #10
    Join Date
    Jul 2012
    Posts
    2
    There's no way to help you without seeing your code. Either post a link to the page or post the code here.
    __________________

  11. #11
    Join Date
    Jan 2009
    Posts
    3,346
    Quote Originally Posted by HGFGH View Post
    There's no way to help you without seeing your code. Either post a link to the page or post the code here.
    __________________
    Source code and a link appear to be way up at the top of the thread...fyi.

  12. #12
    Join Date
    Mar 2012
    Posts
    18
    Quote Originally Posted by tracknut View Post
    So here's a start, hopefully you can follow the lead. Right now you have separate styles created for each of your four header navigation icons. I'd suggest using just two styles. One for the two icons on the left, another for the two on the right. But you could leave it as is, you just need to change all four styles. Here's an update for the "contact" style:
    Code:
    ul#nav li.contact a {width: 10%;
    background: url(images/contact.jpg) no-repeat;
    margin-left:5%;
    margin-top: 150px;
    }
    If you did that, the contact link will be 20% of the page width, regardless of what the width is. You could do similar things for the other three icon styles, hopefully that makes sense. You'll also want to similarly address that margin-top:150px at some point, unless you don't mind letting your users scroll up and down a lot.

    Dave
    [/code]
    With your help I did it this way,

    Code:
    ul#nav {
    	}
    	ul#nav li{
    		display: inline;
    		}
    		ul#nav li a{
    			position: fixed;
    			display: block;
    			height: 50px;
    			float: left;
    			text-indent: -9999px;
    			width: 100%;
    			}
    		ul#nav li.contact a{
    	   	width: 60px;
    	   	background: url(images/contact.jpg); margin-left: 4%; margin-top: 150px;
    	   	}
    	   ul#nav li.doodlings a{
    	   	width: 66px;
    	   	background: url(images/doodlings.jpg); margin-left: 18%; margin-top: 150px;
    	   	}
    	   ul#nav li.crafts a{
    	   	width: 78px;
    	   	background: url(images/crafts.jpg); margin-left: 70%; margin-top: 150px;
    	   	}
    	   ul#nav li.aboutme a{  	
    	   	width: 61px;
    	   	background: url(images/aboutme.jpg); margin-left: 86%; margin-top: 150px;
    		   }
          ul#nav li a:hover{
          	background-position: center bottom;
          	}
    Thank you so much.

  13. #13
    Join Date
    Mar 2012
    Posts
    18
    Quote Originally Posted by HGFGH View Post
    There's no way to help you without seeing your code. Either post a link to the page or post the code here.
    __________________
    I wonder if we breath the same air

Thread Information

Users Browsing this Thread

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

Tags for this Thread

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