CP Text mit Bild: Div oder Table?

[santscho]

Im neusten Release phpwcms ist der CP Text mit Bild nicht mehr tabellenbasiert sondern mittels DIV's aufgebaut. Meiner Ansicht nach geht dies auf Kosten der Flexibilitaet. Zuvor hast sich im tabellenbasierten CP die linke Bild-Spalte automatisch der Bildgroesse angepasst.

Neu ist es so, dass bei einer Contentbreite von 800px und bei einer Bildweite von 90px eine Abstand von ueber 160px zwischen Bild und Text generiert wird. Dies, weil der DIV fuer die Bildspalte auf 35% gesetzt ist.

Als Tabelle, die Tabellenzelle des Bildes passt sich automatisch der Bildbreite an, kann somit fuer alle Bildweiten verwendet werden.

Wie denkt ihr darueber?

[update]

Wieso jetzt wieder Tabelle? ich dachte, die wäre nur für tabellarische Daten?

weil der DIV fuer die Bildspalte auf 35% gesetzt ist

Hab's noch nicht nachgesehen - steht das so im Core und lässt sich nicht übersteuern?

[Oliver Georgi]

Du kannst das Verhalten leicht simulieren. Spiele mal mit den CSS Attributen: display: table | table-row | table-cell. Selbsterklärend, oder?

[santscho]

Koennte man schon so machen, denke ich. Aber die Reihenfolge der "Zellen" spielt ja da auch eine kleine Rolle. Beispiel "table,left"-Einstellung im CP: Der erste Div waere die erste Zelle. Der zweite Div die zweite Zelle.

Ausgabe:

Code: Select all

<div class="image-with-text" id="imgtext-id-21">
<div class="imgtxt-column-right">
	<div class="imgtxt-column-right-text"><h5>Here text part</h5>
</div>
<div class="imgtxt-column-right-image"><div class="image_td"><img src="../content/images/7991ac5eb63f34990b0ca95e9ab25d76.jpg" width="75" height="75" border="0" class="image_img" alt="Ralph.jpg" /></div></div>
</div>
</div>

Wuerde man dies in eine Tabelle umwandeln, haetten wir links den Text und rechts das Bild. Falsche Reihenfolge, nicht?

[EDIT] Bei der Einstellung "table, right" waere das so okay.

[santscho]

Mit den Table-CSS-Einstellung wurde es funktionieren (soeben getestet) wenn die DIV-Reihenfolge korrekt waere.

[santscho]

Man koennte natuerlich auch bisschen mogeln und im CP "above, left" selektieren und die Positionen mittels Template steueren.

Aber ideal/richtig waere, wenn der CP folgende DIV-Reihenfolgen generieren wuerde:

above,left | above, center | above, right
Div Bild - Div Text

bottom,left | bottom, center | bottom, right
Div Text - Div Bild

table,left
Div Bild - Div Text

table,right
Div Text - Div Bild

[Old Boy]

Was passiert denn, wenn man die Vorgabe von 35% auf 0.1% ändert, dann müsste doch das Bild sich den erforderlichen Platz selber schaffen?
Oder steht dem die "Reihenfolge" wieder im Weg?

[santscho]

Keine Ahnung, Old Boy. Ich denke, fuer ein sauberes Floating sollte die Div-Reihenfolge beachtet werden. Dann koennen die divs problemlos als Tabellen-Elemente definiert werden. die Bild-Zelle auf 1% Breite setzten und die Text-Zelle auf auto. Das waere schon richtig.

[santscho]

Habe mir mal die cnt1.article.inc.php angeschaut und festgestellt, dass "case 8" und "case 9" vertauscht sind und dass "case 8" die div container in der selben Reihenfolge wie "case 9" rendert.

Bug in: include/inc_front/content/cnt1.article.inc.php
https://github.com/slackero/phpwcms/issues/24

[Old Boy]

Einen Hinweis darauf an anderer Stelle hatte Oliver ja schon einmal sinngemäss "beantwortet":
Man müsse das mit CSS-Mitteln hin bekommen!

Bis auf eine Variante hab ich's dann auch erreicht... die übriggeblieben benutze ich eben nicht

Ich bin allerdings deiner Meinung, das muss an der Reihenfolge der gerenderten Elemente liegen.

Problem ist aber, man weiss nicht was OG vor hat, bzw. an was er arbeitet.
Vielleicht kommt ja die Lösung auf anderem Weg?

[santscho]

Ja, geht schon. Du kannst den rechten div nach links floaten und den linken div nach rechts. Was geschieht mit dem Raum zwischen div1 und div2?
Was wir erreichen wollen und was richtig ist: div 1 links, div 2 position rechts von div 1. Nur so ist es sauber geloest.

Ich koennte einfach cnt1.article.inc.php abaendern. moechte nicht unnoetig im core rumhacken.

[santscho]

In der vorgegebenen CSS sieht es so aus:

Div 1 (Text) mit Breite 60% nach rechts gefloated.
Div 2 (Bild) mit Breite 35% nach links gefloated.

Egal wie breit Div 2 ist, Div 1 wird immer mit seinen 60% Breite nach rechts gefloated. Responsives Design somit unmoeglich.

die 1em margins links/rechts somit auch ueberfluessig. Der abstand zwischen beiden Div betraegt immer 5% (100%-60%-35%).

Dies waere ein Ansatz, funktioniert aber bei mir nicht:
http://www.w3.org/TR/css3-values/#calc

[santscho]

Habe jetzt voruebergehend das template abgeaendert:

1. Alles mit einer Tabellen-Reihe umschlossen
2. Linker und rechter Div als Zelle definiert
3. Das Bild (img) bekommt max-width 100% um ein Ineinanderlaufen von Text und Bild zu verhindern (responsives Bild). Auch ein 1000px Bild wuerde in den 35% breiten Container passen.
4. Unnoetige Margins entfernt.

35% zu 60% ist zwar okay fuer normale Bilder. Bei kleinen jedoch (zB. 70px Logos) sieht es nicht besonders nett aus. Aber als Notloesung okay.

Code: Select all

<!--IMAGETEXT_SETTINGS_START//-->
; this is formatted like WIN.INI
; please: do not use comments for value lines
class_top_left		= imgtxt-top-left
class_top_center	= imgtxt-top-center
class_top_right		= imgtxt-top-right
class_bottom_left	= imgtxt-bottom-left
class_bottom_center	= imgtxt-bottom-center
class_bottom_right	= imgtxt-bottom-right
class_float_left	= imgtxt-left
class_float_right	= imgtxt-right
class_column_left	= imgtxt-column-left
class_column_right	= imgtxt-column-right
; width				= 300
; height			= 200
; zoom				= 1
; crop				= 1
; lightbox			= 1
; nocaption			= 0
<!--IMAGETEXT_SETTINGS_END//-->
[TITLE]<h3>{TITLE}</h3>[/TITLE]
[SUBTITLE]<h4>{SUBTITLE}</h4>[/SUBTITLE]
[IMAGETEXT]<div class="imgtxt">{IMAGETEXT}</div>[/IMAGETEXT]
<!-- Sample CSS -->
<!-- CSS:


.imgtxt {
	display: table-row;
	width: 100%;
	height: auto;
	clear: left;
}

.imgtxt img {
	max-width: 100%;
	height: auto;
}

.imgtxt-top-left,
.imgtxt-bottom-left {
    position: relative;
    margin: 1em 0;
    clear: both;
}
.imgtxt-top-right,
.imgtxt-bottom-right {
    position: relative;
    float: right;
    margin: 1em 0;
    clear: both;
}
.imgtxt-top-center,
.imgtxt-bottom-center {
    position: relative;
    margin: 1em auto;
    clear: both;
}
.imgtxt-left {
    position: relative;
    float: left;
    margin: 0 1em 1em 0;
	display: table-cell;
}
.imgtxt-right {
    position: relative;
    float: right;
    margin: 0 0 1em 1em;
	display: table-cell;
}
.imgtxt-column-left {
    position: relative;
    clear: both;
    width: 100%;
}
.imgtxt-column-left .imgtxt-column-left-text {
    position: relative;
    float: left;
    margin: 0;
    width: 60%;
}
.imgtxt-column-left .imgtxt-column-left-image {
    position: relative;
    float: left;
    margin: 0;
    width: 35%;
}
.imgtxt-column-right {
    position: relative;
    clear: both;
    width: 100%;
}
.imgtxt-column-right .imgtxt-column-right-text {
    position: relative;
    float: right;
    margin: 0;
   width: 60%;
}

.imgtxt-column-right .imgtxt-column-right-image {
    position: relative;
    float: left;
    margin: 0;
    width: 35%;
}
-->