Deviantart - wie geht das?

[Malaxo]

Hey Leute

Mir ist aufgefallen das bei deviantart.com die preview Bilder auf der Starterseite sich "berechnen". Das heisst wenn man mit einer kleinen Browserauflösung kommt zeigt es z.B. 2 Bilder an bei einer grösseren 3 oder mehr. Es berechnet den Platz den es braucht um es jedem Browser Fenster schön darzustellen.

Wie geht das?
Der Contentteil wird "enger" und "breiter" zudem kommen informationen (bei Deviantart.com Bilder) hinzu oder weg.

Finde das eine sehr saubere Lösung für Webdesign. Aber keine Ahnung wie das gemacht wird.

So please Help oder Infos damit ich (oder andere) dies auch so machen können.

Greezzzzzz

 

[Maik]

Hi,

ich würde mal sagen, dass die Preview-Bilder in floatenden DIVs eingebettet sind und die linke Seitenspalte keine fixe Breitenangabe besitzt. Diese Rahmenbedingungen erzielen dann das von dir umschriebene Verhalten, wenn die Fenstergröße skaliert wird.

 

[Gumbo]

Der Trick ist eigentlich recht simpel: Angenommen wir haben folgende Liste:

<ul>
	<li>1</li>
	<li>2</li>
	<li>3</li>
	<li>4</li>
	<li>5</li>
	<li>6</li>
	<li>7</li>
	<li>8</li>
</ul>

Und formatieren sie mit folgendem Stylesheet, so dass immer nur eine Zeile im Rahmen des Elternelements dargestellt wird:

ul {
	height: 15em;
	padding: 0;
	text-align: center;
	background-color: #f00;
}
ul li {
	display: inline-block;
	width: 15em;
	height: 15em;
	background-color: #0f0;
}

So sieht man, dass die anderen Elemente bereits existieren und wie sie sich beim Verändern der Breite verhalten. Wenn jetzt zusätzlich das Elternelement die Eigenschaft „overflow:hidden“ bekommt, verschwinden die Listenelemente, die außerhalb des Elternelements dargestellt werden.

Ach ja: der Internet Explorer braucht natürlich wieder eine Extrawurst, da er der display-Eigenschaftswert „inline-display“ nicht kennt. Ein einfaches „float:left“ sollte anstelle des „display:inline-block“ reichen. Damit ist dann allerdings die zentrierte Darstellung futsch.