Webpagina verspringt na gebruik anker

Status
Niet open voor verdere reacties.
Y

yellowf

Gebruiker
Lid geworden
28 feb 2007
Berichten
36
Hallo,

Ik heb m.b.v. css een pagina gemaakt. In de index.html staan ankers. De menu-items verwijzen zo naar de diverse kopjes.

Probleem is nu dat als je een van de menu-items aanklikt. De pagina iets naar boven springt. Dit gebeurt alleen de eerste keer. Maar ik vind dat niet mooi. Je kunt het via onderstaande link uitproberen.

Als je de pagina weer terugscrollt en weer een menu-item klikt, springt ie weer.

Weet iemand hier een oplossing voor?

Zie:

http://www.steelyfan.nl/exp/hap/index.html
 
Code: 
<div class="menu">
  <ul class="nav">
  <li><a href="#menu1">Menu-item 1</a></li>
  <li><a href="#menu2">Menu-item 2</a></li>
  ... etc ....
  </ul>
</div>

/** nav (niet wijzigen) **/
.nav, .nav li, .nav ul, .nav a, .nav span {
  margin: 0; padding: 0; border: 0; outline: 0; list-style: none;}
.nav {
  position: relative; z-index: 597; float: left;}
.nav li {
  float: left; min-height: 1px; line-height: 1; vertical-align: middle;}
.nav li:hover {
  position: relative; z-index: 599; cursor: default;}
.nav a, .nav span {
  display: block;}
.nav ul {
  visibility: hidden; position: absolute; top: 100%; left: 0; z-index: 598;}
.nav ul li {
  float: none;}
.nav ul ul {
  top: 1px; left: 99%;}
.nav li:hover > ul {
  visibility: visible;}

/** hieronder grootte en opmaak van nav zlef maken **/
...
 
Laatst bewerkt:
Hmmm.... met Chrome gaat ie rechtstreeks naar het kopje, zonder springen (ook als ik handmatig terug ga) of ik begrijp het niet...
 
Ik gebruik ook Chrome.

Firefox geprobeerd en hetzelfde (ongewenste) gedrag van de pagina.
 
Resolutie speelt een rol?
(1280x1024 hier)
Of... ik begrijp jouw probleem niet..
 
andre@home zei:
Resolutie speelt een rol?
(1280x1024 hier)
Of... ik begrijp jouw probleem niet..
Klik om te vergroten...

Deze resolutie kan ik niet testen, maar van 960x600 tot 1366x768, springt de pagina nog steeds. Dus waarschijnlijk geen resolutie-probleem.

Het probleem is dus dat de pagina eerst opent, netjes helemaal bovenaan (je ziet daar de tekst "top" staan).
Als je nu op een menu-item klikt, springt de pagina opeens een stukje naar boven (top niet meer zichtbaar).
 
Ok.. dat dus... wel dat gebeurt bij mij met IE, FF en Chrome niet... (onder win7).
Oja... nog even onder Linux getest.... ook geen probleem... vrees dat het bij jou ligt...
Top blijft altijd staan.
 
Bij mij zie ik het probleem ook niet in IE, FF en Chrome.
En zelfs niet in IE8 :d

"... 960x600 tot 1366x768 ..." zijn geen hoge resoluties. Werkt deze wat afwijkend opgezette html/css niet met lage resoluties?!
 
bron zei:
Bij mij zie ik het probleem ook niet in IE, FF en Chrome.
En zelfs niet in IE8 :d

"... 960x600 tot 1366x768 ..." zijn geen hoge resoluties. Werkt deze wat afwijkend opgezette html/css niet met lage resoluties?!
Klik om te vergroten...

Ok, misschien is het alleen hier. Kan nog niet achterhalen waarom.

Ik ben nog aan het leren met html/css. Je schrijft dat het afwijkend is, ik sta open voor tips!
 
Een fixed linker kolom wordt niet vaak meer gebruikt. Hieronder een goed voorbeeld met info in de css

HTML bestand
Code: 
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>Fixed header sidebar footer</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="wrapper">
<div id="header">
  <div id="innerhead">
    <p>Dit is de header</p>
  </div>
</div>
<div id="main">
  <!--ruimte maken voor header-->
  <div id="headpadding"></div>
  <div id="leftwrap">
    <div id="innerleft">
      <p>Hier het menu</p>
    </div>
  </div>
  <div id="rightwrap">
    <div id="innerright">
      <p>Dit is de content. Dit is de content. Dit is de content. 
      Dit is de content. Dit is de content. Dit is de content.</p>
    </div>
  </div>
  <!--ruimte maken voor footer-->
  <div id="footpadding"></div>
</div><!--/main-->
<div id="footer">
  <div id="innerfoot">
    <p>Dit is de footer</p>
  </div>
</div>
</div><!--/wrapper-->
</body>
</html>
CSS bestand "style.css"
Code: 
/* minimale reset */
* {
  margin: 0; padding: 0; border: 0;
  font-size: 100%; font-family: sans-serif;
}

/* html, body, wrapper */
html {
  height: 100%;
  overflow-y: scroll;
  -ms-overflow-y: scroll
}
body {  
  height: 100%;
  font: normal 16px verdana, 'trebuchet ms', sans-serif;
  line-height: 1.4;
  background: #fff;
  color: #000;
}
#wrapper {
  width: 900px; /* totale breedte (linker + rechter kolom) */
  margin: 0 auto;
  min-height: 100%;
  background: #bebebe; /* dezelfde kleur als #right */
}

/* header */
#header {
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 5;
  background: #ffa300;
}
#innerhead {
  width: 900px; /* hetzelfde als #wrapper */
  height: 240px; /* hoogte van header */
  margin: 0 auto;
}

/* main */
#main {
  width: 100%;
  position: relative;
}
#headpadding {
  height: 240px; /* hoogte van header */
}
#footpadding {
  height: 35px; /* hoogte van footer */
}

/* linker kolom */
#leftwrap {
  position: absolute;
  top: 240px; /* hoogte van header*/
  bottom: 35px; /* hoogte van footer */
  left: 0;
}
#innerleft {
  position: fixed;
  width: 180px; /* breedte van linker kolom */
  top: 240px; /* hoogte van header */
  bottom: 35px; /* hoogte van footer */
  background: #dcdcdc; 
}

/* rechter kolom (breedtes bij elkeaar = wrapper breedte) */
#rightwrap {
  width: 720px; /* breedte rechter kolom (#wrapper - #innerleft) */
  left: 180px; /* breedte linker kolom */
  position: relative;
  top: 0;
  overflow: auto;
  background: #bebebe; /* dezelfde kleur als #wrapper */
}
#innerright {
}

/* footer */
#footer {
  width: 100%;
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 5;
  background: #ffa300;
}
#innerfoot {
  width: 900px; /* hetzelfde als #wrapper */
  height: 35px; /* hoogte van footer */
  margin: 0 auto;
}

*** edit: je kunt de html simpel omzetten in html5 met <header> , <footer> , <nav> , <article> , enz.
 
Laatst bewerkt:
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan