Sprungmarke mit scroll div möglich?

Status
Nicht offen für weitere Antworten.

xanef

Grünschnabel
Hallo,
es geht um folgende Seite
http://www.lsdatentechnik.de/mueller-fliesen/index.php

wenn man z.B. auf "Ziegelestrich" klickt soll die nächste seite aufgehen, und gleich so gescrollt werden, dass im "content-div" dann der Ziegelestrich oben dran steht. mit den #Zielgelestrich-Ankern geht es nicht, da springt die ganze Seite nach oben und die Navi wäre weg. Scrollen ist im Hauptfenster per css bewusst deaktiviert. Scroll ist nur im content-Fenster gewünscht.
Lässt sich das machen? Hoffe ich hab meinen Wunsch klar ausgedrückt.
Vielen Dank für eure Hilfen.
 
M

Maik

Hi,

bei mir springt die Seite nicht nach oben, wenn in #box zum Anker gesprungen wird:

HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<meta name="author" content="Maik">
<meta name="date" content="2009-12-09">

<title>tutorials.de | demo_xanef</title>

<style type="text/css">
<!--
#box {
width:500px;
height:200px;
border:1px solid #000;
overflow:auto;
}
-->
</style>

</head>
<body>

<p><a href="#test">Gehe zum Anker</a></p>
<p>foobar</p>
<p>foobar</p>
<p>foobar</p>
<p>foobar</p>
<p>foobar</p>
<p>foobar</p>
<p>foobar</p>
<p>foobar</p>
<p>foobar</p>

<div id="box">
     <p>...</p>
     <p>...</p>
     <p>...</p>
     <p>...</p>
     <p>...</p>
     <a name="test">Ich bin der Anker</a>
     <p>...</p>
     <p>...</p>
     <p>...</p>
     <p>...</p>
     <p>...</p>
</div>

</body>
</html>


mfg Maik
 
M

Maik

bei mir springt die Seite nicht nach oben, wenn in #box zum Anker gesprungen wird:
... solange die Box ohne Scrollbalken im Fenster zu sehen ist :)

Mit deinem overflow:hidden kann sie mitunter aber nicht vollständig eingesehen werden, wenn die Viewporthöhe des Browsers zu klein ist.

mfg Maik
 

xanef

Grünschnabel
Hm, hab dein Code getestet, du hast recht. Ich hab die Seite aktualisiert. Klicke auf "Ziegelestrich" und du siehst was ich meine....es springt immer an den oberen Bildschirmrand!
Dabei soll es fix bleiben, wie wenn man z.B. auf "Altbau" klickt....vielleicht noch eine kleine Idee?
 

xanef

Grünschnabel
danke, das würde gehen, kommt aber unschön raus finde ich. Perfekt wärs, wenn Logo und Menü immer oben sind. Oder geht das nicht?
 
M

Maik

Findest du? Unschön kommt es raus, wenn man derzeit den Anker erreicht, und der Seitenheader incl. Navigation plötzlich nicht mehr zu sehen / erreichen ist, was bekanntermaßen der overflow:hidden-Deklaration geschuldet ist.

Die CSS-Eigenschaft position:fixed bietet die Möglichkeit, Elemente im Viewport zu fixieren, damit sie beim Scrollen ihre Position beibehalten - siehe z.B. http://www.cssplay.co.uk/layouts/fixed.html.

mfg Maik
 

xanef

Grünschnabel
Danke für die Tipps, ich habe für mich eine Lösung gefunden, indem ich das Container-DIV mit
Code:
 position:fixed
belegt habe. Für den IE6 brauche ich dann tatsächlich ein
Code:
overflow:auto
, für Mozilla etc. kann ich dieses auf hidden stellen. So gehts. Weitere Tests in IE7+8 stehen noch aus.
 

xanef

Grünschnabel
hey danke, das text-align:center war überflüssig, ein Rudiment aus den Entwicklungsanfängen der Seite. Ist bisher nicht aufgefallen. Der Tipp für das js7-Skript ist auch klasse, werd es bei zukünftigen Projekten berücksichtigen! Damit zappelt der IE6 nur kurz rum, stellt die Seite aber dann richtig dar.
Schade dass M$ soooo lange nicht über standardkonforme Browser nachdachte...So wird das richtig gut. Danke nochmals!
 
Status
Nicht offen für weitere Antworten.