tutorials.de Buch-Aktion 05/2012
ERLEDIGT
JA
ANTWORTEN
9
ZUGRIFFE
1125
EMPFEHLEN
  • An Twitter übertragen
  • An Facebook übertragen
DIESES THEMA IST
GESCHLOSSEN
  1. 09.12.09 13:11 #1
    xanef xanef ist offline Rookie
    Registriert seit
    May 2005
    Beiträge
    6
    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.
     
  2. 09.12.09 13:26 #2
    Maik Tutorials.de Gastzugang
    Hi,

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

    HTML-Code:
    <!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
     
  3. 09.12.09 13:56 #3
    Maik Tutorials.de Gastzugang
    Zitat Zitat von Maik Beitrag anzeigen
    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
     
  4. 09.12.09 13:58 #4
    xanef xanef ist offline Rookie
    Registriert seit
    May 2005
    Beiträge
    6
    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?
     
  5. 09.12.09 14:03 #5
    Maik Tutorials.de Gastzugang
    Zitat Zitat von xanef Beitrag anzeigen
    vielleicht noch eine kleine Idee?
    Zitat Zitat von Maik Beitrag anzeigen
    Mit deinem overflow:hidden kann sie mitunter aber nicht vollständig eingesehen werden, wenn die Viewporthöhe des Browsers zu klein ist.
    Ich würde das so umsetzen, damit der Seitenbeginn im (zu kleinen) Browserfenster erreichbar ist:

    Code css:
    1
2
3
4
5

    html, body { /*index.css (Linie 2)*/
...
overflow:auto;
...
}

    mfg Maik
     
  6. 09.12.09 14:09 #6
    xanef xanef ist offline Rookie
    Registriert seit
    May 2005
    Beiträge
    6
    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?
     
  7. 09.12.09 14:20 #7
    Maik Tutorials.de Gastzugang
    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
     
  8. 09.12.09 15:40 #8
    xanef xanef ist offline Rookie
    Registriert seit
    May 2005
    Beiträge
    6
    Danke für die Tipps, ich habe für mich eine Lösung gefunden, indem ich das Container-DIV mit
    Code :
    1

     position:fixed
    belegt habe. Für den IE6 brauche ich dann tatsächlich ein
    Code :
    1

    overflow:auto
    , für Mozilla etc. kann ich dieses auf hidden stellen. So gehts. Weitere Tests in IE7+8 stehen noch aus.
     
  9. 09.12.09 17:14 #9
    Maik Tutorials.de Gastzugang
    Zitat Zitat von xanef Beitrag anzeigen
    Weitere Tests in IE7+8 stehen noch aus.
    Für den IE7 wirst du da nochmal Hand anlegen müssen, denn dieser verschiebt das komplette Layout nach rechts.

    Sprungmarke mit scroll div möglich?-ie7.jpg

    Ursache hierfür ist die text-align:center-Deklaration für html und body.

    Und für den IE6 empfehle ich dir ie7-js, was seine mangelnde position:fixed-Unterstützung betrifft - siehe http://ie7-js.googlecode.com/svn/test/fixed.html

    mfg Maik
     
  10. 09.12.09 21:10 #10
    xanef xanef ist offline Rookie
    Registriert seit
    May 2005
    Beiträge
    6
    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!
     
« Vertikalen Scrollbalken nach oben setzen | Video auf Website positionieren »

Ähnliche Themen

  1. Sprungmarke und dynamische URL
    Von TinniTuss im Forum PHP
    Antworten: 1
    Letzter Beitrag: 19.11.10, 11:11
  2. Globale Sprungmarke
    Von Markus0007 im Forum Visual Basic 6.0
    Antworten: 1
    Letzter Beitrag: 12.07.06, 14:16
  3. scroll nur bei geöffnetem IE möglich
    Von Ein_Freund im Forum Microsoft Windows
    Antworten: 0
    Letzter Beitrag: 12.04.06, 10:32
  4. Eine Art Sprungmarke?
    Von SilverVegeto im Forum PHP
    Antworten: 8
    Letzter Beitrag: 15.11.04, 19:14
  5. Sprungmarke zu externem SWF in ScrollPane
    Von Jedimaster im Forum Flash Plattform
    Antworten: 12
    Letzter Beitrag: 22.08.04, 12:23

Stichworte