Zweispaltiger <div> im content-Bereich

[dylan]

Ich habe einen zweispaltigen im content-Bereich [HTML] eingefügt:

Code: Select all

<div style="width: 600px; line-height: 1.4em; border: #7B888E 1px solid; background-color: #d8dde4;">
<div style="float: left; width: 180px; font-weight: bold; padding: 10px; background-color: #fff; border-right: #B4B4B4 1px solid;"><img src="uploads/images/image.jpg" alt="" width="180" height="250" /></div>
<div style="float:left;padding:10px 0px 10px 16px;"><strong>Lorem Ipsum</strong><br />Entwurf und Planung einer Publikation werden meist schon erstellt, bevor ...</div>
</div>

Eigentlich sollten die Inhalte, ähnlich wie in einer Tabelle, zweispaltig nebeneinader liegen, mit einer schönen border um den Eltern-div. In einer einfachen PHP- oder HTML-Datei wird es auch wie gewünscht angezeigt. Im Template/content-Bereich leider nicht. Ich vermute eine Kollision mit anderen styles die den content-Bereich auszeichnen? Oder sind div's keine gute Idee? Besser Tabellen nehmen?

[NaN]

Ich vermute eine Kollision mit anderen styles die den content-Bereich auszeichnen?

Könnte sein.
Aber da niemand Deine Styles kennt, kann Dir da auch leider niemand helfen.

Wie wärs, wenn Du dem zweiten Div einfach mal eine Breite gibst.
Denn ohne diese Angabe, bekommt er die gesamte zur Verfügung stehende Breite (in dem Falle 600px).

     

Du gibst dem Div hier eine Breite von 180px.
Und einen Innenabstand von jeweils 10px.
Und einen rechten Rahmen von 1px.
Jetzt zähl das mal zu sammen. *
Das Div hat eine tatsächliche Breite von 180 + 10 (padding links) + 10 (padding rechts) + 1 (border rechts) = 201px.
Somit bleibt für die Breite des zweiten Divs nur noch 600 ("Eltern-Div") - 201 - 16 (padding links zweites Div) = 383px.

Und noch was, bei float-Eigenschaften muss ein Div auch eine konkrete Höhe haben, sonst kollabiert es.
Das kannst Du in Deinem Falle nicht machen, da Du nie weißt wie hoch der Inhalt sein wird.
Somit kann sich das "Eltern-Div" in der Höhe nicht dem Inhalt anpassen und fällt zu einer einzigen Linie zusammen.
Dafür gibt es einen Trick.
Man setzt unter die Elemente mit den float-Eigenschaften ein leeres Div mit clear:both.
Es rutscht dann sozusagen immer unter die anderen beiden Divs und zwingt das "Eltern-Div" auf die komplette Höhe des Inhalts.
Schau dazu mal in die mitgelieferten Templates und Stylesheets. Da gibt es eine CSS Klasse namens "clearb", die genau das machen soll.

Versuch mal folgendes:

Code: Select all

<div style="width: 600px; line-height: 1.4em; border: #7B888E 1px solid; background-color: #d8dde4;">
<div style="float: left; width: 180px; font-weight: bold; padding: 10px; background-color: #fff; border-right: #B4B4B4 1px solid;"><img src="uploads/images/image.jpg" alt="" width="180" height="250" /></div>
<div style="float:left;padding:0px 0px 0px 16px;width:383px"><strong>Lorem Ipsum</strong><br />Entwurf und Planung einer Publikation werden meist schon erstellt, bevor ...</div>
<div style="clear:both"></div>
</div>

* man bachte hierbei allerdings den box-modell Fehler des IE.
Hier gibts noch mehr nützliche Links zum Thema CSS:

http://forum.cmsmadesimple.org/index.ph ... #msg105764

[dylan]

Wie wärs, wenn Du dem zweiten Div einfach mal eine Breite gibst.
Denn ohne diese Angabe, bekommt er die gesamte zur Verfügung stehende Breite (in dem Falle 600px).

Meine Grundversion sah für Mozilla u. Co. so aus:

Code: Select all

<div style="width:600px; line-height:1.4em; border:#7B888E 1px solid; background-color:#D8DDE4;">
<div style="width:180px; font-weight:bold; padding:10px; background-color:#FFF; border-right:#B4B4B4 1px solid; float:left;">
<img src="uploads/images/image.jpg" alt="" width="180" height="250" />
</div>
<div style="width:383px; padding:10px 0px 10px 16px; float:left;">
Entwurf und Planung einer Publikation werden meist schon erstellt, bevor ...
</div>
<div style="clear:both;"></div>
</div>

Der Unterschied Mozilla und IE sieht so aus, das Mozilla die Paddings plus border hinzuaddiert, aus 200 + 10px padding wird 220px. IE hingegen addiert die Paddings nicht hinzu, ich kann bei IE die Weitenangabe somit um 10px reduzieren. Ich lege für IE deshalb immer einen zweiten css-Eintrag an. Der äußere Rahmen des Eltern-div stört hier nicht, er wird einfach hinzuaddiert, 602px - aber das ist bei der Berechnung der zwei Spalten erst einmal uninteressant.

Man setzt unter die Elemente mit den float-Eigenschaften ein leeres Div mit clear:both.

Wie in meiner Grundversion zu sehen ist hatte ich das clear:both; eingebaut.
Teste es bitte selbst einmal. Öffne eine beliebige Seite Inhalte » Seiten » Seite bearbeiten: Test und füge meinen obigen, oder deinen eigenen, Code hinzu.
Bei mir passiert nach dem Aktualisieren folgendes, die werden nicht mit übernommen, sie werden einfach gelöscht.
Ich habe für mich das Problem mit einem einfachen am Ende behoben. Dagegen wehrt sich der Editor nicht. Vielleicht ein Fehler im Editor? Mein Quelltext ist jedenfalls valide, außer ein paar unbedeutenden Dingen wie das auf jeder Seite angemeckerte "&" in den Meta-Tags.

Ich werde es diesmal mit Tabellen lösen, ungern, aber by the way, wenns nicht anders geht ;)
Die neue Liebe zu divs sollte sich meiner Meinung nach nicht in allzu große Antipathie gegen Tabellen richten.
Interessante Lektüre zum Thema: yatil.de, Der Div-Wahnsinn http://yatil.de/Artikel/der-div-wahnsinn

[NaN]

...
Inhalte » Seiten » Seite bearbeiten: Test
...
Dagegen wehrt sich der Editor nicht. Vielleicht ein Fehler im Editor?
...

Ähm... Moment!
Inhalte? Seiten? Editor? HTML? 
Ich glaube da habe ich etwas falsch verstanden.
Ich dachte wir reden hier vom Template.
Hatte das ganze mal in einer einfachen statischen HTML-Seite getestet.

Scheint so als würde der WYSIWYG-Editor leere Divs beim nächsten Bearbeiten der Inhalte generell entfernen.
Wahrscheinlich um den Validierung-Fehler "trimming empty" zu umgehen.

-Tags sind generell inhaltsleer, daher stört das den Tiny nicht.
Es gibt eine Option beim Tiny mit der man die "Bereinigung des Quellcodes" evtl. deaktivieren kann.

Wenn es um die Aufteilung von Inhalten geht, finde ich Tabellen voll ok.
Nur zur Layoutgestaltung sollten sie nicht verwendet werden.
So wie in Deinem Beispiel mit Text-Bild im Inhalt habe ich bisher bei CMSms auch immer mit Tabellen gearbeitet, weil ich von den Leuten, die die Inhalte verwalten sollen nicht verlangen konnte, dass sie das ganze HTML Zeugs selber "per Hand" schreiben.
Das sind meist "Büromenschen" mit einer nicht unerheblichen Affinität zu MS Office und Co.
Da bietet sich das Tabellen-Werkzeug im Tiny ganz gut an.
(vorher in den Einstellungen des Tiny die Option "Tabellen-Operationen erlauben" aktivieren)

IE hingegen addiert die Paddings nicht hinzu

Ja, genau das meinte ich mit Box-Modell-Fehler

PS: zum Thema DIV-Wahnsinn...
Ich hab da auch schon die ein oder andere Seite verbrochen.
Der DIV-Wahnsinn ist meiner Meinung nach nicht nur Resultat mangelnder Kenntnisse im Bereich Webdesign.
Aufwendige Layouts oder ganze Userinterfaces ähnlich einer komplexen Software-Anwendung lassen sich meist nicht anders realisieren.
Gut, nun kann man darüber streiten inwiefern letzteres überhaupt in den Bereich HTML gehört, aber einfach nur schwarzer Text auf weißem Hintergrund und evtl. ein semantisch korrekt platziertes Bild werden den heutigen Ansprüchen einfach nicht mehr gerecht.
Aber dennoch ein guter Artikel mit interessanten Links.