Positionierung innerhalb eines div-blocks

[Centuri]

Hallo zusammen,

seit ein paar Stunden schlage ich mich mit folgender Frage herum
(und habe auch hier weder im FAQ noch im Forum einen Hinweis dazu
gefunden):

Eine kleine, einfache Fotogalerie (mit php realisiert) enthält (u.a.)einen div-Block "t" mit thumbnails
und einen div-Block "b" mit dem aktuell ausgewählten, eigentlichen Bild.
div "t" ist absolut positioniert und hat definierte Breite und Höhe; overflow:auto.
Die thumbnails sind untereinander angeordnet und passen nicht alle in div "t"; deswegen erscheint ein
senkrechter Scrollbalken am rechten Rand von div "t".

Durch Klick auf eins der thumbnails wird die Seite neu aufgerufen (z.B. <a href="../bilder/galerie.php?n=10">)
und geladen mit dem aktuellen Bild (in diesem Fall mit Bild Nr.10) in div "b"; und das zum Bild Nr. 10 gehörende
thumbnail hat einen andersfarbigen Rahmen als die anderen.
Soweit alles in Ordnung.

Wie kann ich dafür sorgen, dass thumbnail Nr. 10 an einer definierten Position in div "t" erscheint; also
der Scrollbalken von div "t" schon ein Stück nach unten gescrollt ist?
Ich habe in HTML und CSS keinen Hinweis gefunden, wie sowas zu bewerkstelligen ist.
Versucht habe ich u.a. top:-300px; für das erste thumbnail, um thumbnail Nr. 10 in den sichtbaren Bereich von
div "t" zu scrollen - das funktioniert auch; allerdings komme ich dann nicht mehr an die ersten thumbnails heran.

Hat jemand von euch eine Idee?

Vielen Dank schon mal im voraus -
Andreas

[apsel]

Om nah hoo pez nyeetz, Centuri!

Ich gehe davon aus, dass die Thumbnails als Liste vorliegen. Dann kannst du einfach die gesamte Liste nach oben oder unten verschieben.

Matthias

[centuri]

Hallo Matthias,

vielen Dank für deine Antwort - aber ich habe mich wohl missverständlich ausgedrückt.
Der Titel hätte lauten sollen: "Serverseitige dynamische Positionierung".

Nein, die thumbnails sind nicht in einer Liste (ul oder ol); sondern das HTML sieht so aus:

---------------------- Code on --------------------------------

<div id="div_thumbs">

<a href="../deutsch/galerie.php?n=1">
   <img src="../bilder_galerie/thumbs/thumb_1.jpg" alt="thumb1"
                                title ="" class="thumb_start"/>
   </a>

<a href="../deutsch/galerie.php?n=2">
   <img src="../bilder_galerie/thumbs/thumb_2.jpg" alt="thumb2"
                                title ="" class="thumb"/>
   </a>

<a href="../deutsch/galerie.php?n=3">
   <img src="../bilder_galerie/thumbs/thumb_3.jpg" alt="thumb3"
                                title ="" class="thumb"/>
   </a>

<!-- und so weiter bis (beispielsweise): -->

<a href="../deutsch/galerie.php?n=9">
   <img src="../bilder_galerie/thumbs/thumb_9.jpg" alt="thumb9"
                                title ="" class="thumb_sel"/>
   </a>

<a href="../deutsch/galerie.php?n=10">
   <img src="../bilder_galerie/thumbs/thumb_10.jpg" alt="thumb10"
                                title ="" class="thumb"/>
   </a>

</div>

... und im zugehörigen CSS-file:

#div_thumbs {
       position:absolute;
               top:180px;
               right:545px;
               width:122px;
               height:400px;
               background-color:transparent;
               overflow:auto;
               z-index:2;
}
.thumb_start {
position:relative;
top:0px;left:0px;
width:100px;height:75px;
border:solid 2px silver;
}
.thumb {
position:relative;
top:2px;left:0px;
width:100px;height:75px;
border:solid 2px silver;
}
.thumb_sel {
position:relative;
top:2px;left:0px;
width:100px;height:75px;
border:solid 2px #ED1D25;
}

---------------------- Code off --------------------------------

Mein Problem ist jetzt folgendes:
Es passen nicht alle Vorschaubilder in den div-Block, also erscheint ein senkrechter scrollbar: thumb_1.jpg ist oben und die thumbs ab Nr. 6 sind nicht mehr zu sehen.

Soweit so gut.

Aber:
Wenn nach der Auswahl eines Bildes (Klick auf z. B. thumb_9.jpg) die Seite neu geladen wird, soll automatisch "vorgescrollt" sein; also thumb_9.jpg soll sichtbar sein (der Anwender soll also nicht selber scrollen müssen).

Wie kann man das bewerkstelligen? Dazu habe ich keine Idee mehr.

Dank und Gruß
Andreas

[apsel]

Om nah hoo pez nyeetz, centuri!

Der Titel hätte lauten sollen: "Serverseitige dynamische Positionierung".

Nein, die thumbnails sind nicht in einer Liste (ul oder ol); sondern das HTML sieht so aus:

Es ist aber eine Liste von Links. Dann mach eine draus und positioniere sie dynamisch. Und zwar die komplette Liste so, dass das gewünschte Element sichtbar ist.

Matthias

[centuri]

Hallo Matthias,

Es _ist_ aber eine Liste von Links. Dann mach eine draus und positioniere sie dynamisch. Und zwar die komplette Liste so, dass das gewünschte Element sichtbar ist.

Ja, inhaltlich ist das eine Liste.

Also mache ich <ul>
                   <li>
                   </li>
                   ...
                   <li>
                   </li>
               </ul>
draus.
Und dann? <ul style="position:relative;top:-200px;">? Oder was meinst du
mit "positioniere dynamisch"?
Das habe ich zwar _so_ noch nicht versucht; aber meine Vermutung wäre, dass ich dann keine Chance mehr habe, die durch "-200px" "verschwundenen" ersten ca. 3 li's durch scrollen zu erreichen...

Oder stehe ich irgendwie völlig auf der Leitung?

Gruß und danke -
Andreas

[apsel]

Om nah hoo pez nyeetz, centuri!

Das habe ich zwar so noch nicht versucht; aber meine Vermutung wäre, dass ich dann keine Chance mehr habe, die durch "-200px" "verschwundenen" ersten ca. 3 li's durch scrollen zu erreichen...

Das wird wohl so sein :-(

Du versuchst, das Verhalten eines IFrames zu simulieren.

Das einfachste wäre, eines zu verwenden. Aber: frames haben bedeutende Nachteile. Schlag nach bei molily

Ansonsten ist dieses Problem wohl rein mit CSS nicht lösbar.

Matthias

[centuri]

Hallo Matthias,

Das wird wohl so sein :-(

... und so passiert es auch; hab' das mal ausprobiert. Auch clip führt nicht weiter.

Du versuchst, das Verhalten eines IFrames zu simulieren.
Das einfachste wäre, eines zu verwenden. Aber: frames haben bedeutende Nachteile.

Ich weiß; ich habe sowas mal gemacht: mit frameset klappt das wunderbar. Aber genau das will ich ja ändern...

Außerdem soll die Seite für eine beliebige Anzahl von Fotos/thumbnails funktionieren; deswegen php. Und auch deswegen wäre frameset/iframe keine Lösung: Denn bei jedem Neuladen der Seite muß die Liste der thumbnails dynamisch aufgebaut werden.

Ansonsten ist dieses Problem wohl rein mit CSS nicht lösbar.

Und womit dann? Ich habe mal auf das thumbnail Nr. 9 "tabindex="0" gesetzt; wenn ich nach Neuladen tab drücke, wird zum thumbnail Nr. gescrollt.

Also müßte ich jetzt nur noch <body onload="simulate press_tab_key"> oder so was ähnliches notieren - eigentlich wollte ich aber javascript vermeiden, weil a) viele das standardmäßig ausschalten und b) ich keine Erfahrung mit js habe (so weiß ich zum Beispiel nicht, ob so ein Tastendruck überhaupt simuliert werden kann und wenn ja, wie).

Gruß
Andreas

[Axel Richter]

Hallo,

Hallo zusammen,

Eine kleine, einfache Fotogalerie (mit php realisiert) enthält (u.a.)einen div-Block "t" mit thumbnails
und einen div-Block "b" mit dem aktuell ausgewählten, eigentlichen Bild.
div "t" ist absolut positioniert und hat definierte Breite und Höhe; overflow:auto.
Die thumbnails sind untereinander angeordnet und passen nicht alle in div "t"; deswegen erscheint ein
senkrechter Scrollbalken am rechten Rand von div "t".

Durch Klick auf eins der thumbnails wird die Seite neu aufgerufen (z.B. <a href="../bilder/galerie.php?n=10">)
und geladen mit dem aktuellen Bild (in diesem Fall mit Bild Nr.10) in div "b"; und das zum Bild Nr. 10 gehörende
thumbnail hat einen andersfarbigen Rahmen als die anderen.
Soweit alles in Ordnung.

Wie kann ich dafür sorgen, dass thumbnail Nr. 10 an einer definierten Position in div "t" erscheint; also
der Scrollbalken von div "t" schon ein Stück nach unten gescrollt ist?

Das kannst Du erreichen, indem Du mit dem Link einen Anker anspringst.
Bsp.:

  
<!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=UTF-8">  
<title>scroll into view</title>  
<style type="text/css">  
ul {position:absolute; top:10em; left:10ex; width:20ex; height:6em; overflow:auto; background-color:yellow;}  
li {margin:0; padding:0; padding-top: 1em; border:1px solid; }  
</style>  
</head>  
<body>  
<h1>scroll into view</h1>  
<ul>  
<li id="<?php echo (isset($_GET['n']) && $_GET['n']==1)?'scrollinview':'i1'; ?>"><a href="test.php?n=1#scrollinview">Bild1</a></li>  
<li id="<?php echo (isset($_GET['n']) && $_GET['n']==2)?'scrollinview':'i2'; ?>"><a href="test.php?n=2#scrollinview">Bild2</a></li>  
<li id="<?php echo (isset($_GET['n']) && $_GET['n']==3)?'scrollinview':'i3'; ?>"><a href="test.php?n=3#scrollinview">Bild3</a></li>  
<li id="<?php echo (isset($_GET['n']) && $_GET['n']==4)?'scrollinview':'i4'; ?>"><a href="test.php?n=4#scrollinview">Bild4</a></li>  
<li id="<?php echo (isset($_GET['n']) && $_GET['n']==5)?'scrollinview':'i5'; ?>"><a href="test.php?n=5#scrollinview">Bild5</a></li>  
<li id="<?php echo (isset($_GET['n']) && $_GET['n']==6)?'scrollinview':'i6'; ?>"><a href="test.php?n=6#scrollinview">Bild6</a></li>  
<li id="<?php echo (isset($_GET['n']) && $_GET['n']==7)?'scrollinview':'i7'; ?>"><a href="test.php?n=7#scrollinview">Bild7</a></li>  
</ul>  
<p>lorem ipsum ...</p>  
</body>  
</html>  

Der Trick ist, es wird immer der Anker "scrollinview" angesprungen aber PHP setzt die entsprechende ID jeweils bei der LI, deren Link gerade angefordert wurde.

viele Grüße

Axel

[centuri]

Hallo Axel,

Das kannst Du erreichen, indem Du mit dem Link einen Anker anspringst.
Der Trick ist, es wird immer der Anker "scrollinview" angesprungen aber PHP setzt die entsprechende ID jeweils bei der LI, deren Link gerade angefordert wurde.

Danke - das klappt!

Hatte zwar mal (z.B. im Münz) das Thema "Anker" gelesen; aber nie was damit gemacht. Lese ich jetzt noch mal - ist ja wohl doch wichtig... :-)

Gruß
Andreas