mediengestalter.info
FAQ :: Mitgliederliste :: MGi Team

Willkommen auf dem Portal für Mediengestalter

Aktuelles Datum und Uhrzeit: Fr 29.03.2024 10:31 Benutzername: Passwort: Auto-Login

Thema: Dynamische Boxen in einer Reihe vom 03.07.2008


Neues Thema eröffnen   Neue Antwort erstellen MGi Foren-Übersicht -> Allgemeines - Nonprint -> Dynamische Boxen in einer Reihe
Seite: 1, 2  Weiter
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

Antworten mit Zitat Zum Seitenanfang

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>
  View user's profile Private Nachricht senden
bacon

Dabei seit: 24.10.2007
Ort: -
Alter: -
Geschlecht: -
Verfasst Do 03.07.2008 20:14
Titel

Antworten mit Zitat Zum Seitenanfang

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
  View user's profile Private Nachricht senden
Anzeige
Anzeige
deeesi

Dabei seit: 01.09.2004
Ort: Leverkusen
Alter: 42
Geschlecht: Weiblich
Verfasst Fr 04.07.2008 08:24
Titel

Antworten mit Zitat Zum Seitenanfang

das hier hab ich schon 2 mal benutzt und funktioniert gut:
http://matthewjamestaylor.com/blog/perfect-3-column.htm

ist ein bisschen rechnerei, aber geht schon.
kannst du mit % oder mit festen pixelbreiten benutzen.
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
bacon

Dabei seit: 24.10.2007
Ort: -
Alter: -
Geschlecht: -
Verfasst Fr 04.07.2008 10:11
Titel

Antworten mit Zitat Zum Seitenanfang

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
  View user's profile Private Nachricht senden
Groooveman
Threadersteller

Dabei seit: 18.03.2008
Ort: -
Alter: -
Geschlecht: -
Verfasst Fr 04.07.2008 11:13
Titel

Antworten mit Zitat Zum Seitenanfang

Jo, komplexe Hintergrundbilder werden verwendet (Runde Ecken undso Meine Güte! ). Ich hatte noch keine Zeit alles im Detail anzuschauen hier, aber 1000 Dank schonmal - ich melde mich...
  View user's profile Private Nachricht senden
Groooveman
Threadersteller

Dabei seit: 18.03.2008
Ort: -
Alter: -
Geschlecht: -
Verfasst Fr 04.07.2008 15:35
Titel

Antworten mit Zitat Zum Seitenanfang

deeesi hat geschrieben:
das hier hab ich schon 2 mal benutzt und funktioniert gut:
http://matthewjamestaylor.com/blog/perfect-3-column.htm

ist ein bisschen rechnerei, aber geht schon.
kannst du mit % oder mit festen pixelbreiten benutzen.


Ich versteh diese Seite nicht, wo ist das Beispiel? Oder hab ich Tomaten auf den Augen? *Schnief*
  View user's profile Private Nachricht senden
zweitaccount

Dabei seit: 25.01.2008
Ort: -
Alter: -
Geschlecht: -
Verfasst Fr 04.07.2008 16:20
Titel

Antworten mit Zitat Zum Seitenanfang

Letzteres, das Beispiel ist die Seite selbst *hehe*



Grins
  View user's profile Private Nachricht senden
Groooveman
Threadersteller

Dabei seit: 18.03.2008
Ort: -
Alter: -
Geschlecht: -
Verfasst Fr 04.07.2008 16:27
Titel

Antworten mit Zitat Zum Seitenanfang

Oh Mist * Ich geb auf... * Aber zum Glück ist jetzt erstmal Wochenende...
  View user's profile Private Nachricht senden
 
Ä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?
Neues Thema eröffnen   Neue Antwort erstellen Seite: 1, 2  Weiter
MGi Foren-Übersicht -> Allgemeines - Nonprint


Du kannst keine Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum nicht antworten.
Du kannst an Umfragen in diesem Forum nicht mitmachen.