Autor |
Nachricht |
Groooveman
Threadersteller
Dabei seit: 18.03.2008
Ort: -
Alter: -
Geschlecht: -
|
Verfasst Do 03.07.2008 16:18
Titel Dynamische Boxen in einer Reihe |
|
|
Hallo,
gibt es eine halbwegs "vernüftige Lösung" (keine Tabellen, keine feste Höhen), um Boxen nebeneinander in einer Reihe dynamisch auf die gleiche Höhe zu bekommen?
Soll heißen: Die Box mit dem "höchsten Inhalt" definiert die Höhe aller anderen Boxen in der Reihe. In meinem Beispiel meinetwegen der Text im <p>, weil der restliche Inhalt der Boxen (<h2> <img> <a href>) immer gleich hoch ist...
Gruss
G
Code: |
.row { width:640px; border:1px solid red; margin:0 0 20px 0; }
.box { float:left; width:300px; background-color:#33ccff; margin:0 20px 0 0; }
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Dynamische Boxen</title>
<link rel="stylesheet" type="text/css" href="boxes.css" />
</head>
<body>
<div class="row">
<div class="box">
<h2>Überschrift</h2>
<img src="bild.jpg" width="300" height="150" alt="Bild" />
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
<a href="#">Link</a>
</div>
<div class="box">
<h2>Überschrift</h2>
<img src="bild.jpg" width="300" height="150" alt="Bild" />
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
<a href="#">Link</a>
</div>
<div style="clear:both;"></div>
</div>
<div class="row">
<div class="box">
<h2>Überschrift</h2>
<img src="bild.jpg" width="300" height="150" alt="Bild" />
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
<a href="#">Link</a>
</div>
<div class="box">
<h2>Überschrift</h2>
<img src="bild.jpg" width="300" height="150" alt="Bild" />
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
<a href="#">Link</a>
</div>
<div style="clear:both;"></div>
</div>
</body>
</html>
|
|
|
|
|
|
bacon
Dabei seit: 24.10.2007
Ort: -
Alter: -
Geschlecht: -
|
Verfasst Do 03.07.2008 20:14
Titel
|
|
|
da hilft nur javascript... oder sowas wie faux columns, aber da haste verloren in browsern, die keinen natives zoom unterstützen. daher ist das eigentlich beides keine optimale lösung.
Zuletzt bearbeitet von bacon am Do 03.07.2008 20:14, insgesamt 1-mal bearbeitet
|
|
|
|
|
Anzeige
|
|
|
deeesi
Dabei seit: 01.09.2004
Ort: Leverkusen
Alter: 42
Geschlecht:
|
|
|
|
|
bacon
Dabei seit: 24.10.2007
Ort: -
Alter: -
Geschlecht: -
|
Verfasst Fr 04.07.2008 10:11
Titel
|
|
|
Ja normaal, wenn du rein CSS-basiert arbeitest ist das kein Problem. Aber wenn du komplexe Hintergrundgrafiken verwendest, oder auch vertikale Linien (border) skalieren die nicht mit - darauf hatte mich mich (missverständlich) bezogen.
Daher bin ich eigentlich kein Freund dieser "ich hab mehrere Spalten und die solln immer gleich hoch sein" Lösungen. Wenn ichs auch auf meiner aktuellen webseite genau so gemacht hab -.-
Zuletzt bearbeitet von bacon am Fr 04.07.2008 10:12, insgesamt 1-mal bearbeitet
|
|
|
|
|
Groooveman
Threadersteller
Dabei seit: 18.03.2008
Ort: -
Alter: -
Geschlecht: -
|
Verfasst Fr 04.07.2008 11:13
Titel
|
|
|
Jo, komplexe Hintergrundbilder werden verwendet (Runde Ecken undso ). Ich hatte noch keine Zeit alles im Detail anzuschauen hier, aber 1000 Dank schonmal - ich melde mich...
|
|
|
|
|
Groooveman
Threadersteller
Dabei seit: 18.03.2008
Ort: -
Alter: -
Geschlecht: -
|
Verfasst Fr 04.07.2008 15:35
Titel
|
|
|
Ich versteh diese Seite nicht, wo ist das Beispiel? Oder hab ich Tomaten auf den Augen?
|
|
|
|
|
zweitaccount
Dabei seit: 25.01.2008
Ort: -
Alter: -
Geschlecht: -
|
Verfasst Fr 04.07.2008 16:20
Titel
|
|
|
Letzteres, das Beispiel ist die Seite selbst
|
|
|
|
|
Groooveman
Threadersteller
Dabei seit: 18.03.2008
Ort: -
Alter: -
Geschlecht: -
|
Verfasst Fr 04.07.2008 16:27
Titel
|
|
|
Oh Mist Aber zum Glück ist jetzt erstmal Wochenende...
|
|
|
|
|
|
|
|
Ähnliche Themen |
Ausgabe aus Datenbank in zweier Reihe
CSS und div-Boxen
einzelnes PDF-File "tanzt aus der Reihe"
Div Boxen und Darstellungsproblem
Problem mit div-Boxen
CSS-Boxen übereinander?
|
|