Tutorial HTML, CSS u. PHP - Forum

[NeoAramis]

Liebe Forengemeinde

Ich arbeite momentan an einem Projekt mit meinem Bruder. Wie erstellen für eine Unternehmung eine Produktdatenbank. Ich bin für das Design mit HTML und CSS zuständig. Dabei bin ich auf ein Problem gestossen. Irgendwie will mir keine Lösung einfallen bzw. sehe ich den Wald vor lauter Bäumen nicht.

Es handelt sich um folgende Seite:
http://data.anver.ch/heiq/product_overview.html

Die einzelnen Boxen mit der Überschrift Family können ja je nach Anzahl Produkten verschiedene Höhen haben. Dabei sollen die einzelnen Boxen ein spezielles Float-Verhalten haben. Und zwar wenn eine Reihe mit Boxen gefüllt worden ist, sollen die nachfolgenden Boxen auf der Höhe des unteren Rand der höchsten Box der oberen Reihe sich erneut aneinander reihen. Folgende Grafik soll mein Vorhaben zeigen:

Beispiel

bsp.png (2.59 KiB) 158-mal betrachtet

Ich hoffe ihr versteht was ich meine und könnt mir die Lösung verraten. Vielen herzlichen Dank jetzt schon!

[Sarkkan]

Öhm.. spontan würde ich sagen alle 3 Boxen eine leere Clearende Box setzten? (Ist aus Programmierersicht auch sehr einfach zu lösen)
Bzw. evtl ein Stil-Element dafür missbrauchen, also z.B. <hr/>, damit es "gut aussieht"?
Oder Reihe 1 Links floaten lassen, reihe 2 komplett rechts floaten lassen und dafür links clearen,...
Beziehungsweise weiß ja nicht wie sehr du/ihr auf den IE < 9 sch****, aber um überflüssigen Code zu entgehen würde sich ansonsten noch :nth-child() anbieten.

Ansonsten habe ich spontan keine Einfälle mehr
Hoffe konnte ein wenig helfen, oder dich inspirieren

[NeoAramis]

Danke für Deine Antwort. Ich werde mal deine Vorschläge ausprobieren.

IE muss nicht beachtet werden. Die Datenbank läuft dann auf einem Server auf welches nur Clients in einem lokalen Netzwerk zugreifen. Daher muss nur ein Browser beachtet werden (zum Glück )

[Sarkkan]

Solche Projekte sind die besten Wir haben in unserer Agentur auch ein Agenturinternes-Projekt, da müssen wir, wenn wir daran arbeiten, auch nur auf den Chrome/Webkit achten
Aber dann habe ich eine Kleine Frage *nerv* Wenn ihr nur einen Browser beachten müsst, wieso verwendet ihr 2 Präfixe?
(Geht mir gerade nur um dich, dass du dir da nicht zu viel Schreibarbeit machst )

[NeoAramis]

Da hast du recht! Da wird einem enorm viel Arbeit erspart. Aber was meinst du genau mit Präfixe?

[Sören]

Das zum Beispiel:

Code: Alles auswählen

    border-radius: 3px;
   -moz-border-radius: 3px;
   -webkit-border-radius: 3px;

Wenn du / ihr nur auf Webkit achten müsst könnt ihr euch auf jeden Fall das -moz-border-radius und vielleicht auch das -webkit-border-radius (ich weiß grad nicht, ob Chrome border-radius auch schon ohne Präfix kann, in der neuesten Version glaub ich aber schon) sparen.

[NeoAramis]

Aha ok, ja wir sind noch nicht sicher welchen Browser wir wählen.

[Sarkkan]

Ich habe derzeit einen Hass auf Firefox. Dieser verschlechtert sich von Version zu Version.
Würde aber auch so dann Chrome empfehlen, der Browser läuft sehr stabil und ist in Sachen JavaScript echt fix =) Außerdem unterstützen Webkit Browser die meisten neuen HTML5 und CSS3-Features

[NeoAramis]

Ja bin momentan auch mit Chrome im Web unterwegs (also jetzt schon seit mehreren Monaten). Firefox ist vor allem brutal langsam geworden. Safari finde aber immer sympathischer seit Version 5.0. Aber schlussendlich hat jeder dieser drei Browser Features die ich gerne einaml in einem einzelnen Browser erleben möchte.