PHP Frage zu einer einfachen Ausgabe mit Inhalten, nebeneinander

[Domi83]

Hallo Leute, ich habe da mal eine PHP und HTML technische Frage an Euch

Ich habe eine SQL Tabelle, gefüttert mit den Flaggen aller Länder weltweit... zumindest hoffe ich, dass meine Kollegen diese komplett haben

Diese sollen nun auf einer Internetseite dargestellt werden.
Die Bilder (Images) werden in DIV Boxen gepackt die mit "float left" linksbündig dargestellt werden. Wenn die Zeile dann voll ist, kommen die nächsten Bilder / Blöcke in eine weitere Zeile. Irgendwann habe ich dann mal x DIV Boxen nebeneinander und eine gewisse Anzahl an Zeilen runter.

Nun sind ja DIV Layer immer eigenständig. Ich würde aber gerne mit einem Trick die Höhe der Layer pro Zeile gleich gestalten. Mit table geht das ja automatisch, sobald die Höhe eines TD größer wird, passt sich der ganze TR an und alle TDs in dieser Zeile werden höher. Aber mit table wüsste ich nicht im Ansatz wie ich mein Vorhaben realisieren könnte.

Gibt es da einen Kniff / Trick wie Ihr das macht um so etwas zu realisieren?
Habt Ihr da vielleicht ein Beispiel oder Tipp für mich?

Gruß, Domi

 

[craine]

Ist das nicht eher eine CSS-technische Frage oder stehe ich auf dem Schlauch?

Meinst du mit Div-Layer die Div-Container, die je eine Flagge enthalten?

 

[Domi83]

Hm.. Das könnte auch durchaus eine CSS Frage sein.. ich war mir da nun nicht wirklich sicher, ob es PHP, HTML oder doch CSS sein könnte.

Der Aufbau ist aktuell wie folgt...

<div class="rahmen">
 <div class="flagge"><img src=""></div>
 <div class="flagge"><img src=""></div>
 <div class="flagge"><img src=""></div>
 <div class="flagge"><img src=""></div>
 <div class="flagge"><img src=""></div>
 <div class="flagge"><img src=""></div>
</div>

Der Rahmen ist nur dazu da, um die maximale Breite zu bestimmen. Je kleiner ich diese mache, je weniger Bilder / Flaggen werden ja nebeneinander (in einer Zeile) dargestellt

 

[apnotix]

Per JavaScript würde ichs wie folgt machen:

http://jsfiddle.net/dm8kC/1/

Erst ermitteln wie groß die größte Box ist und dann alle Boxen auf die maximale Höhe festlegen.

 

[Nixdorf]

Ich würde aber gerne mit einem Trick die Höhe der Layer pro Zeile gleich gestalten.

Du gibst allen DIVs die gleiche Höhe, am besten über eine entsprechende CSS-Klasse.

 

[Speedy.]

In dem Fall variiert die Größe der Flaggen?
Mein Vorschlag wäre (auch um es optisch aufzuwerten), den Bildern innerhalb von <div class="flagge"></div> eine maximale Höhe mit max-height; und width: auto; zu geben. Damit bleiben die Proportionen des Bildes erhalten und du stellst sicher, dass kein Flaggenbild die Reihe "sprengt". Dazu dem div ein display: inline-block; (oder float: left) mitgeben und es sollte funktionieren.

 

[Domi83]

Also eine proportionale Skalierung der Images über CSS ist ein guter Ansatz. Habe es gerade mal ausprobiert. Jetzt kommt etwas dazu, was mir beim erklären gar nicht so bewusst war.

Unter den Bildern steht noch zu welchem Land die Flagge gehört...

<div class="rahmen">
 <div class="flagge">
  <img src=""><br />
  USA Flagge
 </div>
 <div class="flagge">
  <img src=""><br />
  Südgeorgien und die Südlichen Sandwichinseln Flagge
 </div>
</div>

Es ist der Text der dazu führt, dass die Höhe der DIV Blöcke unterschiedlich hoch ist. Aber das mit der fixen Größe wäre die Lösung. Sieht dann zwar etwas komisch aus, weil alle so viel freue Fläche haben. Aber stimmt, dann muss ich das so machen

Ich setze das mal in die Tat um und schaue was passiert Wobei die Lösung mit dem JS auch sehr gut aussieht, das probiere ich zusätzlich mal aus

 

[craine]

Du gibst allen DIVs die gleiche Höhe, am besten über eine entsprechende CSS-Klasse.

Das war auch mein Gedanke
Abstände kannst du dann ja mit margin und padding realisieren.

 

[Speedy.]

Übrigens wäre es semantisch sinnvoller, die Tags figure und figcaption zu nutzen.

<div class="rahmen">
  <figure class="flagge">
    <img src="flagge.jpg" alt="Deutsche Flagge">
    <figcaption>Deutsche Flagge</figcaption>
  </figure>
</div>

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/figure

 

[Domi83]

Würdest Du mir auch genauer erklären, warum? Wichtig wäre dann noch die Browser Kompatibilität

Gruß, Domi

 

[Daaron]

Bevor man die JS-Keule schwingt und in Teufels Küche kommt, wenn mal jemand JS deaktiviert hat (NoScript-Paranoiker gibts wie Sand am Meer), sollte man immer erst einmal mit CSS arbeiten.

Die einfachste Lösung ist: display:inline-block;
Inline-Block-Elemente kann man hinsichtlich ihrer Größe manipulieren, genau wie Block-Elemente. Andererseits fließen sie nebeneinander, so wie Inline-Krams (<span>,<a>,...). Wenn man inline-block noch mit nem vertical-align kombiniert, kriegt man auch ne anständige Ausrichtugn hin.

Ergänzung (16. Januar 2014)

Würdest Du mir auch genauer erklären, warum? Wichtig wäre dann noch die Browser Kompatibilität

Warum? Semantik
Kompatibilität? Kein Problem, wenn du HTML5Shim für Ur-Holzklasse-Browser (also IE<=8) einbaust.

 

[Domi83]

Okay, ich glaube dann habe ich es nun hinbekommen wie ich es mir vorgestellt hatte... Zumindest sieht es sehr gut aus

<div id="flaggen">
 <figure class="flagge">
  <img alt="Deutschland Flagge" src="" title="Deutschland Flagge">
  <figcaption>Deutschland Flagge</figcaption>
 </figure>
</div>

div#flaggen { }
div#flaggen .flagge {
 border: 1px solid #cbccca;
 background-color: #e4e5e3;
 display: inline-block;
 font-size: 10px;
 padding: 7px;
 width: 100px;
}
div#flaggen .flagge img {
 max-height: 50px;
 width: auto;
}

 

[Daaron]

Du brauchst kein div#flaggen schreiben. da "flaggen" eh ne ID ist, wirst du ja wohl kaum irgendwo im Dokument ein anderes Element mit der ID haben. Kurze Selektoren sind glückliche und schnelle Selektoren.

Übrigens noch ein Hinweis zu inline-block. IB's verhalten sich wie Text, das heißt: Leerzeichen (oder Zeilenumbrüche) im Code werden tatsächlich als 1 Leerzeichen gerendert. Nach der schließenden </figure> sollte also direkt die nächste <figure> aufgehen, ohne Zeilenumbruch dazwischen. Sieht komisch aus, verhindert aber Nebeneffekte.
Wenn man später mal mit Code Kompression arbeitet fällt das nicht mehr ins Gewicht.

 

[Nixdorf]

Wieso hier mehrfach "max-height" statt einer festen Höhe mit "height" empfohlen wird, ist mir schleierhaft. Damit ist die Höhe einer Zeile weiterhin dynamisch. Jedes DIV kann dann 50px oder weniger hoch sein und sobald es eine Zeile gibt, in der keines der DIVs 50px hoch ist, ist diese Zeile weniger hoch als die anderen.

 

[Daaron]

Spätestens wenn man Responsive Designs schreibt, nimmt man lieber variable Höhen in Kauf als die aus festen Werten oftmals entstehenden Überläufe.

 

[Domi83]

@Daaron, dass mit dem "div#flaggen", also dass ich in der CSS noch mal sage des es sich dabei um einen DIV handelt, ist irgendwie eine Angewohnheit. Ich glaube damit hatte ich mal angefangen, als ich einem DIV und einem P die gleiche Klassenbezeichnung verpassen wollte, aber mit minimal unterschiedlichen Merkmalen

Ich weiß aber nicht mehr wann und wo ich das brauchte, sonst würde ich jetzt mein Beispiel posten

Gruß, Domi

 

[Daaron]

Bei Klassen macht es ja auch Sinn, nicht aber bei IDs. Und selbst bei Klassen... was, wenn du irgendwann mal von der alten <div>-Suppe auf semantisches HTML5 wechseln willst? Willst du dein ganzes CSS umschreiben?

Halte CSS-Selektoren so kurz wie möglich, schon allein, um sie später leichter überschreiben zu können.

 

[Domi83]

Hm.. Ich bin jetzt sowohl verwirrt, als auch neugierig wegen der Wortwahl "der alten DIV Suppe"..

Ich hatte zwar immer wieder mal geschaut nach Grundgerüsten etc. auf HTML5 Basis, um auch mal mit der Zeit zu gehen, aber habe immer wieder die Grundgerüste gefunden wie ich sie auch kenne und mit diversen DIVs drin. Wird das in HTML5 anders und besser realisiert?

Für so etwas habe ich immer ein offenes Ohr
Und die ganze CSS umschreiben ist so eine Sache... eigentlich nicht, aber bei kurzen Selektoren gehen mir dann irgendwann die Bezeichnungen / Namen aus... Ich versuche schon so kurz wie möglich und habe dann am Ende so etwas wie ".textcenter { }" und hoffe, dass das OK ist.

 

[Daaron]

Hm.. Ich bin jetzt sowohl verwirrt, als auch neugierig wegen der Wortwahl "der alten DIV Suppe"..

Wo es semantisch korrekt ist, werden die neuen semantischen Blockelemente verwendet -> weniger Div-Suppe. Siehe <figure>...

Und die ganze CSS umschreiben ist so eine Sache... eigentlich nicht, aber bei kurzen Selektoren gehen mir dann irgendwann die Bezeichnungen / Namen aus...

Kurz heißt nicht, dass du nur 5 Zeichen für ne Klasse nehmen sollst. Ich hab auch Klassennamen wie ".responsive33" (1/3 Spalte, schaltet bei schmalen Displays auf volle Breite und hört auf zu floaten). Die Selektoren selbst im CSS (oder JS) sollst du kurz halten. Also statt div.responsive33 eben nur .responsive33. Das beschleunigt die Engine etwas.

 

[Nixdorf]

Spätestens wenn man Responsive Designs schreibt, nimmt man lieber variable Höhen in Kauf als die aus festen Werten oftmals entstehenden Überläufe.

Das passt hier aber nicht. Offenbar werden unterschiedlich hohe Bilder von Flaggen in den DIVs ausgegeben, denn sonst wäre das Problem gar nicht erst aufgetreten. Und dann ist eine feste Höhe zwingend notwendig, um das Problem zu beheben. Es soll hier ja ein Float-Layout erstellt werden, bei dem immer gleich große Boxen eine Tabelle mit variabler Spaltenzahl nachstellen. Von Responsive Design war in der ursprünglichen Frage nie die Rede, aber das angedachte Float-Layout dürfte auch in einem solchen Seitenlayout wunderbar funktionieren.