Horizontale Seite

Pablo · #1 (**permalink**) 16.07.2009, 08:07

Hi,

ich möchte eine Seite zu erstellen, auf der nur horizontal gescrollt wird.
Inhalt der Seite sollen Thumbnails für eine Galerie sein, die in Spalten (zu drei Zeilen) nebeneinander in einer beliebig langen Reihe aufgereiht sind.

Sortierung wie folgt:

Code:

 1  4  7 10 13
 2  5  8 11 ..
 3  6  9 12

Meine Idee: Pro Spalte ein container (.col), mit float:left nebeneinander. Das blöde an der Idee: am rechten Seitenende wird umgebrochen und die Spalten untereinander angezeigt.
Alternative Idee: float:left; durch display:inline; ersetzen und mit white-space irgendwas rumwurschteln, klappt aber auch nicht.

Online-Beispiel: http://area51.89p.de/gal/index.htm
CSS-Datei: http://area51.89p.de/gal/style.css

Irgendwelche Ideen wie man das Lösen kann?

Danke!
Pablo

mantiz · #2 (**permalink**) 16.07.2009, 08:16

display:inline-block könnte Dein Freund sein, dort kannst Du dann mit white-space:nowrap den Umbruch verhindern.

Ich habe da keine Erfarhung mit, aber der IE könnte da Probleme machen. Ich habe gerade kurz gesucht und folgendes gefunden: Cross Browser Support for inline-block Styling

Evtl. löst das bereits alle Probleme, müsstest Du allerdings noch in allen für Dich relevanten Browsern testen, da ich wie gesagt nicht weiß, ob und was es evtl. noch für Probleme geben könnte.

maistc07 · #3 (**permalink**) 16.07.2009, 08:18

Nimm statt den divs doch einfach listen
das könnte dann zB so aussehen

HTML-Code:

<ul class="zeile">
  <li>
    <ul class="spalte">
      <li></li>
      <li></li>
      <li></li>
    </ul>
  </li>
  <li>
    <ul class="spalte">
      <li></li>
      <li></li>
      <li></li>
    </ul>
  </li>
</ul>

wenn du die höhe der bilder kennst

Code:

.zeile {
height: 3*bildhöhe;
}

code ist nicht getestet

Pablo · #4 (**permalink**) 16.07.2009, 08:31

Danke für eure zwei Ideen.
mantiz' Idee klappt hervorragend.
inline-block hatte ich auch probiert, aber nicht in Kombination mit whitespace

maistc07 Code lief bei ersten Tests nicht wie gewünscht, weshalb ich die Idee von mantiz übernehmen werde.

fyi: mit mantiz' Link funktioniert inline-block hervorragend in allen wichtigen aktuellen Browsern + IE 7 (IE6 von mir ungetestet)

Gruß,
Pablo

heiko_rs · #5 (**permalink**) 16.07.2009, 10:57

Du weißt aber, dass FX < 3 inline-block nicht kennt? (und als aktuell würde ich ihn trotzdem bezeichnen, zumal er sicher noch mehr Marktanteil als 3.x hat.)

Pablo · #6 (**permalink**) 16.07.2009, 12:30

Zitat:

Zitat von heiko_rs

Du weißt aber, dass FX < 3 inline-block nicht kennt? (und als aktuell würde ich ihn trotzdem bezeichnen, zumal er sicher noch mehr Marktanteil als 3.x hat.)

Danke für den Hinweis. Werde die Seiten jetzt auch mit FX 2.x testen.
Ist aber keine für die breite Öffentlichkeit gedachte Seite. Eher Freunde und Verwandte.

mantiz · #7 (**permalink**) 16.07.2009, 14:52

Zitat:

Zitat von heiko_rs

Du weißt aber, dass FX < 3 inline-block nicht kennt? (und als aktuell würde ich ihn trotzdem bezeichnen, zumal er sicher noch mehr Marktanteil als 3.x hat.)

Eine kurze Suche ergab, dass dieser jedoch "display:-moz-inline-box;" kennt, was man dann einfach vor "display:inline-block" setzen können sollte.
Natürlich ist das eine proprietäre Eigenschaft, aber was will man machen?

heiko_rs · #8 (**permalink**) 16.07.2009, 15:36

Natürlich geht das, und ich muss zugeben, dass ich vorhin (kurz nach dem Frühstück) zu faul war, das alles auszuführen... Denn es kommt ja auch noch hinzu, dass auch der IE < 8 display: inline-block; nicht kennt und daher Hacks braucht. Aber da ich heute vormittag auch zu faul war, Deinen Link zu lesen, sah ich auch jetzt erst, dass dort eh all diese Probleme angesprochen werden, daher wäre mein Hinweis gar nicht nötig gewesen

Dennoch gibt es noch eine andere Lösung, die keine proprietären Eigenschaften für Gecko braucht, so dass das Standard-CSS valide bleibt:

HTML-Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html lang="de" xml:lang="de" xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Test</title>
<style type="text/css">

* {
	margin: 0;
	padding: 0;
	}

#table {
	display: table;
	border-collapse: collapse;
	}

#row {
	display: table-row;
	}

#row div {
	display: table-cell;
	padding: 10px 150px;
	}

</style>
<!--[if lt IE 8]>
<style type="text/css">

#row {
	white-space: nowrap;
	}

#row div {
	display: inline;
	zoom: 1;
	white-space: normal;
	}

</style>
<![endif]-->
</head>

<body>

<div id="table">

<div id="row">
	<div>text</div>
	<div>text</div>
	<div>text</div>
	<div>text</div>
	<div>text</div>
</div>

</div>

</body>

</html>

mantiz · #9 (**permalink**) 16.07.2009, 15:54

Natürlich *vor-den-kopf-schlag* an display:table und Konsorten hab' ich gar nicht gedacht.

Schön, dass Du Dir noch die Zeit genommen hast.

Pablo · #10 (**permalink**) 16.07.2009, 16:35

Unter anderem mit dem Underscore-Hack (der Underscore jedoch durch eine Raute ersetzt) zentriere ich die Seite vertikal für den IE7 weshalb das CSS eh nicht valide ist. Deshalb werde ich mich wohl an das einfachere -moz- halten.

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Wordpress Seite Passwort-Schützen?	sepp88	Serveradministration und serverseitige Scripte	5	01.11.2009 12:56
Element ausserhalb seite positionieren, so daß keine scrollbar entsteht	st-SaHiB	CSS	5	20.07.2009 08:49
Nach klick auf menüpunkt soll die gewünschte seite in der seite erscheinen	rs-web	CSS	45	17.07.2009 14:16
Fixer Header (CSS Frame) und Sprung zu Anker auf dieser Seite	Chico_wau	CSS	2	14.05.2007 18:08
Navigation links und oben soll aktive Seite anzeigen	Zischel	CSS	2	16.02.2007 22:30