Abstand nach oben und unten?

[fr3d83]

Hi,

irgend wie vermisse ich in den Artekeleinstellungen, dass man den Abstand nach oben und unten manuell eingeben kann, ist das komplett weg?

Lg & Danke

[kubjo]

Hi,

irgend wie vermisse ich in den Artekeleinstellungen, dass man den Abstand nach oben und unten manuell eingeben kann, ist das komplett weg?

Lg & Danke

Ja, leider!

Gesendet von meinem LG-H850 mit Tapatalk

[fr3d83]

Ich habe gehofft ich habe etwas übersehen.^^

Gibt es denn eine Alternative, möchte nicht alles im CSS machen oder sinnlos Klassen vergeben.

[kubjo]

Hi fr3d83;

ich hatte die gleiche Frage hier:
https://community.contao.org/de/show...d-dahinter-weg!

Ich habe in mein Standard CSS diesen Abschnitt übernommen:

/* Abstände für contao4
============================================================================= */


.Abstand-o-5  {margin-top:5px!important;}
.Abstand-o-10 {margin-top:10px!important;}
.Abstand-o-15 {margin-top:15px!important;}
.Abstand-o-20 {margin-top:20px!important;}
.Abstand-o-25 {margin-top:25px!important;}
.Abstand-o-30 {margin-top:30px!important;}
.Abstand-o-35 {margin-top:35px!important;}
.Abstand-o-40 {margin-top:40px!important;}
.Abstand-o-45 {margin-top:45px!important;}
.Abstand-o-50 {margin-top:50px!important;}
.Abstand-o-55 {margin-top:55px!important;}
.Abstand-o-60 {margin-top:60px!important;}
.Abstand-o-65 {margin-top:65px!important;}
.Abstand-o-70 {margin-top:70px!important;}
.Abstand-o-75 {margin-top:75px!important;}
.Abstand-o-80 {margin-top:80px!important;}
.Abstand-o-85 {margin-top:85px!important;}
.Abstand-o-90 {margin-top:90px!important;}
.Abstand-o-95 {margin-top:95px!important;}
.Abstand-o-100 {margin-top:100px!important;}
.Abstand-o-110 {margin-top:110px!important;}
.Abstand-o-120 {margin-top:120px!important;}
.Abstand-o-130 {margin-top:130px!important;}
.Abstand-o-140 {margin-top:140px!important;}
.Abstand-o-150 {margin-top:150px!important;}
.Abstand-o-160 {margin-top:160px!important;}
.Abstand-o-170 {margin-top:170px!important;}
.Abstand-o-180 {margin-top:180px!important;}
.Abstand-o-190 {margin-top:190px!important;}
.Abstand-o-200 {margin-top:200px!important;}


.Abstand-u-5  {margin-bottom:5px!important;}
.Abstand-u-10 {margin-bottom:10px!important;}
.Abstand-u-15 {margin-bottom:15px!important;}
.Abstand-u-20 {margin-bottom:20px!important;}
.Abstand-u-25 {margin-bottom:25px!important;}
.Abstand-u-30 {margin-bottom:30px!important;}
.Abstand-u-35 {margin-bottom:35px!important;}
.Abstand-u-40 {margin-bottom:40px!important;}
.Abstand-u-45 {margin-bottom:45px!important;}
.Abstand-u-50 {margin-bottom:50px!important;}
.Abstand-u-55 {margin-bottom:55px!important;}
.Abstand-u-60 {margin-bottom:60px!important;}
.Abstand-u-65 {margin-bottom:65px!important;}
.Abstand-u-70 {margin-bottom:70px!important;}
.Abstand-u-75 {margin-bottom:75px!important;}
.Abstand-u-80 {margin-bottom:80px!important;}
.Abstand-u-85 {margin-bottom:85px!important;}
.Abstand-u-90 {margin-bottom:90px!important;}
.Abstand-u-95 {margin-bottom:95px!important;}
.Abstand-u-100 {margin-bottom:100px!important;}
.Abstand-u-110 {margin-bottom:110px!important;}
.Abstand-u-120 {margin-bottom:120px!important;}
.Abstand-u-130 {margin-bottom:130px!important;}
.Abstand-u-140 {margin-bottom:140px!important;}
.Abstand-u-150 {margin-bottom:150px!important;}
.Abstand-u-160 {margin-bottom:160px!important;}
.Abstand-u-170 {margin-bottom:170px!important;}
.Abstand-u-180 {margin-bottom:180px!important;}
.Abstand-u-190 {margin-bottom:190px!important;}
.Abstand-u-200 {margin-bottom:200px!important;}

Auch wenn das !important nicht die feine CSS Art ist, das ist mir Schnuppe!

Und nur wegen ein paar Zeilen Code Einsparung SCSS zu lernen ist bei mir leider zeitlich nicht drin!
Vielleicht, wenn ich mal viiiiiel Zeit habe ;-)

Grüße
JK

[lucina]

Es geht ja auch nicht um ein paar Zeilen Einsparung, die Du mit SCSS erschlagen könntest. Das braucht man meistens auch nicht.

Wichtiger in dem Zusammenhang ist es doch, dass man CSS einigermassen modern aufbaut, auf IDs weitgehend verzichtet und funktionale Klassen vergibt, die dann wie selbstverständlich auch Abstände definieren können. CSS sollte im Grundgerüst die Positionen von Sektionen festlegen, im Layoutbereich dann grundständig die Abstände definieren und kann dann für besondere Element - ich nenne sie mal 'Module' - noch mal spezifischer werden.

Vielleicht findet Ihr ja Anregungen im Netz, beispielsweise für SMACSS bei Jonathan Snook unter https://smacss.com/ oder für BEM unter https://en.bem.info/.

Tabellenlayout macht Ihr doch auch heute nicht mehr, oder?

[kubjo]

Hi Lucina,

ich will Dir nicht widersprechen, nur empfinde ich es unnötig kompliziert, wenn ein Element z.b. ein Bild oder eine Bildergalerie, rein optisch ein wenig mehr Platz braucht, als es der Designer der Seite vorherbestimmt hat. Das über das CSS file zu machen. Meist bin ich in diesem Falle die Redaktuer und Designer in Personalunion ;-) , oft baue ich dies Spezialabstände später dann auch ins CSS ein, aber manchmal reicht mir quick&dirty!

[Andreas]

... ist das komplett weg?

Ja, das ist komplett weg. Schau dir z.B. mal das Theme Open-Sauce an https://demo.rocksolidthemes.com/contao/opensauce/. In einem Theme hat man bestimmte Inhaltselemente, welche man benutzen kann. Diese sollten dann immer "schön" aussehen, egal welchen eigenen Text oder Bild man hinzufügt. Wenn dies nicht der Fall ist, sollte das Theme überarbeitet werden. So eine Liste mit Selektoren für Abstände kann man machen, ist aber nicht schön und sollte auch überflüssig sein.

Ein Theme sollte so sein, dass man ein Inhaltselement auswählt, Inhalt einpflegt und fertig. Den Rest erledigt das Theme.

[Samson1964]

Wie lösen denn Fachleute das Problem mit den Abständen beim Akkordeon?

[class^="ce_"]
{
    margin-bottom: 20px;
} 

geht ja nicht, weil dann zwischen den Akkordeons Platz ist, anstatt nur unten.

[MacKP]

Hier mal ein paar Anregungen fürs spacing -> https://medium.com/eightshapes-llc/s...s-188bcbae0d62

@Samson1964: ich weiß jetzt nicht was dein Problem ist... aber eventuell ist die Contao-Demo etwas zum abgucken für dich? -> https://demo.contao.org/en/ Direkt auf der Startseite sind Accordeons.

Viele Grüße

[Andreas]

Dafür hätte ich auch keine Lösung hier (von der Demo) das 3. Section anzusprechen.

<div class="mod_article">
  <div>
  <section class="ce_accordion">
  <section>
  <section>
  <div>
  <section>
  <section>
  <div>
</div>

Das müsste man individuell behandeln. Ich würde dem 3. und 5. dann z.B. die Klasse 'last' geben.

Wenn da kein DIV zwischen den SECTIONS wäre, könnte man noch last-of-type nehmen.

<div class="mod_article">
  <div>
  <section class="ce_accordion">
  <section>
  <div>
</div>

.ce_accordion:last-of-type {
  margin-bottom: 1.5rem;
} 

[hofff]

Für das 3. section gibt es endlos Möglichkeiten:

.ce_accordion .section .section

oder

.ce_accordion :nth-child(2)

um nur 2 Beispiele zu nennen. Die Frage ist aber: Warum sollte ich das brauchen?

fg
nicky




Gesendet von iPhone mit Tapatalk Pro

[Andreas]

Für das 3. section gibt es endlos Möglichkeiten:...

Es geht hier ja um eine allgemeine Lösung und nicht, eine extra Regel für diese eine Anordnung aufsetzen zu müssen. Das heißt, er setzt das hier für alle Inhaltselemente.

[class^="ce_"]
{
  margin-bottom: 20px;
} 

Möchte für die Accordions aber keinen Abstand, bzw. nur einen Abstand beim letzten, falls mehrere aufeinander folgen.

[class^="ce_"]
{
  margin-bottom: 20px;
}  
.ce_accordion {
  margin-bottom: 0;
}
.ce_accordion:last-of-type,
.ce_accordion:last-child,
.ce_acccordion.last-one {
  margin-bottom: 20px;
} 

[hofff]

ah ... ok ... das hatte ich so nicht verstanden! ;-)

Aber einfach allen ce_* einen Abstand nach unten geben?! Ich weiß nicht ... aber gut: Es hat jeder seinen eigenen Ansatz! :-)

fg
nicky


Gesendet von iPhone mit Tapatalk Pro

[Andreas]

Ja klar, wenn's für das Theme (Design) nicht passt, macht man halt andere übergreifende Angaben, aber in jedem Element explizit einen Abstand nach unten anzugeben halte ich für falsch. Du ja wahrscheinlich auch .

[kubjo]

Hi Leute

... aber in jedem Element explizit einen Abstand nach unten anzugeben halte ich für falsch. Du ja wahrscheinlich auch .

Davon war ja am Anfang des Threads auch nicht die Rede, es ging m.E. nach um Ausnahmen, die einfach etwas mehr Abstand brauchen als vonm Designer vorgesehen!

Grüße
JK

[webstar]

Hi Leute



Davon war ja am Anfang des Threads auch nicht die Rede, es ging m.E. nach um Ausnahmen, die einfach etwas mehr Abstand brauchen als vonm Designer vorgesehen!

Grüße
JK

Meiner Meinung nach sollte ein Design alle verfügbaren Möglichkeiten der benötigten Abstände abdecken. Wenn dann die Notwendigkeit besteht den Abstand individuell anzupassen ist es für mich ein Zeichen, dass hier das Design nicht alles berücksichtigt hat.

Daher sehe ich keine Notwendigkeit für die Eingabefelder.

[mlweb]

Ja sehe ich genauso.
Und wenn man ein gekauftes Theme hat und updatsicher anpassen will/muss, dann m.E. auch in einer custom.css

[Samson1964]

Ist mir gerade negativ aufgestoßen beim HTML-Element. Für Abstand davor oder dahinter müßte ich direkt im HTML-Code des Elements einen Abstandhalter ergänzen. Da das HTML-Element keinen Container hat (ce_html), kann man den auch nicht per CSS ansprechen. Glücklicherweise sind dazwischen noch "normale" Elemente und ich kann die Abstandsfunktionen des ProThemes nutzen. Wahrscheinlich werde ich mal eine Erweiterung coden, die die Abstände zur Verfügung stellt.

[MacKP]

Ist mir gerade negativ aufgestoßen beim HTML-Element. Für Abstand davor oder dahinter müßte ich direkt im HTML-Code des Elements einen Abstandhalter ergänzen. Da das HTML-Element keinen Container hat (ce_html), kann man den auch nicht per CSS ansprechen. Glücklicherweise sind dazwischen noch "normale" Elemente und ich kann die Abstandsfunktionen des ProThemes nutzen. Wahrscheinlich werde ich mal eine Erweiterung coden, die die Abstände zur Verfügung stellt.

Wenn du eigenes HTML schreibst, dann wirst du da doch auch entweder eine Klasse oder direkt einen Abstand einbauen können?
Verstehe jetzt das Problem daran nicht. Eigenes HTML heißt eigenes HTML und nicht eigenes HTML und nicht eigenes HTML. Für Kunden ist so ein Element ja eh nix.

Viele Grüße

[Samson1964]

Für Kunden ist so ein Element ja eh nix.

Meine Redakteure kommen gar nicht daran vorbei, "Eigenes HTML" zu benutzen, wenn Sie HTML-Tabellen aus ihrer Turnierverwaltung einbauen. Im Text-Element wird das HTML ja leider oft verfälscht.

Optimal wäre es natürlich die Daten aus der Turnierdatei der Turnierverwaltung direkt auszugeben, doch das Format der Turnierdatei ist sehr komplex und (da keine Formatbeschreibung) nur mit Tests aufwendig zu analysieren.

[Stefko]

Meine Redakteure kommen gar nicht daran vorbei, "Eigenes HTML" zu benutzen, wenn Sie HTML-Tabellen aus ihrer Turnierverwaltung einbauen

Ok, das ist jetzt natürlich etwas blöde, aber Du wirst ja schon zugeben, dass dieses/dein Problem schon ein wenig ... wie soll ich sagen ... naja, nicht ganz alltäglich ist.
Wenn die Leute aber eh schon mit HTML-Code herum jonglieren, ist es mit Sicherheit auch nicht so schwer denen etwas von <table style="margin-bottom: FOO px> zu erklären, oder?
Ich bin zumindest froh darüber, dass diese Möglichkeit verschwunden ist - was habe ich deswegen schon gekotzt wenn ein "Redakteur" meint sein Bild/Text/whatever benötigt unbedingt 137.38px Abstand nach unten ...

Ein wenig Sarkasmus sei mir noch erlaubt; gestern las ich, dass die EU darüber nachdenkt Plastik-Trinkhalme zu verbieten. In einem der ersten Kommentare dazu wurde herauf beschworen, dass nächsten Herbst wohl alle HWS-Abwärts gelähmten Cola aus Dosen trinkenden Kinder entweder an Dehydration sterben oder durch Wespenstichen dahin gerafft werden ...

[Samson1964]

Wenn die Leute aber eh schon mit HTML-Code herum jonglieren, ist es mit Sicherheit auch nicht so schwer denen etwas von <table style="margin-bottom: FOO px> zu erklären, oder?

Du kennst die Redakteure nicht ...
Ich habe denen irgendwann mal erzählt und ständig wiederholt, in der Turnierverwaltung einen HTML-Export zu machen und das HTML im HTML-Element einzufügen. Mehr nicht. Für die sind das nach wie vor alles chinesische Schriftzeichen. Aber sie funktionieren!

[Stefko]

Du kennst die Redakteure nicht ...

Deine natürlich nicht, aber aus eigener Erfahrung würde ich sagen -> Pferde -> Apotheke -> bööööörgs
Was möglich ist wird gemacht, oder anders gesagt, kann man sich nicht ausdenken ...

Ich habe denen irgendwann mal erzählt und ständig wiederholt, in der Turnierverwaltung einen HTML-Export zu machen und das HTML im HTML-Element einzufügen. Mehr nicht. Für die sind das nach wie vor alles chinesische Schriftzeichen. Aber sie funktionieren!

Ok, ich bin nach Deinem vorigen Posting davon ausgegangen, dass da zumindest (gröbste) HTML-Grundlagen vorhanden wären - mein Fehler
Aber genau solchen Leuten (das ist jetzt nicht abwertend gemeint) möchte ich für nix um die Welt Eingabefelder zur Verfügung stellen, mit denen sie das komplette Layout killen können. Das ist einfach nicht ihre Baustelle. Zur Not sollen sie lieber zwei Zeilenumbrüche oder Absätze darunter hauen.
jm2c

[mlweb]

Ich kenne natürlich dein Problem nicht genau, aber custom-Elements (entweder Rocksolid oder dma) wären keine Lösung?
Ich mag auch keinen Redakteur am Layout im weitesten Sinn rumschrauben lassen und mir dann ständig das Gejammer über zerhauenes Layout anhören. Habe erst kürzlich wieder einer 3er Fremdinstallation zur Betreuung bekommen. Nach dem ich der verantwortlichen Redakteurin erst mal alle möglichen Felder einschließlich des alten Tiny "geklaut" habe, gab es zunächst große Empörung. Danach haben wir uns zwei Stunden zusammengesetzt und herausgearbeitet was sie bei den Elementen haben möchte und braucht. Jetzt hat sie mit ein paar custom-Elements und mit stylepicker4ward eine Lösung von der sie geradezu begeistert ist.
Außerdem könnte man dem HTML-Element ja auch einen kapselnden Container im Template mitgeben, wenn man das will. Eine weitere Möglichkeit sind Grundeinstellungen für die Abstände bei jedem Element. Das was normal in den Contao-Elementen verwendet wird läuft ja wahrscheinlich eh über Klassen. Ich denke, das kann man auch so einrichten, dass es sich nicht in die Quere kommt.

[Andreas]

Samson1964 spricht ja immer mal wieder von irgendwelchen Turnieren. Ich meine mich zu erinnern es ginge dabei um Schach?

Es hört sich für mich so an als gäbe es irgendwo Internetseiten, wo der Quelltext oder ein Teil davon, irgendwie abgegriffen werden soll, um ihn dann auf der eigenen Website präsentieren zu können. @Samson1964: Dass du die Berechtigung hast, setze ich voraus, hast du glaube ich auch mal irgendwo erwähnt.

Das heißt, der Ansatz sollte lauten: Was sind das für Daten? Wie komme ich an die Daten?

Üblicherweise bietet die Quellseite dann diverse Möglichkeiten an:

• Einbindung per Iframe
• PHP-Schnittstelle zum Holen der Daten
• Bereitstellung von CSV, XML... Dateien
• RSS-Feed
• ...

Das Kopieren von HTML auf der Fremdseite und Einfügen auf der eigenen Seite sollte dabei wohl die letzte Möglichkeit sein. Und selbst dann kann man noch versuchen mit z.B. file_get_contents() das HTML der Fremdseite zu holen. Anschließend kann man ihn durch PHP-Tidy jagen, um Fehler zu beseitigen und dann mit PHP DOMDocument() analysieren und sich die gewünschten Daten rausziehen. Der Redakteur bräuchte dabei nur irgendwo die URL der Quellseite einzutragen und je nachdem was im Hintergrund programmiert wurde vielleicht noch ein paar Parameter mit auf den Weg geben.

[Samson1964]

Nun, ich lese zwar diverse Webseiten mit Schachergebnissen über den DOM aus und mache mir daraus CSV-Daten, aber das geschieht sozusagen lokal in UltraEdit. Diese statischen Daten binde ich fest in eigenen Inhaltselementen ein. In Echtzeit wird da also nichts fortwährend geparst.

Hier geht es um normales HTML, was die in Deutschland weitverbreitete Schachturnierverwaltung SwissChess als Exportmöglichkeit (nichts online!) neben Text anbietet. Je nach Umfang der Daten binde ich das HTML direkt ein oder mache mir aus der Textdatei CSV.

[VGT]

....Wahrscheinlich werde ich mal eine Erweiterung coden, die die Abstände zur Verfügung stellt.

Hallo @Samson1964: Ist eine solche Erweiterung noch in Arbeit oder schon verfügbar ...?

[Samson1964]

Da war ich noch nicht dran. Ich setze das mal auf meine ToDo-Liste. Ich bin gerade dabei in großem Umfang C4-Bundles zu programmieren oder meine C3-Erweiterungen zu C4-Bundles zu migrieren.

[VGT]

Hallo @Samson1964: was macht die Erweiterung? Ist sie schon einsatzfähig oder noch in Entwicklung ....

[planepix]

Hallo zusammen,

es gibt diese Erweiterung, die genau das machen sollte:
https://packagist.org/packages/heims...o-space-bundle