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.
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>
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%.
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 ?
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:
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.
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:
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.
Reply With Quote
Originally Posted by rtrethewey
Bookmarks