Contao Konferenz 2019 in Duisburg - Call for Papers
Ergebnis 1 bis 18 von 18

Thema: "Abstand" wegoptimiert?

  1. #1
    Contao-Nutzer
    Registriert seit
    26.03.2010.
    Beiträge
    226

    Gesicht zeigt die Zunge "Abstand" wegoptimiert?

    Tagchen,
    ich schrieb ja schon irgendwo: ich habe etliche Probleme mit der 4.4 - weil sooo vieles anders ist als in 3.5

    Jetzt ärgerte ich mich gerade über das Verschwinden der Abstand-Einstellung je Inhaltselement (siehe Anhang). Ich habe das in früher mittelmäßig oft benutzt, nicht überall und schon gar nicht überall gleich - also mal 10px davor, mal 20px danach, mal 10px davor UND 42px danach usw. um Abstände eben flexibler gestalten zu können. (Warum) ist das jetzt "out"?
    Die Felder gibt es offenbar nicht mehr. Muss ich etwa ALLE Seiten durchgehen und für/in alle betroffenen Inhaltselemente irgendwas rein "schummeln"? Zum Beispiel ein
    Code:
    <p style="margin-...:42px">&nbsp;</p>
    in jedes betroffene Inhaltselement? Das wäre verdammt mühselig und klappt wohl nur bei ce_text und bei allen anderen guck ich in die Röhre :-(
    Selbst einen eigenen CSS-Eintrag je Inhaltselement geht ja nicht (wäre auch extrem mühselig), weil die DIVs keine ID bekommen sondern nur eine CLASS
    Gibt's Alternativen, Würgarounds, whatever?
    Angehängte Grafiken Angehängte Grafiken

  2. #2
    Contao-Urgestein Avatar von Kahmoon
    Registriert seit
    22.06.2009.
    Ort
    München
    Beiträge
    4.098

    Standard

    Weil man es besser über CSS löst statt inline Styles (die bis dato erzeugt wurden). Das ist einfach nicht mehr zeitgemäß....

    Leg dir im CSS doch einfach Helferklassen an. z.B.

    Code:
    .m1 {
      margin-bottom: 80px;
      margin-top: 80px;
    }
    .m2 {
      margin-bottom: 40px;
      margin-top: 40px;
    }
    .m3 {
      margin-bottom: 40px;
      margin-top: 85px;
    }
    .m4 {
      margin-bottom: 85px;
      margin-top: 40px;
    }
    .mt1 {
      margin-top: 80px;
    }
    .mt2 {
      margin-top: 40px;
    }
    etc etc
    Die kann man dann ganz easy in jedem Element - > CSS Klasse entsprechend vergeben.
    Falls du Bootstrap verwendest, gibt es alle diese Helferklassen bereits und du musst nichts selbst anlegen. https://getbootstrap.com/docs/4.0/utilities/spacing/




    Alternativ kannst du auch einfach den jeweiligen Element per CSS Abstände definieren z.B.
    Code:
    .ce_text{margin15px 0;}
    .ce_gallery{margin15px 0;}
    
    etc etc
    Du siehst...die Möglichkeiten sind vielfältig
    Geändert von Kahmoon (28.05.2019 um 10:42 Uhr)

  3. #3
    Contao-Nutzer
    Registriert seit
    26.03.2010.
    Beiträge
    226

    Standard

    Zitat Zitat von Kahmoon Beitrag anzeigen
    Leg dir im CSS doch einfach Helferklassen an. z.B.
    ... {codesnippsel}
    Das ist zwar auch erstmal (initial) sehr aufwändig, weil ich erstens viele verschiedene habe um Abstände eben flexibler gestalten zu können und zweitens wohl (oder besser übel) tatsächlich ALLE Seiten durchgehen muss ... Aber gut, wenn es nicht mehr "altmodisch" geht...

    Zitat Zitat von Kahmoon Beitrag anzeigen
    Die kann man dann ganz easy in jedem Element - > CSS Klasse entsprechend vergeben.
    Ich sach ja: wenn es nicht mehr "altmodisch" geht...
    Ist ja auch gar nicht umständlich (sorry!), für jeden "mal eben schnell" definierten Abstand an einem Inhaltselement erst noch ein Stück CSS bauen zu müssen. Nochmal sorry.

    Zitat Zitat von Kahmoon Beitrag anzeigen
    Falls du Bootstrap verwendest, gibt es alle diese Helferklassen bereits und du musst nichts selbst anlegen. https://getbootstrap.com/docs/4.0/utilities/spacing/
    Lieber nicht, ich bin so ein "ewig (vor)gestriger"
    Das klingt ja noch umständlicher.

    Zitat Zitat von Kahmoon Beitrag anzeigen
    Alternativ kannst du auch einfach den jeweiligen Element per CSS Abstände definieren z.B.
    Code:
    .ce_text{margin15px 0;}
    .ce_gallery{margin15px 0;}
    
    etc etc
    Du siehst...die Möglichkeiten sind vielfältig
    Genau DAS kann ich nicht tun, weil
    Zitat Zitat von purzel Beitrag anzeigen
    nicht überall und schon gar nicht überall gleich - also mal 10px davor, mal 20px danach, mal 10px davor UND 42px danach usw.
    Es gibt gerade bei ce_text Elementen mehrere verschiedene.

    Aber ich habe dank und auf Basis Deines Tipps während ich hier schrieb eine für mich praktikable Lösung ersonnen. Initial aufwändig (s.o.) aber modern weil mit CSS-Klassen

  4. #4
    Contao-Urgestein Avatar von Kahmoon
    Registriert seit
    22.06.2009.
    Ort
    München
    Beiträge
    4.098

    Standard

    Ich weiß...Veränderung tut manchmal weh....aber es ist gar nicht sooo schlimm ;-).

    Einmal Helferklassen anlegen.....kann man für sämtliche Projekte immer wieder verwenden. Noch weniger Aufwand ist es Grundabstände für Elemente definieren und nur den Ausnahmen, die du ja offensichtlich hast, eine weitere CSS Klasse zuweisen. So mache ich es...
    Geändert von Kahmoon (28.05.2019 um 11:42 Uhr)

  5. #5
    AG Pressearbeit
    Community-Moderator
    Buchautor 'Contao für Webdesigner'
    Avatar von planepix
    Registriert seit
    05.06.2009.
    Ort
    Stuttgart
    Beiträge
    5.490
    Partner-ID
    107
    User beschenken
    Wunschliste

    Standard

    Das könnte man auch so „lösen” - semantisch dann halt wie vorhin schlecht:
    Eine Stylepicker Erweiterung installieren und dann x Styles definieren.

    Code:
    .bottom10 {margin-bottom:10px;}
    .bottom20 {margin-bottom:20px;}
    …
    .top10 {…)
    Dann kann man die vordefinierten Klasse einfach auswählen.
    ---------------------------------
    Beste Grüße planepix
    Contao für Webdesigner (Website), Twitter: @contaowebdesign
    weitzeldesign
    Für Contao abstimmen: https://bitnami.com/product/contao/widget
    Contao Jahrbuch: www.contao-jahrbuch.de
    Contao Agenturtag: www.contao-agenturtag.de
    Contao Stammtisch Stuttgart: www.contao-stammtisch-stuttgart.de
    Contao 4 Erfahrungen als Gitbook: https://planepix.gitbooks.io/erfahru...tao-4/content/
    Contao 4 Hoster: https://github.com/contao/contao-manager/wiki

    It's OpenSource. So invest with coding, testing and time.

  6. #6
    Contao-Nutzer
    Registriert seit
    26.03.2010.
    Beiträge
    226

    Standard

    Zitat Zitat von planepix Beitrag anzeigen
    Eine Stylepicker Erweiterung installieren und dann x Styles definieren.

    Dann kann man die vordefinierten Klasse einfach auswählen.
    Danke, die Idee finde ich ergänzend auch gut - wenn man denn erstmal weiß dass es sowas gibt. Kannst Du eine empfehlen? Der Beschreibung nach scheint "CSS Stil Wähler" von craffft genau das Richtige zu sein; die Beschreibung "christianromeni/c-customarticles" ist mit "Custom Article options for Contao Open Source CMS" ja mehr als dürftig.

    Ich habe zwar keine Ausnahmen a la "6px", "7px" usw, sondern nur durch 5 teilbare und da auch (glaub ich wenigstens) nur 5...25 px in beiden Richtungen (vor/nach). Von daher dürfte das Erstellen der Definitionen ein überschaubarer Aufwand sein. Richtig ätzend hingegen ist das Durchsuchen, wo ich das überall gemacht habe... Zumindest habe ich anscheinend ein paar "Vorlieben" gehabt, so dass möglicherweise die Anzahl noch mehr reduziert werden kann

  7. #7
    AG Pressearbeit
    Community-Moderator
    Buchautor 'Contao für Webdesigner'
    Avatar von planepix
    Registriert seit
    05.06.2009.
    Ort
    Stuttgart
    Beiträge
    5.490
    Partner-ID
    107
    User beschenken
    Wunschliste

    Standard

    Genau, mit dem habe ich das mal gebaut für einen Kunden, der das partout haben wollte…

    https://packagist.org/packages/craff...elector-bundle

    Alternative erstellst du dir nur die CSS-Regeln und nimmst kurze Klassenbezeichnungen wie t10 und b10; dann kannst du dir eine Abhängigkeit eines Bundles sparen…

    Und in deiner „alten” 3.5 Installation kannst du in Datenbank vermutlich den Stellen auf die Schliche kommen, wo das eingesetzt war.

    Code:
    tl_module DROP space
    tl_article DROP space
    tl_content DROP space
    ---------------------------------
    Beste Grüße planepix
    Contao für Webdesigner (Website), Twitter: @contaowebdesign
    weitzeldesign
    Für Contao abstimmen: https://bitnami.com/product/contao/widget
    Contao Jahrbuch: www.contao-jahrbuch.de
    Contao Agenturtag: www.contao-agenturtag.de
    Contao Stammtisch Stuttgart: www.contao-stammtisch-stuttgart.de
    Contao 4 Erfahrungen als Gitbook: https://planepix.gitbooks.io/erfahru...tao-4/content/
    Contao 4 Hoster: https://github.com/contao/contao-manager/wiki

    It's OpenSource. So invest with coding, testing and time.

  8. #8
    Contao-Nutzer
    Registriert seit
    26.03.2010.
    Beiträge
    226

    Standard

    Zitat Zitat von planepix Beitrag anzeigen
    Alternative erstellst du dir nur die CSS-Regeln und nimmst kurze Klassenbezeichnungen wie t10 und b10; dann kannst du dir eine Abhängigkeit eines Bundles sparen…
    In der Tat zwei nicht unwichtige Argumente.

    Zitat Zitat von planepix Beitrag anzeigen
    Und in deiner „alten” 3.5 Installation kannst du in Datenbank vermutlich den Stellen auf die Schliche kommen, wo das eingesetzt war.
    Erschreckend: in 134 von 320 Artikeln und in 710 von 1288 Inhaltselementen. Da bin ich ja Wochen beschäftigt
    Das mag mit daran liegen, dass viele meiner Inhaltselemente keine separate Überschrift haben; die hat meist nur das Erste.
    Ich glaube da lohnt es sich, zumindest mal drüber nachzudenken ob man das über geschickte Datenbank-Manipulationen abkürzen kann. Dazu müsste ich herausfinden, was die "Unterfelder" von cssID in den Tabellen tl_article und tl_content bedeuten. Du weißt das nicht zufällig? So ein Eintrag sieht ja so aus:
    a:2:{i:0;s:0:"";i:1;s:0:"";}
    Die beiden Strings dürften "menschlesbar" die Namen von CSS ID und Klasse sein; aber mit i: und s: kann ich nichts anfangen; vielleicht irgendeine ID. (Zumindest in Inhaltselementen scheint das zweite s: die ID des übergeordneten Artikels zu sein...)

  9. #9
    Contao-Urgestein Avatar von mlweb
    Registriert seit
    10.07.2011.
    Beiträge
    4.010
    Partner-ID
    7421

    Standard

    Zitat Zitat von purzel Beitrag anzeigen
    Erschreckend: in 134 von 320 Artikeln und in 710 von 1288 Inhaltselementen. Da bin ich ja Wochen beschäftigt
    Das ist u.a. der Grund warum solche Dinge schon seit den Anfangszeiten des css besser dort aufgehoben waren. Auch ein Wildwuchs von sehr vielen unterschiedlichen Abständen ist in meinen Augen nicht wirklich klug.
    Ich habe vor kurzem auch eine solche Installation übernommen. Dort haben wir über css eine Grundeinstellung vorgenommen, die für die meisten Elemente passt und noch zwei oder drei Klassen verwendet für ein paar Sonderfälle. Damit war die Umstellung sehr schnell erledigt.
    Für Dinge die man mit html5 und css3 lösen kann, braucht man kein javascript.
    Immer dran denken: Contao-Check zum Testen der Servervoraussetzungen (Contao 2, Contao 3 und Contao 4) und zum Prüfen einer bestehenden Installation (bis Contao 3.5)

  10. #10
    Contao-Nutzer
    Registriert seit
    26.03.2010.
    Beiträge
    226

    Standard

    Du hast (leider) sowas von Recht...
    In den Anfangszeiten von Typolight (so lange verwende ich das schon) durfte man auch irgendwo auswählen dass ein Element zentriert wird. Auch das verschwand irgendwann und ich musste meine (zum Glück nur wenigen) zentrierten Elemente mit einer CSS Klasse
    Code:
    .zentriert { text-align: center; }
    ausstatten. In den Anfangszeiten konnte ich und möglicherweise auch einige andere nicht absehen, dass eines Tages inline-CSS "böse" sein würde Und, zu guter Letzt, in meinen Anfangszeiten war CSS für mich ziemliches Neuland und trotzdem sollte ich diese Seite bauen... Ich wusste damals noch nicht, was in Sachen Styles klug ist und was nicht
    Jetzt habe ich eine riesige Fleißarbeit vor mir, aber Dein Tipp mit einer Art "Grundabstand" gefällt mir ziemlich gut, vielen Dank dafür.

  11. #11
    Contao-Urgestein Avatar von Kahmoon
    Registriert seit
    22.06.2009.
    Ort
    München
    Beiträge
    4.098

    Standard

    Zitat Zitat von purzel Beitrag anzeigen
    Jetzt habe ich eine riesige Fleißarbeit vor mir, aber Dein Tipp mit einer Art "Grundabstand" gefällt mir ziemlich gut, vielen Dank dafür.
    Das habe ich doch auch schon 5 Posts weiter oben gemacht! :-( :-)))

    So hast du wenigstens auf einen Streich alle unterschiedlichen Abstände "aufgeräumt".

    VG Frank
    Geändert von Kahmoon (29.05.2019 um 13:02 Uhr)

  12. #12
    Administratorin Avatar von lucina
    Registriert seit
    19.06.2009.
    Ort
    Kiel (DE)
    Beiträge
    6.383
    Partner-ID
    152
    User beschenken
    Wunschliste

    Standard

    Zitat Zitat von purzel Beitrag anzeigen
    In den Anfangszeiten konnte ich und möglicherweise auch einige andere nicht absehen, dass eines Tages inline-CSS "böse" sein würde
    Das war auch 2006 schon relativ klar - vor allem auf Grund der schlechten Wartbarkeit, die Dir ja nun auch auf die Füsse gefallen ist.

    Sorry ...

  13. #13
    Contao-Nutzer
    Registriert seit
    26.03.2010.
    Beiträge
    226

    Standard

    @ Kahmoon / Frank:
    Sorry, ich hatte Deine Formulierung nicht in die Richtung interpretiert, war kein böser Wille.

    @ lucina:
    Wohl dem, der (der, die) das 2006 schon wusste und absehen konnte. Bei mir könnte das die Zeit gewesen sein, in der ich mit CSS angefangen habe. (Plain) HTML kenne ich natürlich schon länger...

    @ all:
    Es bedarf noch des finalen Tests an (einer KOPIE) der Datenbank, aber ich bin zuversichtlich dass das klappt: ein kleines PHP-Script, welches mir den Löwenanteil der o.g. Fleißarbeit abnimmt: nämlich die vor- und nach- Abstände aus der 3.5er Spalte "space" in Helferklassen der Spalte "cssID" überführen

  14. #14
    Contao-Urgestein Avatar von Kahmoon
    Registriert seit
    22.06.2009.
    Ort
    München
    Beiträge
    4.098

    Standard

    Alles gut. War nur Spaß

  15. #15
    Contao-Nutzer
    Registriert seit
    26.03.2010.
    Beiträge
    226

    Standard

    Ich schrieb ...
    Zitat Zitat von purzel Beitrag anzeigen
    ...ein kleines PHP-Script, welches mir den Löwenanteil der o.g. Fleißarbeit abnimmt: nämlich die vor- und nach- Abstände aus der 3.5er Spalte "space" in Helferklassen der Spalte "cssID" überführen
    Das funktioniert natürlich nur dann, wenn man beim "frischen" Installieren einer 4.4 die (Kopie der) Datenbank aus der 3.5 benutzt und zunächst NICHT die nicht mehr benötigten Spalten aus tl_article und tl_content gelöscht hat. Andere Versionen als 4.4 habe ich nicht getestet.
    Das Anlegen und mit den gewünschten/richtigen margin-top und margin-bottom Werten zu füllen der erzeugten Helfer-Klassen muss ich zwar noch machen, aber immerhin hat mir das Script das mühselige selbst Suchen derer Elemente erspart, bei denen ich "Abstand" (also inline-CSS) benutzt habe.
    Auf Wunsch poste ich das Script.

  16. #16
    Contao-Nutzer
    Registriert seit
    26.03.2010.
    Beiträge
    226

    Standard

    Mein Skript hat ja direkt via DB Manipulationen der Spalte cssID bei etlichen Elementen in tl_content und tl_article CSS Klassen eingefügt. Die haben sofort funktioniert.

    Ergänzend habe ich einen ganz seltsamen Effekt:

    In einem zweiten Durchlauf habe ich das mit einem Rudel Datensätze tl_article in der Spalte teaserCssID gemacht. Die funktionieren NICHT, obwohl es erstens die selben Klassennamen sind und zweitens wie erwartet in dem Feld im BE zu sehen sind. Die teaserCssID funktionieren erst, wenn ich die jeweiligen Artikel einmal öffne und per Speichern und Schließen wieder schließe.
    Warum? Was kann ich dagegen tun? Muss ich alle via DB Manipulation modifizierten Datensätze einmal öffnen? Dann hätte ich den Kram auch von Hand eintippen können

  17. #17
    Contao-Urgestein Avatar von fiedsch
    Registriert seit
    09.07.2009.
    Ort
    München
    Beiträge
    2.188

    Standard

    Zitat Zitat von purzel Beitrag anzeigen
    Mein Skript hat ja direkt via DB Manipulationen der Spalte cssID bei etlichen Elementen in tl_content und tl_article CSS Klassen eingefügt. Die haben sofort funktioniert.
    Muss ich alle via DB Manipulation modifizierten Datensätze einmal öffnen? Dann hätte ich den Kram auch von Hand eintippen können

    Wie hast Du das denn gemacht? Deine Frage

    Zitat Zitat von purzel Beitrag anzeigen
    Dazu müsste ich herausfinden, was die "Unterfelder" von cssID in den Tabellen tl_article und tl_content bedeuten. Du weißt das nicht zufällig? So ein Eintrag sieht ja so aus:
    a:2:{i:0;s:0:"";i:1;s:0:"";}
    Die beiden Strings dürften "menschlesbar" die Namen von CSS ID und Klasse sein; aber mit i: und s: kann ich nichts anfangen; vielleicht irgendeine ID.
    lässt mich bermuten, daß Du es nicht so eingefügt hast, wie Contao es erwartet (und selbst abspeichern würde).

    Zur Erklärung: a:2:{i:0;s:0:"";i:1;s:0:"";} ist ein "serialisierter Array (siehe https://www.php.net/manual/de/function.serialize.php). Es ist die String-Darstellung des Arrays ["",""] -- also leere CSS-ID und CSS-Klasse. Wenn Du eine CSS-Klasse einträgst, müsste z.B. so etwas in der Datenbank gespeichert werden:

    Code:
    a:2:{i:0;s:0:"";i:1;s:9:"cssklasse";}
    a:2 ... Array der Länge 2

    i:0;s:0:"" ... an Index 0 ein String der Länge 0: der leere String ""

    i:1;s:9:"cssklasse" ... an Index 1 ein String der Länge 9: der leere String "cssklasse"
    Stammtisch Contao Bayern: http://www.contao-bayern.de

  18. #18
    Contao-Nutzer
    Registriert seit
    26.03.2010.
    Beiträge
    226

    Standard

    Hallo fiedsch,
    herzlichen Dank für's Augen öffnen

    Dein zweites bzw. drittes Zitat ("Dazu müsste ich wissen...") ist sozusagen Schnee von gestern (nicht böse gemeint!!). Hier hatte man mir das erklärt, auf dessen Basis habe ich ja dann mein Skript programmiert. Es erzeugte schon "formatmäßig" richtige Einträge in der DB. Die sehen die genau aus wie in Deinem Beispiel (z.B. a:2:{i:0;s:0:"";i:1;s:3:"n20";} und zweitens stehen ja auch genau die zugehörigen CSS-Klassen in den entsprechenden Feldern im Backend "CSS-ID/Klasse".

    So, das hat mich veranlasst, GANZ GENAU meine DB-Einträge zu prüfen, bei der Masse verliert man leicht den Überblick. Der erste Durchlauf (Posting v. 2.6.) war für die sofort funktionierenden cssID-Felder und hat 100% korrekte Einträge produziert. Der zweite Durchlauf (gestern) war für TeaserCssID hat "halb falsche" Einträge erzeugt (z.B. a:1:{i:1;s:3:"n20";}), möglicherweise war ich beim Bau des zweiten Durchlaufs etwas unkonzentriert. Asche auf mein Haupt.

    Nun habe ich mein Skript überarbeitet (leider jetzt nicht mehr so hübsch wie die erste Version, ich wollte fertig werden) und jetzt hat es auch für TeaserCssID korrekte Einträge gebaut. Damit funktionieren nun auch die Abstand-Helfer-Klassen bei den Teaser-Feldern.

Aktive Benutzer

Aktive Benutzer

Aktive Benutzer in diesem Thema: 1 (Registrierte Benutzer: 0, Gäste: 1)

Lesezeichen

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •