nicht angemeldet
Mehrere Div-Boxen darstellen/ausblenden (Fenstergrößenabhängig)
Gunnar BittersmannHallo zusammen,
habe bei Amazon gesehen, dass die Produktanzahl auf der Startseite variiert je nachdem wie breit man sein Fenster zieht. Es sind mindestens 4 maximal aber 6 Produkte in einer Reihe zu sehen.
Das finde ich ziemlich cool finde aber keinen Ansatz, wie ich so eine Technik auch nutzen könnte.
Ich würde gerne meinen WordpressBlog in ähnlicher Weise gestalten, d. h. min einen Beitrag max. 3 nebeneinander, bei maximal 10 Beiträgen pro Seite.
Habe mir mal einen kleinen Testlauf geschrieben...
<HTML><HEAD>
<style type="text/css">
div { float:left;height:350px; width:450px; }
</style>
</HEAD><BODY>
<DIV style="background-color:red"></DIV>
<DIV style="background-color:blue"></DIV>
<DIV style="background-color:orange"></DIV>
<DIV style="background-color:green"></DIV>
<DIV style="background-color:violet"></DIV>
<DIV style="background-color:pink"></DIV>
<DIV style="background-color:yellow"></DIV>
<DIV style="background-color:lightgreen"></DIV>
<DIV style="background-color:lightblue"></DIV>
<DIV style="background-color:black"></DIV>
</BODY></HTML>
Problem 1: Bei meiner Bildschrimauflösung (1920x1080) sind bei diesem Test allerdings 4 Boxen nebeneinander. Ein Div mit Max-Width 1350px außenrum bringt nicht das erhoffte Ergebnis. Wie stelle ich es an, dass nur 3 immer in einer Reihe sind bei dieser Auflösung?
Problem 2: Schiebe ich mein Fenster zusammen, so dass nur noch 3 Boxen nebeneinander zu sehen sind, erhalte ich 3 Reihen a 3 Boxen und eine Reihe mit nur einer Box. Kann man die letzte Reihe irgendwie verhindern? So dass Bei Darstellung von 3 Boxen nebeneinander nur 3 Reihen angezeigt werden (also 9 statt 10 Beiträge)?
Vielleicht hat jemand auch eine Idee wo ich mir was abkupfern könnte. Amazon hat ein wenig zuviel Code in ihren Seiten als das ich da wirklich einsteigen kann :)
Danke für eure Hilfe !
mfg, Binolino
P. S. Ich hoffe das passt in Design/Layout. Das Problem ist wohl nur mit Javascript und CSS zu lösen, aber im Grunde ist es ein Designproblem :)
-
Problem 1: Bei meiner Bildschrimauflösung (1920x1080) sind bei diesem Test allerdings 4 Boxen nebeneinander. Ein Div mit Max-Width 1350px außenrum bringt nicht das erhoffte Ergebnis. Wie stelle ich es an, dass nur 3 immer in einer Reihe sind bei dieser Auflösung?
mit einer max-width von 1350 Pixel - ergo: du machst etwas falsch (oder dein Browser).
Problem 2: Schiebe ich mein Fenster zusammen, so dass nur noch 3 Boxen nebeneinander zu sehen sind, erhalte ich 3 Reihen a 3 Boxen und eine Reihe mit nur einer Box. Kann man die letzte Reihe irgendwie verhindern? So dass Bei Darstellung von 3 Boxen nebeneinander nur 3 Reihen angezeigt werden (also 9 statt 10 Beiträge)?
max-height von 3x der höhe einer Box in Kombination mit overflow: hidden;
Alternativ kannst du mit Media Queries die Viewportbreite und -höhe abfragen und ggf. einzelne Elemente ausblenden.
Vielleicht hat jemand auch eine Idee wo ich mir was abkupfern könnte. Amazon hat ein wenig zuviel Code in ihren Seiten als das ich da wirklich einsteigen kann :)
Selbst denken macht schlau :)
P. S. Ich hoffe das passt in Design/Layout. Das Problem ist wohl nur mit Javascript und CSS zu lösen, aber im Grunde ist es ein Designproblem :)
JavaScript ist dafür nur notwendig, wenn du alter Browser unterstützen willst - ich ändere den Themenbereich mal auf CSS.
-
Hallo ihr 2,
danke erstmal für eure Hilfe. Ich habe da wohl gestern einen kleinen Fehler bei max-height/width gemacht. In Media Queries möchte ich mich am Wochenende einlesen.
So funktioniert die Darstellung erstmal (mit einem ABER... kommt später):
<HTML><HEAD> <style type="text/css"> div.klein { float:left; height:350px; width:450px; } div.gross { max-height:1050px; max-width:1350px; overflow:hidden; } </style> </HEAD><BODY> <div class="gross"> <DIV class="klein" style="background-color:red"></DIV> <DIV class="klein" style="background-color:blue"></DIV> <DIV class="klein" style="background-color:orange"></DIV> <DIV class="klein" style="background-color:green"></DIV> <DIV class="klein" style="background-color:violet"></DIV> <DIV class="klein" style="background-color:pink"></DIV> <DIV class="klein" style="background-color:yellow"></DIV> <DIV class="klein" style="background-color:lightgreen"></DIV> <DIV class="klein" style="background-color:lightblue"></DIV> <DIV class="klein" style="background-color:black">wird jetzt nie angezeigt :)</DIV> </div> </BODY></HTML>So nun mein ABER :)
Ich möchte das ganze gerne für meinen Wordpressblog verwenden. Wenn ich nun mit dieser Technik einfach mehrere Blogeintäge ausblende bekommt das mein Blog nie mit. Alles ab dem 4te bzw. 7te Blogeintrag wird schlichtweg abgeschnitten.Eine Möglichkeit wäre, diese Präsentation nur für die Startseite zu verwenden und ab der 2ten Seite dann das komplette Archiv anzuzeigen... egal wieviele Blogeinträge schon auf der Startseite angezeigt wurden.
Eine weitere wäre die Fensterauflösung "irgendwie" nach PHP zu übermitteln. Wobei das wahrscheinlich tricky bis unmöglich ist.
Ich denke ich werde den Weg 1 wählen.
Selbst denken macht schlau :)
Ich denke lieber mit Ansatz, wo ich mir einen Teil abschauen kann und ihn so verändere, dass er zu mir passt. Zumindest in den Fachgebieten, wo ich nur wenig bis gar nicht aktiv arbeite. In Programmiersprachen, wo ich mich nicht um die Präsentation kümmern muss (<3 Schnittstellenprogrammierung) bin ich fitter :)
P. S. Ich hoffe das passt in Design/Layout. Das Problem ist wohl nur mit Javascript und CSS zu lösen, aber im Grunde ist es ein Designproblem :)
JavaScript ist dafür nur notwendig, wenn du alter Browser unterstützen willst - ich ändere den Themenbereich mal auf CSS.Danke dir :)
-
-
@@binolino:
nuqneH
Amazon hat ein wenig zuviel Code in ihren Seiten als das ich da wirklich einsteigen kann :)
Auch ein wenig zuviel div, als dass ich da wirklich einsteigen will.
P. S. Ich hoffe das passt in Design/Layout. Das Problem ist wohl nur mit Javascript und CSS zu lösen
Nö, auch ohne JavaScript. Mit CSS 3: Media Queries.
Qapla'
--
Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
(Mark Twain)-
Nö, auch ohne JavaScript. Mit CSS 3: Media Queries.
Hallo Echo? Hallo Otto!
-