zweispaltig

[misterunknown]

Moin,

ich verzweifle gerade an simplen 2 Spalten: http://tu-chemnitz.de/~dicm/bwl9
Der DIV mit der Willkommensnachricht soll 50% ausmachen, und der Bereich mit dem Bild auch.
der Code sieht bisher so aus (der Rest wird von Skripten generiert, da ich mich an das CD halten muss):

  
<h1>  
  Professur für Innovationsforschung und nachhaltiges Ressourcenmanagement</h1>  
<div class=md_cb style="float:left;width:300px;">  
<h3>Herzlich Willkommen</h3>  
Auf den nachfolgenden Seiten finden sie Informationen, zu den Aufgabenfeldern der Professur, zu Lehre, Forschung, und den persönlichen Seiten der Mitarbeiter.  
</div>  
<div class=md_cb style="margin-left:20px;">  
<img src="images/sums09_teilnehmer.jpg" alt="TeilnehmerInnen der 3. AAE-Winter School 2009 an der University of KwaZulu-Natal in Durban" width="250px;"><br><a href="http://www.aae-summerschool.org">TeilnehmerInnen der 3. AAE-Winter School 2009 an der University of KwaZulu-Natal in Durban</a>  
</div>  

im Stylesheet:

  
.md_cb {  
		padding:5px;  
		border:1px solid #005A46;  
	}  

[Tim]

Hi,

<div class=md_cb style="float:left;width:300px;">
<h3>Herzlich Willkommen</h3>
Auf den nachfolgenden Seiten finden sie Informationen, zu den Aufgabenfeldern der Professur, zu Lehre, Forschung, und den persönlichen Seiten der Mitarbeiter.
</div>
<div class=md_cb style="margin-left:20px;">
<img src="images/sums09_teilnehmer.jpg" alt="TeilnehmerInnen der 3. AAE-Winter School 2009 an der University of KwaZulu-Natal in Durban" width="250px;"><br><a href="http://www.aae-summerschool.org">TeilnehmerInnen der 3. AAE-Winter School 2009 an der University of KwaZulu-Natal in Durban</a>
</div>

in das zweite div muss auch ein float:left;
am besten du schreibst es in diemd_cb klasse.

Gruß Tim

[misterunknown]

Moin,

in das zweite div muss auch ein float:left;
am besten du schreibst es in diemd_cb klasse.

Aber theoretisch, sollte das doch auch mit margin-left funktionieren ( http://aktuell.de.selfhtml.org/weblog/css-spaltenlayout#einfaches-float ), ich verstehe nicht, warum das so nicht funktioniert.

Grüße Marco

[ChrisB]

Hi,

Aber theoretisch, sollte das doch auch mit margin-left funktionieren ( http://aktuell.de.selfhtml.org/weblog/css-spaltenlayout#einfaches-float ), ich verstehe nicht, warum das so nicht funktioniert.

Was sollen denn die 20px margin-left, die du für das zweite DIV-Element angegeben hast, deiner Meinung nach bewirken?

Und wieso du von 50% redest, ist mir auch unklar - relevante Prozentangaben kann ich in den Formatierung, die diese Stelle betreffen, nicht entdecken.

MfG ChrisB

[misterunknown]

Moin,

Was sollen denn die 20px margin-left, die du für das zweite DIV-Element angegeben hast, deiner Meinung nach bewirken?

Die beiden DIVs sollten aufgrund dieser Angabe nebeneinander angezeigt werden, wie in Beispiel 2 auf der Seite http://aktuell.de.selfhtml.org/weblog/css-spaltenlayout#mehrspaltigkeit-mit-float

Und wieso du von 50% redest, ist mir auch unklar - relevante Prozentangaben kann ich in den Formatierung, die diese Stelle betreffen, nicht entdecken.

Da hatte ich wohl gerade getestet, ob es mit absoluten Angaben funktioniert. Tat es aber auch nicht.
Ich habe es auch mit der Angabe div { overflow: hidden; } versucht. Das funktioniert zwar, generiert aber einen Haufen anderer Probleme im Corporate Design, ist also keine Option.

Grüße Marco

[ChrisB]

Hi,

Was sollen denn die 20px margin-left, die du für das zweite DIV-Element angegeben hast, deiner Meinung nach bewirken?

Die beiden DIVs sollten aufgrund dieser Angabe nebeneinander angezeigt werden

Das bewirkt eine margin-Angabe allein nicht, noch dazu eine mit so geringem Wert.

float bewirkt, dass die Container nebeneinander dargestellt werden. (Genauer: Wenn er erste links gefloatet ist, fließen die Inhalte des nachfolgenden Containers um ihn herum.)

Ich habe es auch mit der Angabe div { overflow: hidden; } versucht.

Die bewirkt alleine auch nicht, dass Elemente nebeneinander stehen.
Die ist eher im Kontext Einschließen von Float-Boxen interessant. Dass das der Kern deines Problems ist, konnte ich aber noch nicht herauslesen.

MfG ChrisB

[misterunknown]

Moin,

Das bewirkt eine margin-Angabe allein nicht, noch dazu eine mit so geringem Wert.

Warum geht es dann bei dem entsprechenden Beispiel?

float bewirkt, dass die Container nebeneinander dargestellt werden. (Genauer: Wenn er erste links gefloatet ist, fließen die Inhalte des nachfolgenden Containers um ihn herum.)

Richtig. Und wörtlich heißt es in dem Beitrag von SelfHTML:

Klassische Mehrspaltigkeit ordnet die Spalten in nebeneinander liegenden, sich nicht überschneidenden Rechtecken an. Um dies mit float zu erreichen, muss dafür gesorgt werden, dass die Box des zweiten div-Elements horizontal erst nach dem Ende der float-Box beginnt.
Dies wird für gewöhnlich mit margin-left für das zweite div-Element gelöst, wie auch der SELFHTML-Abschnitt Mehrspaltige CSS-basierte Layouts beschreibt.

Die bewirkt alleine auch nicht, dass Elemente nebeneinander stehen.
Die ist eher im Kontext Einschließen von Float-Boxen interessant. Dass das der Kern deines Problems ist, konnte ich aber noch nicht herauslesen.

Der Kern des Problem ist, dass momentan die beiden Boxen ineinander greifen. Die sollen aber folgendermaßen angezeigt werden:

xxxxxxxx   yyyyyyyyyyyyy
xxxxxxxx   yyyyyyyyyyyyy
xxxxxxxx   yyyyyyyyyyyyy
           yyyyyyyyyyyyy
           yyyyyyyyyyyyy

Grüße Marco

[Gunnar Bittersmann]

@@misterunknown:

nuqneH

Der Kern des Problem ist, dass momentan die beiden Boxen ineinander greifen. Die sollen aber folgendermaßen angezeigt werden:

xxxxxxxx   yyyyyyyyyyyyy
xxxxxxxx   yyyyyyyyyyyyy
xxxxxxxx   yyyyyyyyyyyyy
           yyyyyyyyyyyyy
           yyyyyyyyyyyyy

Du willst
a) der Y-Box soviel margin-left geben, dass sie neben der X-Box ist? (Vorsicht bei schmalen Viewports!)
oder
b) die Y-Box auch floaten lassen?
oder
c) gar nichts floaten lassen?

Qapla'

[misterunknown]

Moin,

Du willst
a) der Y-Box soviel margin-left geben, dass sie neben der X-Box ist? (Vorsicht bei schmalen Viewports!)

So hatte ichs probiert. Das Problem war eher ein ideelles: Ich habe der linken Box 45% gegeben und der rechten Box 48% margin-left. Wenn man nun aber den Browser groß gezogen hat, änderte sich auch der Abstand zwischen den Boxen, was ich nicht wollte.

b) die Y-Box auch floaten lassen?

Das habe ich auch probiert. Dort war das Problem, dass wenn der Anzeigebereich zu klein wurde, die rechte Box nach unten gesprungen ist, die Boxen also untereinander angezeigt wurden, was auch nicht erwünscht war.

c) gar nichts floaten lassen?

Das ist eine interessante Alternative, ich habe den Artikel mal durchgelesen. Werde ich beim nächsten mal in Betracht ziehen.
Gelöst habe ich das Problem jetzt mit "display:table", denn nach kurzem nachdenken, was ich eigentlich will, wurde mir klar, dass trotz des ganzen "Tabellen-als-Layouting-Werkzeug-nehmen"-Bashing der Grundgedanke von Tabellen doch ganz sinnvoll ist, vor allem wenn man etwas tabellarisch darstellen will^^. Und mit "display:table" kann ich das sogar mit DIVs machen :)

Grüße Marco

[bleicher]

Grüße,

Aber theoretisch, sollte das doch auch mit margin-left funktionieren ( http://aktuell.de.selfhtml.org/weblog/css-spaltenlayout#einfaches-float ), ich verstehe nicht, warum das so nicht funktioniert.

falls du die 2  sich überscheidenden boxen mit text und foto meinst -
normale und gefloatete elemente haben ein gesondertes "flussverhältniss" genauer gesagt wird ein nicht gefolatetes element sich so verhalten, als wäre float gar nicht da, da der float ein element aus dem fluss nimmt.
margin müsste schon größer als 20px sein oder überdenk layout, ist nicht sauber, du wirst schwierigkeiten kriegen

P.S:darf ich nun im Lebenslauf behaupten, ich hätte TU-hemnitz in IT-Fragen  beraten? käme mordsgeil an.
MFG
bleicher

[misterunknown]

Moin,

normale und gefloatete elemente haben ein gesondertes "flussverhältniss" genauer gesagt wird ein nicht gefolatetes element sich so verhalten, als wäre float gar nicht da, da der float ein element aus dem fluss nimmt.

Genau das wird aber anders beschrieben, und zwar hier klick im zweiten Beispiel.

margin müsste schon größer als 20px sein oder überdenk layout, ist nicht sauber, du wirst schwierigkeiten kriegen

Die 20px sind erst einmal zum testen gedacht. Ich will dann einfach, dass zweei Boxen nebeneinander stehen, es reicht mir auch schon, wenn sie unterschiedliche größen haben.

P.S:darf ich nun im Lebenslauf behaupten, ich hätte TU-hemnitz in IT-Fragen  beraten? käme mordsgeil an.

Nein, da wird das URZ sicher stutzen. Allerdings kannst du erwähnen, dass du nem Hiwi beim Designen der Seite für die Professur Innovationsforschung versucht hast zu helfen. Kommt aber sicher nich so knackig ;-P