Dynamische Zeilenhöhe an anderem div bestimmen

mp5gosu · 11.12.2009

Huhu ihr fleißigen Webjunkies,

hab ein recht exotisches Problem, deshalb leider auch der komische Threadtitel.
Zuerst mal eine Grafik, dann die Erklärung:

Das Problem: Die blaue Box gibt starren Text vor. Die grüne Box den dazugehörigen Content, per SQL und PHP eingefügt. Beide sind separate Divs in einem Wrapper.
Wie man jetzt aber sehen kann, kann es passieren, dass bei mehrzeiligem Content in der grünen Box die Reihenfolge der Zugehörigkeiten durcheinander gebracht werden.
Das untere Schema zeigt in dem Fall die korrekte Darstellung. Da aber die Länge des Textes auch mal länger oder auch kürzer sein kann, muss die linke(blaue) Box dynamisch an der Stelle die Zeilehöhe erweitern.

Da das aber unpraktikabel und mit deutlichen Mehraufwand im PHP/SQL-Code verbunden wäre, dachte ich, ich könnte beide zu einem Div zusammenfassen und den generierten Content wie in Word, etc. an Tabs ausrichten.
Frage: Wie? Wenn ich Specialchars (#PCDATA) nutzen würde, ginge das?

Hoffe, ich war verständlich genug und warte auf Eure Antworten.

taomir · 11.12.2009

AW: Dynamische Zeilenhöhe an anderem div bestimmen

Also wenn ich dich richtig verstehe, dann willst du, dass zu dem Punkt 1 auf der gleichen Höhe der Text 1 steht, bei Punkt 2 Text 2 usw.

Ist es da nicht einfacher eine unsichtbare Tabelle in den Hintergrund zu legen!? die passt sich dann automatisch der Höhe der Zeilen an...

mp5gosu · 11.12.2009

AW: Dynamische Zeilenhöhe an anderem div bestimmen

Schon ja,aber auf Tabellen muss ich gänzlich verzichten, da Konformität zu wahren gilt.
Die Idee war aber im Ansatz nicht schlecht. Könnte die evtl. auch mit CSS realisieren.

Herr_D · 11.12.2009

AW: Dynamische Zeilenhöhe an anderem div bestimmen

Das ist Heavy Metal

Müssen die Farben sein?

Ohne Hintergrund, dafür sehr flexibel

HTML:

<!doctype html public "-//W3C//DTD HTML 4.01 //EN">
<html>
<head>
<title></title>
<meta name="author" content="R.D">
<meta name="generator" content="Ulli Meybohms HTML EDITOR">
<meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
<style type="text/css">
<!--
* {margin:0; padding:0 }

body {
font-size:100.01%;
font-family: sans-serif;
}


#outro {
width:40em;
margin:2em;
padding:0.5em;
background-color:#dedede;
border:1px solid #000;
}

.que {
float:left;
width:5em;
color:#000;
padding:0.2em; }


.qua {
color:#000022;
padding:0.2em;
padding-left: 5.5em;
}

.qui {
clear:both;
height:0px;
line-height:0px;
font-size:0px;
}

-->
</style>
</head>
<body >
<div id="outro">
<div class="que">Punkt 1</div><div class="qua">Text 1</div><div class="qui"></div>
<div class="que">Punkt 2</div><div class="qua">Text 2 Text 2 Text 2 Text 2 Text 2 Text 2 Text 2 Text 2 Text 2 Text 2 Text 2 Text 2 Text 2 Text 2 Text 2 Text 2 Text 2 Text 2 Text 2 Text 2 Text 2 Text 2 Text 2 Text 2 Text 2 Text 2 Text 2 Text 2 Text 2 Text 2 Text 2 Text 2 Text 2 Text 2 Text 2 Text 2 Text 2 Text 2 Text 2 Text 2 Text 2 Text 2 Text 2 Text 2 Text 2 Text 2 Text 2 Text 2 Text 2 Text 2 Text 2 Text 2 Text 2 Text 2 Text 2 </div><div class="qui"></div>
<div class="que">Punkt 3</div><div class="qua">Text 3Text 3Text 3Text 3Text 3Text 3 </div><div class="qui"></div>
</div>
</body>
</html>

Hintergrundfarbe würd ich dann per Bild einsetzen und dann statt em px als Maß...

mp5gosu · 11.12.2009

AW: Dynamische Zeilenhöhe an anderem div bestimmen

Okay Herr D, you made my day.

So hab ich mir das gewünscht. Hätte man aber auch selbst drauf kommen können.

Vielen Dank...

sokie · 11.12.2009

AW: Dynamische Zeilenhöhe an anderem div bestimmen

Konformität wahren... was genau heisst das in dem Beispiel?
wenn dieMöglichkeit besteht, beide DIV zu einem zusammenzufassen wäre das ja auch nicht Konform. Erklär mal.

ps:hab grad gesehen, dass die Idee mit den vielen Divs auch eine Option wäre, nun verstehe ich gar nicht, warm da keine liste oder eineTabelle (sie ist für tabellarische Daten immer noch erste Wahl) in Frage kommt.

mp5gosu · 11.12.2009

AW: Dynamische Zeilenhöhe an anderem div bestimmen

Tabelle: Stichwort SEO. Tabellen sind quasi veraltet. Vergleichbar mit Framesets. Aber darüber scheiden sich die Geister...
Und was das Zusammenfassen mehrerer Divs zu einem angeht: Das ist schon in Ordnung. Kein Schwein (Spider) achtet darauf, wieviele Divs in einem Dokument vorkommen...
Tatsächlich stelltfür mich D's Lösung die beste und einfachste Lösung dar.
Aber eine Frage noch: Welche Funktion erfülltden die "qui" - Klasse? Die kann man doch auch getrost weglassen, oder Wahrung Cross-Browser Fähigkeit?

edit: Tabellen kommen auch wegen der Gestaltung nicht in Frage.

edit#2: Nochmals vielen Dank, D. Das funktionierte auf Anhieb so gut, dass ich mich fast nass gemacht hätte

Atzepeng · 11.12.2009

AW: Dynamische Zeilenhöhe an anderem div bestimmen

mp5gosu schrieb:
Tabelle: Stichwort SEO. Tabellen sind quasi veraltet. Vergleichbar mit Framesets. Aber darüber scheiden sich die Geister...

Tabellen sollte man nur da verwenden wo man auch Tabellen benötigt, allerdings nicht zum Designen. Stichwort Barrierefreiheit.

mp5gosu schrieb:
Aber eine Frage noch: Welche Funktion erfülltden die "qui" - Klasse? Die kann man doch auch getrost weglassen, oder Wahrung Cross-Browser Fähigkeit?

Nein kannst du nicht. Er verwendet ein "float:left" für den ersten und zweiten DIV damit er links neben dem anderen steht. Das folgende dritte DIV bekommt ein "clear:both" damit der nächste DIV in der nächsten Zeile steht.

MfG

mp5gosu · 12.12.2009

AW: Dynamische Zeilenhöhe an anderem div bestimmen

Atzepeng schrieb:
Tabellen sollte man nur da verwenden wo man auch Tabellen benötigt, allerdings nicht zum Designen. Stichwort Barrierefreiheit.

Nein kannst du nicht. Er verwendet ein "float:left" für den ersten und zweiten DIV damit er links neben dem anderen steht. Das folgende dritte DIV bekommt ein "clear:both" damit der nächste DIV in der nächsten Zeile steht.

MfG

Nun, Tabellen kann ich nicht nutzen, aus den folgenden Gründen:
Sie laden lang, sind unflexibel, nicht für mobile Geräte geeignet, Der Zugang für Blinde Menschen wird fast unmöglich, viele Designs lassen sich mit Tabellenkonstrukten nicht realisieren. Kombiniert man sie mit CSS, landet man wieder bei der Geschichte der Barrierefreiheit.
Und doch, man kann das letzte Element weglassen, es erfüllt eigentlich keine praktische Funktion.
Man muss nur dafür sorgen, dass die einzelnen Zeilen ein clear:both haben, um den Umbruch der darüberliegenden Floats zu erzwingen. Ist aber schon getan.

Atzepeng · 12.12.2009

AW: Dynamische Zeilenhöhe an anderem div bestimmen

Ja wenn du es änderst dann geht das natürlich

.