Seitenweise im div per skiplink navigieren

[BuchwaldM]

Hallo Leute

Meine Vorstellung ist in einem einspaltigen Layout per skiplink / anker den Inhalt des containerdiv seitenweise durchzuspringen.
Links stehen die hrefs mit Beschreibung von je 4 Projekten pro Seite. Rechts dazu die jeweiligen 4 Vorschaubilder von links oben nach rechts unten.
Dazwischen will ich mit den Pfeilen Seitenweise im Div den Inhalt vertikal navigieren.
Hab mir vorgestellt den Inhalt mit subcolumns zu erstellen, indem ich je 4 hrefs + 4 Bilder pro subcolumn per ID zu gliedern und dann mit nem skiplink den Inhalt zu switchen. Das ganze mit Hilfe von einer festen höhe des containerdiv und overflow hidden.
Könnt ihr mir ein paar Meinungen bzw. Alternativen zu dem Thema geben?
Vielleicht auch eine Quelle, wo ich mich inspirieren lassen kann.
Habe noch ein Bild mit dem Layout hochgeladen.

Vielen Dank

[kmrohe]

Wie man den Inhalt hoch und runter schieben kann, meist Du?

Wenn ich das richtig sehe, liegt der komplette Inhalt in einem DIV, das per overflow:hidden vom umschließenden Container verdeckt wird. Wenn Du dem Inhalts-DIV einen negativen Margin gibst, sollte es nach oben "rutschen" und der verdeckte Inhalt unten entsprechend sichtbar und oben unsichtbar werden. Je nach Positionierung kann dafür das Attribut "position" sinnvoller sein.

Dafür müßtest Du allerdings mit DOM/Javascript arbeiten um das Scrollen zu ermöglichen. In etwa so, ich hacke es schnell mal hin, also kein Anspruch auf Fehlerfreiheit:

<script type="text/javascript">
  
  // Verändert margin-top des Elemts InhaltsDIV um den Wert px
  
  function scroll(px) {
    
    // Variablen für Element und dessen aktuellen Wert aus margin-top
    var obj = document.getElementById('InhaltsDIV');
    var mrgn = obj.style.getAttribute('marginTop', false);
    
    // Falls Attribut margin-top nicht gesetzt wurde: Setzen und Wert=0
    if (mrgn == '') {
      obj.style.setAttribute('marginTop', '0', false);
      mrgn = 0;
    }
    
    // Wert px zu aktuellem margin-top von InhaltsDiv addieren.
    obj.style.marginTop = mrgn + px;
  
  }

</script>

<img src="pfeil_hoch" onclick="scroll('-5');" />

<img src="pfeil_runter" onclick="scroll('5');" />

So in etwa vielleicht. Was fehlt, ist noch eine Abfrage, wann das jeweilige Ende erreicht ist. Dazu muß man die Höhe des InhaltsDIVs und des umschließenden DIVs abfragen und mit dem aktuellen Margin vergleichen. Stopposition für runter ist margin-top == 0, Stopposition für hoch ist HöheInhaltsDIV + margin-top (negativer Wert!) == HöheUmschließendesDIV.

Alternativ bietet sich noch overflow:scroll oder ein Iframe für das InhaltsDIV an, die dann vom Browser angezeigte Scroll-Leiste kannst Du stylen, über das Attribut "dir" (<div dir="rtl">) sollte es möglich sein, den Scrollbalken auf die linke Seite zu bekommen.

Viel Erfolg und beste Grüße,
Kostja

[kmrohe]

Oh, ich lese gerade nochmal Dein Posting, das war eigentlich nicht wirklich die Frage, oder? Sollte dann ja einfach mit Ankern gehen gehen... Spricht etwas gegen accordion?

[BuchwaldM]

Hallo kmrohe

Danke schonmal für deine nette Hilfe.
Ich möchte möglichst auf Javascript verzichten. In dem Fall spricht das gegen accordion.
Wenn schon Javascript, dann brauch ich auch ein non-javascript fallback das anstandslos hinhaut.
Ich wollte eher wissen, ob es so geht, wie ich es mir vorstelle, bevor ich mich da durchwurschtel und dann merke, daß es eine viel einfachere Lösung gibt. Oder eben, daß ich hinterher feststelle, daß IE6 dabei schlapp macht etc.

[BuchwaldM]

Mein erster Versuch:
http://www.nenno-architektur.de/testprojekt.html
Die Frage ist, wie krieg ich die Pfeile am besten zwischen die beiden Spalten?
3 spaltiges subcolumn ist irgendwie ungünstig aufgrund der begrenzt einstellbaren Spaltenbreiten.

[kmrohe]

Sieht doch schon ganz gut aus. Wie wäre es einfach mit CSS, Stichwort absolute, bzw. relative Positionierung?

[BuchwaldM]

Offensichtlich schon. Wollte eigentlich sowenig wie möglich nachträglich per css rumpositionieren, damit ich weniger Probleme mit cross browser kompatibilität habe.
Schaun mer mal.

[kmrohe]

??? CSS sollte doch eigentlich kein Problem mehr sein. Und Deine Divs sind doch auch relativ positioniert... Wo liegt da also das Problem?

Nutze vielleicht lieber das CSS-Grid-System von Contao, dann hast Du es einfacher.

Hm, transparente Bilder (oder in Hintergrundfarbe) in der Breite der ersten Spalte mit den Pfeilen am rechten Ende wäre noch möglich. Die mußt Du dann nur irgendwie zwischen Deinen Links positionieren, der Rest paßt dann. Oder Du packst einfach genug margin auf die linke Seitde der Pfeile.

Da wäre dann noch die Möglichkeit, Tabellen zu nutzen (pfui!). Du machst das schon...

[BuchwaldM]

Ich wußte garnicht, daß es ein grid system gibt.
Meinst du auf der Seite: http://www.contao.org/herunterladen.html, die Sachen unter "Framework erweitern"?
Werd mich mal reinlesen.

Das mit der Tabelle für die Bilder war nur mal eben so, da es schneller ging, als jeweils 4 mal ein Bild als Element einzufügen.

Vielen Dank