How to fix a browser scrolling problem?

joda · 05-04-2009, 04:36 AM

Hi to all!
I have this problem,please visit http://www.code-elektronic.com/index2.html and resize your browser size to 50% of high and 50% of width and then try to click on lets say "Proizvodi".

Can you see the problem?

If I click on each menu button the windows is scrolling down. This make me very crazy.

Is there any way to make a fixed page so the scrolling effect disappear ?

Can somebody help mi to figure out this problem?

Thanks for any tip's

abduraooft · 05-04-2009, 08:53 AM

What's the purpose the highlighted items in your anchors' href attributes?

Code:

<a href="#menu_servis"><img width="84" alt="servis" src="images/servis_dugme.jpg"/></a>

Removing those highlighted text (named anchors) would solve your issue.

joda · 05-04-2009, 10:12 AM

Yea,this anchor should be the link of my menu under this menu line where is the SERVIS button.

The best way to see what is the problem if you click on "Proizvodi" and then under this menu line loads a menu line with some menu buttons and then click on "Mobilni Telefoni" and you can see in the left side will be loaded some new menu... This is my idea how to loade some menu items on my page without iFrames...

The anchor moves to the position of the menu list what is writen in a DIV tag and so you can always display the menu item what is in a DIV tag.

Here is the simple code of my menu structure what I using in my page.
Save this to menu.html file

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Ucitavanje menua bez ikakve skripte - By Joda</title>
<link href="menu.css" rel="stylesheet" type="text/css" />
</head>

<body>

<div id="glavni_div1" class="glavni_div">

  <div id="menu_bar_div" class="menu_bar_div">
    <ul>
    	<li><a href="#menu_br1">Menu 1</a></li>
        <li><a href="#menu_br2">Menu 2</a></li>
        <li><a href="#menu_br3">Menu 3</a></li>
        <li><a href="#menu_prazno">Menu 4</a></li>
    </ul>
  </div>
    
<div id="sadrzaj_div" class="sadrzaj_div">

	<div id="menu_prazno" class="menu_podesavanje"></div>

	<div id="menu_br1" class="menu_podesavanje">
    <ul>
    	<li><a href="/BiloKojiHTML">Menu 1a</a></li>
        <li><a href="/BiloKojiHTML">Menu 2a</a></li>
        <li><a href="/BiloKojiHTML">Menu 3a</a></li>
    </ul>
	</div>
    
    <div id="menu_br2" class="menu_podesavanje">
    <ul>
    	<li><a href="/BiloKojiHTML">Menu 1b</a></li>
        <li><a href="/BiloKojiHTML">Menu 2b</a></li>
        <li><a href="/BiloKojiHTML">Menu 3b</a></li>
    </ul>
	</div>
    
    <div id="menu_br3" class="menu_podesavanje">
    <ul>
    	<li><a href="/BiloKojiHTML">Menu 1c</a></li>
        <li><a href="/BiloKojiHTML">Menu 2c</a></li>
        <li><a href="/BiloKojiHTML">Menu 3c</a></li>
    </ul>
	</div>
</div>
</div>

</body>
</html>

And this save to menu.css file

Code:

@charset "utf-8";
.glavni_div {
	width:550px;
	height:230px;
	margin:auto;
}
.menu_bar_div {
	width:550px;
	height:20px;
}
.menu_bar_div li{
	display:inline;
}
.menu_bar_div a{
	text-decoration:none;
}
.sadrzaj_div {
	height: 200px;
	width: 550px;
	overflow: hidden;
}
.menu_podesavanje {
	height: 200px;
	width: 550px;
}
.menu_podesavanje li{
	display:inline;
}
.menu_podesavanje a{
	text-decoration:none;
}

Have you any other solution how to fix or make this to working?