Ergebnis 1 bis 10 von 10

Thema: Abstand davor und dahinter - weg!

  1. #1
    Contao-Fan Avatar von kubjo
    Registriert seit
    11.01.2011.
    Ort
    Ludwigsburg
    Beiträge
    862

    Standard Abstand davor und dahinter - weg!

    Hi Leute,
    habe gerade die ersten Test in der 4.4.8 hinter mir, was mir auffällt ist, dass der Punkt Abstand davor und dahinter weg ist.

    Gibt es irgendwo eine Liste der Änderungen für Leute die sich in der Version 3.x auskennen und jetzt umsteigen wollen?

    Grüße aus Ludwigsburg

    Jochen Kubik
    Wir sind alle Würmchen, nur glaube ich, daß ich ein Glühwürmchen bin.

  2. #2
    Alter Contao-Hase
    Registriert seit
    29.10.2009.
    Beiträge
    1.438
    Partner-ID
    626
    User beschenken
    Wunschliste

    Standard

    Ja, zwar nicht 100% vollständig, aber vorhanden: https://github.com/contao/core-bundl...ter/UPGRADE.md

  3. #3
    Contao-Fan Avatar von kubjo
    Registriert seit
    11.01.2011.
    Ort
    Ludwigsburg
    Beiträge
    862

    Standard

    Hi Leute,
    ich muß das Thema nochmal hoch hieven:

    Nachdem die o.g. Funktion (leider) weggefallen ist, stellt sich mir die Frage, wie ihr das elegant löst?
    Ich habe mir nach dem Schema:

    Code:
    .Abstand-o-5  {margin-top:5px!important;}
    ...
    .Abstand-u-5  {margin-bottom:5px!important;}
    ...
    in 5px Schritten bis +/- 200px mein CSS ergänzt, so dass ich jederzeit einem CE eine dieser Klassen zuweisen kann, ohne erst lange ins CSS gehen zu müssen.
    Ist diese Vorgehensweise OK, oder gibt es etwas besseres, was ich nicht kenne?


    Grüße aus Ludwigsburg
    Jochen Kubik
    Wir sind alle Würmchen, nur glaube ich, daß ich ein Glühwürmchen bin.

  4. #4
    Contao-Fan
    Registriert seit
    05.11.2009.
    Ort
    Liebschützberg (Sachsen)
    Beiträge
    401

    Standard

    Hallo,

    falls Du Bootstrap verwendest, gibt es ab Version 4 jetzt Abstandsklassen Suchwort Spacing.

    https://getbootstrap.com/docs/4.0/utilities/spacing/

    Steffen Winde

  5. #5
    Contao-Fan Avatar von kubjo
    Registriert seit
    11.01.2011.
    Ort
    Ludwigsburg
    Beiträge
    862

    Standard

    Zitat Zitat von swinde Beitrag anzeigen
    Hallo,

    falls Du Bootstrap verwendest, gibt es ab Version 4 jetzt Abstandsklassen Suchwort Spacing.

    https://getbootstrap.com/docs/4.0/utilities/spacing/

    Steffen Winde
    Hi swinde,

    ich verwende kein Bootstrap, ehrlich gesagt, ich weiß garnicht was das ist ;-)

    Aber, wenn ich das so richtig sehe, fügen die dort ein spacerbild mit x pixel ein, das ist aber nicht die feine CSS Art, oder?

    Grüße
    Jochen
    Wir sind alle Würmchen, nur glaube ich, daß ich ein Glühwürmchen bin.

  6. #6
    Contao-Nutzer
    Registriert seit
    14.03.2012.
    Ort
    Berlin
    Beiträge
    225

    Standard

    Hi,

    nein, das macht Bootstrap nicht. Das macht genau das gleiche wie du, nur mit anderen Klassennamen (z.B. mt-0 bis mt-5). Über eine Config kann man weitere Stufen hinzufügen, ohne das CSS dafür schreiben zu müssen.

    Was ich auch ganz gut für Redakteure finde: https://github.com/Craffft/css-style-selector-bundle
    Da kannst du die CSS-Klassen im Backend verwalten (das CSS dazu musst du aber selber anlegen). Der Redakteur hat dann ein Dropdown, welches das CSS-Klassen Feld befüllt.
    Da kannst du dann Namen wie "Abstand nach unten 5" erstellen, und es wird zu deinem ".Abstand-u-5".

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

    Standard

    Zitat Zitat von kubjo Beitrag anzeigen

    Nachdem die o.g. Funktion (leider) weggefallen ist, stellt sich mir die Frage, wie ihr das elegant löst?
    Ich habe mir nach dem Schema:

    Code:
    .Abstand-o-5  {margin-top:5px!important;}
    ...
    .Abstand-u-5  {margin-bottom:5px!important;}
    ...
    in 5px Schritten bis +/- 200px mein CSS ergänzt, so dass ich jederzeit einem CE eine dieser Klassen zuweisen kann, ohne erst lange ins CSS gehen zu müssen.
    Kannst Du noch einmal beschreiben wo Dir welche Funktion fehlt?

    Ganz allgemein ist mir bis auf ganz ganz wenige Ausnahmen jedes !important ein Dorn im Auge.
    Klassen in der von Dir hier beschriebenen Form blähen m.E. den Code nur unnötig auf.
    Ich bin mir im Moment auch nicht im Klaren darüber, wozu so etwas in 5-px-Schritten für jedes Theme notwendig sein sollte.

    Wenn ich mein Theme erstelle habe ich für die einzelnen Elemente feste Abstände - höchstens mal 2 oder 3 verschiedene, ganz besonders wenn es um die Abstände oben und unten geht (Stichwort: verticaler Rhythmus). Die Abstände stehen in Bezug zur Schriftgröße und zum Viewport. Die Abstände, die für ein bestimmtes Theme festgelegt werden, wiederholen sich eigentlich überall in dem Theme. Wenn man mit einem Preprozessor (z.B. Sass) arbeitet kann man dafür Variable einsetzen und muss dann nur den Wert der Variablen verändern.

    Auch in reinem css wäre das Setzen von Klassen bei jedem Element für mich kein Vorteil gegenüber Veränderungen im css und geschickter Ausnutzung von Vererbung und Kaskade.
    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)

  8. #8
    Contao-Fan Avatar von kubjo
    Registriert seit
    11.01.2011.
    Ort
    Ludwigsburg
    Beiträge
    862

    Standard

    Hi mlweb,

    ja, da treffen wohl Welten aufeinander. Ich verwende / habe verwendet die Abstände sehr oft, wenn es um meine eigenen Seite geht. Bei Kundenprojekte, arbeite ich dann eher so wie Du, strukturiert und einmalig im CSS.
    An Sass habe ich mich bis jetzt noch nicht ran getraut, ich weiß auch nicht, wie ich hier einen soften Einstieg machen kann.

    Grüße aus Ludwigsburg
    Jochen Kubik
    Wir sind alle Würmchen, nur glaube ich, daß ich ein Glühwürmchen bin.

  9. #9
    Contao-Urgestein Avatar von Andreas
    Registriert seit
    19.06.2009.
    Ort
    Mönchengladbach
    Beiträge
    7.542
    User beschenken
    Wunschliste

    Standard

    Individuelle Abstände zu setzen sollte eigentlich nicht nötig sein. Aber man kann diese Felder per SQL ja in einem Rutsch leeren.

    So in etwa könnte eine CSS aussehen:
    PHP-Code:
    [class^="mod_"] {
      
    margin-bottom2rem;
    }
    [class^=
    "ce_"] {
      
    margin-bottom1.5rem;

    Bitte!
    Vor Anfragen im Forum HTML validieren.
    Codesnippets hier im Froum sauber einrücken. Nur Tabs o. nur Leerzeichen verwenden.

    Vielen Dank an alle Wunschlistenerfüller
    Andreas Burg, Web Solutions

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

    Standard

    Zitat Zitat von kubjo Beitrag anzeigen
    An Sass habe ich mich bis jetzt noch nicht ran getraut, ich weiß auch nicht, wie ich hier einen soften Einstieg machen kann.
    Wenn Du ccs kannst ist es eigentlich ganz einfach. Einfach mal installieren und testen.
    Wenn Du erst mal nichts installieren willst ist Sassmeister sehr zu empfehlen.

    Dann einfach die Beispiele von der Sass-Seite mal durchgehen.
    Ich verwende übrigends die scss-Syntax. Wenn ich auf die korrekte Tab-Einrückung streng achten müsste, würde ich wohl nur noch am Fehler suchen sein.
    Außerdem besteht damit die Möglichkeit auch ganz normales css zu verwenden bzw. zu übernehmen und erst einmal nur Teile in scss zu schreiben.

    Und ansonsten gibt es auch ein paar Tutorials im Netz.
    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)

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
  •