Problem mit dem Layout nach Update

[Zwergenmeister]

Hallo Community,

habe 1 Tag investiert für das C3 Update und vorher mal an einer zweiten Seite getestet.
Muss dazu auch sagen bin kein Profi der täglich mit Contao umgeht sondern nutze es um einfach eine Website zu Hosten, habe nur 2 Contao Systeme.

Folgende Probleme die beim Updaten aufgetaucht sind die ich lösen konnte, vielleicht als Hilfe für weitere:

Habe versucht alle Reste von Typolight in Contao zu wandeln.

--- php 5.2 -> 5.4 geändert
1.Verzeichnis von Typolight in Contao umbenannt Domain Routing geändert
LiveUpdate
2. Update von 2.11.4 auf 2.11.7 ohne Probleme
3. Update von 2.11.7 auf 3.0.1
3.1 Erweiterung Backup DB gelöscht -> neue RC 3.0.1 aufgespielt läuft
3.2 HeaderCode -> Autoload.php läuft
4. moo_analytics gelöscht neues template erstellt läuft / alle Seitenlayouts editiert
5. Task Module gelöscht Fehler Meldung im Backend
6. Bild Meta Dateien überarbeitet Fehler beim Import mit Umlauten !!
ist jetzt alles in der Dateiverwaltung geändert / läuft meta Datein gelöscht
7. Verzeichnis tl_files in files umbenannt script ausgeführt alles ok
8. Contao Check alle O.k.

Soweit so gut dann habe ich angefangen die Seite mit verschiedenen Browsern zu prüfen.

Und einige Fehler gefunden die ich mir noch nicht auf die schnelle erklären konnte.

Was mit 2.11.7 noch alles prima aussah ist jetzt an einigen Stellen zusammen gebrochen, bitte da um ein bisschen Hilfe.

Habe auch schon im Forum gesucht und das mit dem Layout Builder verstanden, werde aber den Holy Grail ausschalten bin da der Meinung das ist jedem selbst überlassen sein soll und die Seite mit 2.11.7 wie sie auch jetzt noch online ist viel besser auf dem Iphone oder Ipad zu bedienen ist als alles untereinander zu packen, das hätte man doch zu wap Zeiten gebraucht die Auflösung von Handy werden doch immer größer wozu dann bitte jetzt diese Geschichte ??
Dann kann man auch gleich eine extra Mobile Seite einführen wenn eh viele Anpassungen fürs Menü etc gemacht werden müssen. Vielleicht ist aber auch keine Mobile Ausrichtung gewünscht.

Bin kein CSS Profi, an manchen Stellen suche ich jetzt die Fehler.

Nach 3.0

Chrome:
1.Macht auf der Seite Produkt, die Bilder klein
2.Ab und an springt das Archive Menü in News nach unten

IE9:
Auf der Startseite werden die Teaser Bilder nicht verkleinert

Firefox:
bis jetzt ohne Probleme

Mobile:
Holy Grail Abschaltung hier im Forum gefunden zwar Hardcoded aber mir erstmal egal und hoffe da gibt es mal ein Umdenken und ein Option zum an und ausschalten.


Bitte um ein bisschen css Hilfe verstehe nicht warum das jetzt an einigen Ecken sich in den Browsern anders verhält, was vorher lief.

Link zur 3.0

c3.sportlane.de

USER/PW: contao3


2.11.7 zu sehen ohne Subdomain

Vielen Dank

[pmmueller]

> Chrome:
> 1.Macht auf der Seite Produkt, die Bilder klein

Da spielt dir die Anweisung img { max-width: 100%; } aus der layout.css (aka "Layout-Builder") einen Streich.

Aber was ich auf deiner (gut aussehenden) Site im Quelltext überhaupt nicht verstehe sind die ganzen Tabellen in den Inhaltselementen. Wenn ich das auf Anhieb richtig interpretiere, dann benutzt du im Inhaltselement Text eine Tabelle, um ein Foto neben den Text zu stellen. Falls dem so ist, dann ist das, äh, sagen wir mal, unüblich. Das hast du nicht aus meinem Buch

Normalerweise schreibst du den Text in den TinyMCE-Editor und wählst darunter das Bild aus, dass dann entsprechend der angeklickten Ausrichtung gefloatet. Ohne deine Site im Detail genau zu kennen (und dazu fehlt mir auch die Zeit...) würde ich dir empfehlen, diese Tabellen rauszuschmeißen. Die werden dir nur Ärger machen.

Nachtrag
Ich vermute mal, dass bei dir folgendes passiert: Tabellenzellen werden immer nur so groß wie ihr Inhalt, sofern nichts anderes definiert wurde. Früher hatte ein Bild im HTML beim img-Element eine feste Größe und hat damit die Größe der Zelle vorgegeben.

In modernen Webdesigns ist die Anweisung img { max-width:100%; } im CSS die Methode der Wahl, um die Bildgröße flexibel zu machen. Wenn diese max-width-Bilder aber jetzt in einer Tabellenzelle ohne Größenangabe sitzen, dann ist das ein Aufeinandertreffen ungünstiger Umstände und sie schrumpfen. Chrome macht das völlig richtig.

Aber der eigentliche Fehler sind die Tabellen und nicht das max-width

[Zwergenmeister]

Hallo Herr Müller,

ich blicke da noch nicht ganz hinter benötige vielleicht noch einen Tipp, habe die Tabellen entfernt durch divs ersetzt.
Naja die Tabellen waren einfacher :-) Die Darstellung passt noch nicht, die Bilder sind jetzt zwar groß aber der Textfluss und die Zentrierung passen noch nicht.
Möchte nicht mehr als zwei Spalten mit mittiger vertikaler Zentrierung.

http://www.drweb.de/magazin/vertical-align-css/

sieht jetzt so aus

<div class="ce_text g8 block">
<div class="protextlinks">Text soll mittig</div>
<div class="imgmitterechts"> (Bild mit größe über Tiny hinzugefügt)</div>
</div>
<div class="ce_text g8 block">
<div class="imgmittelinks"> (Bild mit größe über Tiny hinzugefügt)</div>
<div class="protextrechts">Text soll mittig sein</div>
</div>

#productpic {
    display: table;
}
.protextlinks {
    display: table-cell;
    vertical-align: middle;

.imgmitterechts {
    clear: both;
    display: table-cell;
    float: right;
    padding-left: 10px;
    vertical-align: middle;
}
.imgmittelinks {
    display: table-cell;
    float: left;
    padding-right: 10px;
    vertical-align: middle;
}
.protextrechts {
    clear: both;
    display: table-cell;
    vertical-align: middle;
}

Link gelöscht



Vorab schon mal Danke

[pmmueller]

Du musst nichts durch nichts ersetzen, sondern einfach nur die Tabellen rausschmeißen. Vorausgesetzt, ich hatte Recht mit meiner Annahme weiter oben, dass diese Tabellen im TinyMCE-Editor eingefügt wurden, um ein Bild neben Text zu stellen.

Du möchtest doch schlicht und einfach ein Bild neben Text stellen. Das steht in meinem Buch in Kapitel 9 oder 10 (je nach Auflage) unter der Überschrift "Das Inhaltselement Text mit einem Bild erweitern". Hier die Kurzform:

• Inhaltselement "Text" erstellen
• Text in das Editorfenster schreiben
• Darunter die Option "ein Bild hinzufügen" aktivieren (NICHT über den Tiny hinzufügen)
• Das gewünschte Bild aus der Dateiverwaltung auswählen
• Option ausfüllen, sofern gewünscht (Abstand zum Text, Ausrichtung des Bildes etc.)

It's dead easy. Ob das Bild links oder rechts vom Text gefloatet werden soll, regelst du mit einem Klick ganz rechts unten.

[Zwergenmeister]

Normal ein Bild einfügen ist mir klar nur an der Stelle möchte ich:

2 Spalten (weil ohne umfließenden Text), 1 Spalte Bild / 2 Spalte Text , beides vertikal mittig

Wie früher zwei td vertikal mittig, die Spalte mit dem meisten Text hat die Gesamte Höhe vorgegeben und die andere Spalte war mit dem Text dann vertikal mittig.

[pmmueller]

Ich verstehe das glaube ich nicht wirklich, was du genau möchtest.

> Vertikal mittig
Sieht doch in fast allen Fällen eher nicht so schön aus. Bei mir steht td { vertical-align:top;} in jedem Stylesheet

> 2 Spalten (weil ohne umfließenden Text)
Verstehe ich nicht.

> 1Bild/2-spaltiger Text.
War das auf der Produktseite vorher so? Ist mir nicht aufgefallen. Da gäbe es mehrere Möglichkeiten.

• Wenn es zwei getrennte Texte sitzt, einfach zwei Spalten per Grid bauen.
• Wenn der Text zusammengehört, also nur zweispaltig gesetzt sein soll, wird es schwieriger. Aber man könnte das CSS3-Columns-Modul benutzen. Nur müsste man dann im IE bis V9 per JS nachhelfen.
• Den Wunsch noch mal überdenken, ob das wirklich so wichtig ist

Es lag nicht in meiner Absicht, dir zusätzliche Arbeit zu machen. Wenn dir das mit dem vertikal mittig und 1Bild/Text-2spaltig wahnsinnig wichtig ist, wäre es für dich einfacher, das "max-width:100%" zu de-aktivieren, auch wenn es nicht wirklich "Best Practice" ist.

[Zwergenmeister]

das ist ja doch nicht so einfach Mochte das auch ohne alte HTML Tabellen schaffen.

> 2 Spalten (weil ohne umfließenden Text)
Verstehe ich nicht.

so wie auf dem Beispiel Bild 2 Spalten, wenn ich das Bild floate umfließt ja der Text je nachdem wie viel Text ich habe.
Um das Umfließen zu verhindern hatte ich eine Tabelle gebaut um Text und Bild zu trennen, da die Bilder eine gewisse Größe haben müssen um gut sichtbar zu sein und nicht immer genug Text da ist hatte ich den Text mittig zentriert in der zweiten Zelle.

So sieht es noch mit 2.11 aus

Link gelöscht


Spalte 1 / Spalte2
Bild Text / beides vertikal mittig

[pmmueller]

> 2 Spalten (weil ohne umfließenden Text)
Verstehe ich nicht. So wie auf dem Beispiel Bild 2 Spalten, wenn ich das Bild floate umfließt ja der Text je nachdem wie viel Text ich habe. Um das Umfließen zu verhindern hatte ich eine Tabelle gebaut um Text und Bild zu trennen, da die Bilder eine gewisse Größe haben müssen um gut sichtbar zu sein und nicht immer genug Text da ist hatte ich den Text mittig zentriert in der zweiten Zelle.

Äh, du möchtest also nur erreichen, dass der Text, falls er mal länger sein sollte als das Bild, nicht unterhalb des Bildes weiterfließt?

Das wäre ganz einfach: Gib dem Bild in den Bildoptionen ("Bildabstand", beim Einfügen des Bildes im Textelement) einen ausreichenden "Abstand nach unten" (in px, ist dann "margin-bottom"). Der reserviert den Platz unterhalb des Bildes und sorgt dafür, dass der Text daneben bleibt.

[Zwergenmeister]

Ganz so einfach ist das leider nicht, das geht nur wenn der Text länger als das Bild ist und ich dem Bild, margin top, Bottom berechne. (Für ein Teil OK, bleibt aber mit einem kleinen Problem nicht jeder Browser zeigt die Schrift gleich an was oft zu einer Zeile mehr oder weniger an Text führt.)

Aber was mache ich wenn der Text viel weniger ist und somit kleiner als das Bild da neben. Müsste dann im CSS für jeden Absatz das extra bestimmen. (unpraktisch)

----------------
Lösungsansatz bis jetzt
Habe jetzt erstmal dem ganzen Artikel eine ID gegeben und display:table

Dem p und .image_container ein display:table-cell und vertical-align:middle

Mit dem Effekt das Text und Bild schon mal nicht mehr umfließen, aber bekomme das nicht vertical zentriert ??

Hatte auch schon versucht dem .ce_text ein table-row zu geben mit ganz komischen Effekten die ich nicht verstanden habe.

Gibts in Litteboxes das erklärt wie man mit CSS tables und vertical-align umgeht?

[pmmueller]

Ganz so einfach ist das leider nicht, das geht nur wenn der Text länger als das Bild ist und ich dem Bild, margin top, Bottom berechne. (Für ein Teil OK, bleibt aber mit einem kleinen Problem nicht jeder Browser zeigt die Schrift gleich an was oft zu einer Zeile mehr oder weniger an Text führt.)

Aber was mache ich wenn der Text viel weniger ist und somit kleiner als das Bild da neben. Müsste dann im CSS für jeden Absatz das extra bestimmen. (unpraktisch)

Wieso im CSS? Ich glaube, wir reden etwas aneinander vorbei.

Ich meine, dass du direkt im Inhaltselement Text unterhalb des Editors "Ein Bild anzeigen" anklickst. Dort kannst du direkt an Ort und Stelle alles einstellen. Contao erzeugt daraus automatisch Inline-Styles. Wenn du dort im Inhaltselement bist, dann weißt du doch, wie lang der Text ist? Er steht ja direkt darüber im Editor...

[Zwergenmeister]

Mache ich jetzt auch so habe im Tiny nur noch ein p mit Text / Das Blid über Contao direkt darunter hinzugefügt.
Wie gesagt bei viel Text ist mir das auch klar nur was mache ich z.b. siehe Scrennshot mit wenig Text ? kann dem Bild kein -Minus Margin geben ?

[pmmueller]

Wo ist das Problem? Ist das Bild halt länger als der Text. Wenn das stört: Vielleicht das Bild kleiner machen?

Das ist doch eher ein redaktionelles als ein CMS-Problem. Wie verteile ich Bild und Text auf der Seite, sodass es passt? Man könnte auch schlicht und einfach eine Bildergalerie machen. Oder einen Slider mit Bild und Text daneben.

[ATLAS]

Er möchte seinen Text vertikal mittig zum Bild ausgerichtet haben. Egal, wie lang der Text ist, links, oder rechts. Ein berechtigtes Anliegen. Offenbar hat er durch seine vorherige Formatierung den Text automatisch mittig bekommen, ohne weitere Einstellungen. Das möchte er nun wieder so haben. So verstehe ich es.

[pmmueller]

Er möchte seinen Text vertikal mittig zum Bild ausgerichtet haben.

Tja, wenn der Schwerpunkt auf "vertikal mittig" liegt, dann kann ich da auf Anhieb auch nicht weiterhelfen.

[Zwergenmeister]

Hallo Atlas,

genau so ist es, hatte das vorher über alte html Tabellen geregelt das hat auch prima funktioniert bis zum 3.0 Update :-)
Wie Herr Müller schon sagte hat sich was mit der max-width 100% geändert was im Chrome eine falsche Darstellung zur Folge hatte. Versuche das jetzt vergeblich mit css so hinzubekommen wie mit tr/td vorher.
V-Mittig unabhängig von Text und Bildgröße.

Hast du eine Idee dazu ?

VG
Zwergenmeister

[ATLAS]

Leider nein. Bisher konnte ich mich an diesem Problem vorbeimogeln, auch wenn ich schon so manches Mal den Wunsch danach hatte. Ohne einen Eingriff zu jedem Text neben dem Bild wird es wohl nicht gehen. Vor allem dann, wenn der Text kürzer ist.

[Zwergenmeister]

Das Problem ist jetzt erstmal bis Januar auf Eis gelegt, Urlaub :-)

Noch mal Vielen Dank für die Hilfe, wünsch euch ein frohes Fest und einen guten Rutsch, die Welt wird schon nicht untergehen.

Herr Müller, vielleicht wird das Thema ja mal in einem nächsten Little Boxes oder Contao Buch aufgegriffen da muss es doch eine Lösung geben.


VG
Zwergenmeister

[pmmueller]

Dir auch ein paar ruhige Feiertage und einen guten Rutsch.

Herr Müller, vielleicht wird das Thema ja mal in einem nächsten Little Boxes oder Contao Buch aufgegriffen da muss es doch eine Lösung geben.

Ist gespeichert. Aber vertikale Zentrierung ist nicht einfach und geht nicht immer.

[Zwergenmeister]

Hi,
der Urlaub ist um erst mal frohes neues, habe es jetzt geschafft mal kurz beschrieben was ich ändern musste und welche Problem ich noch gefunden habe.

1.)Table Cell vertikal middel, funktioniert nur wenn ein IMG nicht gefloatet ist :-)

1.1) erste Idee da Standardmäßig die Bilder in Contao gefloted werden, dachte ich ich nehme den TinyMCE und füge da die Bilder ein hat auch für FF und Chrome funktioniert nur für IE9 nicht.
-Wenn ich das normal einfüge mit fester Große wurde dieses im IE9 ignoriert und auf voll Größe angezeigt statt proportional.
-Wenn ich das als Vorschaubild im Tiny eingefügt habe läuft es wie gewollt.

Hab dann zu dem Problem ein Github Ticket eröffnet, leider closed, naja mir kam aber die Idee dabei das IMG Tag mit float:none zu über schreiben

1.2) Also Idee umgesetzt Bild aus Tiny entfernt normal über Contao hinzugefügt nach unten oder oben ausgerichtet und dann mit float:none überschrieben. läuft erstmal dachte ich alles zentriert schön doch Chrome machte mit ein Strich durch die Rechnung.

1.3) Chrome hat da einen Bug und verkleinert Bilder in table-cells die keine feste Größe habe, keine Lösung für gefunden außer feste Größen die ich nicht möchte also musste doch das tolle Contao 3 responsive image max-width:100% dran glauben / hab es mit none überschrieben und es läuft.

1.4) Zu guter letzt hatte ich noch ein bisschen Meinungsverschiedenheiten mit dem TinyMCE der mir immer wieder 2 Absäte in einem Text gemacht hat und ich diese einfach nicht in der HTML Ansicht überschrieben konnte. Damit Bild und Text neben einander bleiben.

Hab dafür die Tiny Einstellungen geändert mit:

verify_html : false,
forced_root_block:false,


-----------------------------------------


Vertikal zentrieren

1) Hab der Artikel ein Display table gegeben.
2) .ce_text ein table-row
3) .image_container, p ein table-cell, float:none, vertikal-align:middle


Vielen Dank noch mal allen für die Hilfe, nächster Schritt responsive Layout abschalten für mobile Geräte.

[pmmueller]

Vertikal zentrieren
1) Hab dem Artikel ein Display table gegeben.
2) .ce_text ein table-row
3) .image_container, p ein table-cell, float:none, vertikal-align:middle
Vielen Dank noch mal allen für die Hilfe, nächster Schritt responsive Layout abschalten für mobile Geräte.

Und dir vielen Dank für die das Posten der Lösung. Dass das was mit dem Floaten der Bilder zu tun hat, da muss man auch erstmal drauf kommen