Page 1 of 1
CP Text mit Bild: Div oder Table?
Posted: Sun 24. Mar 2013, 08:56
by 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?
Re: CP Text mit Bild: Div oder Table?
Posted: Sun 24. Mar 2013, 10:05
by update
Wieso jetzt wieder Tabelle? ich dachte, die wäre nur für tabellarische Daten?
santscho wrote: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?
Re: CP Text mit Bild: Div oder Table?
Posted: Sun 24. Mar 2013, 11:48
by Oliver Georgi
Du kannst das Verhalten leicht simulieren. Spiele mal mit den CSS Attributen: display: table | table-row | table-cell. Selbsterklärend, oder?
Re: CP Text mit Bild: Div oder Table?
Posted: Sun 24. Mar 2013, 12:01
by 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.
Re: CP Text mit Bild: Div oder Table?
Posted: Sun 24. Mar 2013, 12:27
by santscho
Mit den Table-CSS-Einstellung wurde es funktionieren (soeben getestet) wenn die DIV-Reihenfolge korrekt waere.
Re: CP Text mit Bild: Div oder Table?
Posted: Sun 24. Mar 2013, 12:45
by 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
Re: CP Text mit Bild: Div oder Table?
Posted: Sun 24. Mar 2013, 14:03
by 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?
Re: CP Text mit Bild: Div oder Table?
Posted: Sun 24. Mar 2013, 15:50
by 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.
Re: CP Text mit Bild: Div oder Table?
Posted: Sun 24. Mar 2013, 22:05
by 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
Re: CP Text mit Bild: Div oder Table?
Posted: Sun 24. Mar 2013, 22:55
by 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?
Re: CP Text mit Bild: Div oder Table?
Posted: Mon 25. Mar 2013, 02:22
by 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.
Re: CP Text mit Bild: Div oder Table?
Posted: Mon 25. Mar 2013, 03:53
by 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
Re: CP Text mit Bild: Div oder Table?
Posted: Mon 25. Mar 2013, 04:45
by 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%;
}
-->