Druckbare Version
Hallo liebe Contao-Community,
ich habe in einem Artikel mehrere Inhaltselemente (Text) angelegt. Diese werden auch wunderbar untereinander aufgelistet.
http://wppt.de/alaturka/index.php/menueler-menues.html
Was muss ich im css angeben, um den Abstand zwischen den Inhaltselementen genau zu definieren? Im Moment ist der mir eindeutig zu groß..!?
Liebe Grüße,
Tashera
vielleicht solltest du erstmal CSS lernen? Mittels eines modernen Browsers hat es in etwa eine Sekunde gedauert dein Problem zu erkennen ..
margin-top hat 373px, d.h. jede Überschrift hat nun einen Abstand von 373px nach oben. Wenn dieses entfernst, löst du jedoch dein Problem nicht da deine (erste) Überschrift dann 373px zu weit oben sitzt.Code:.menu .ce_headline {
width: 420px;
margin-top: 373px;
margin-left: 30px;
border-bottom: 1.5px dotted #B49272;
font-size: 20px;
color: #B49272;
z-index: 0;
}
Nachdem ich die Seite ein bisschen angeschaut habe, da scheint einiges nicht korrekt zu funktionieren. Ist dein Ziel, dass nur der Bereich mit dem Menü scrollbar ist?
Im Moment lerne ich CSS, ja, manchmal macht man Fehler, um diese zu beheben und genau daraus zu lernen.Zitat:
Zitat von wiese
Genau, mein Ziel ist es, nur diesen Bereich scrollbar zu machen. Das funktioniert soweit auch. Allerdings passiert im Moment mit den Abständen zwischen den Inhaltselementen noch nichts, egal was ich angebe.Zitat:
margin-top hat 373px, d.h. jede Überschrift hat nun einen Abstand von 373px nach oben. Wenn dieses entfernst, löst du jedoch dein Problem nicht da deine (erste) Überschrift dann 373px zu weit oben sitzt.
Nachdem ich die Seite ein bisschen angeschaut habe, da scheint einiges nicht korrekt zu funktionieren. Ist dein Ziel, dass nur der Bereich mit dem Menü scrollbar ist?
Hallo,Zitat:
Zitat von wiese
wie @wiese schon vermerkt hat, liegt es daran, dass du der Überschrift ein margin-top von 373px gegeben hast. Dies zieht sich natürlich über alle Überschriften .ce_headline durch. Damit nun deine erste Übeschrift (1 Menü 1) bleibt wo sie ist und die darauffolgenden Überschriften nach oben rutschen könntest du Folgendes machen:
Dem ersten Elementtyp 'Überschrift' (das bei dir "1 Menü 1" ist) eine Klasse mitgeben. Das kannst du unter Experteneinstellungen im Inhaltselemt. Da gibst du unter Klasse (ist das zweite Feld) zum Beispiel "HTop" (ohne Anführungszeichen) an. Den anderen/weiteren Überschriften vergibst du keine Klasse, also nix eintragen, so wie bisher.
Nun deklarierst du in den CSS-Anweisungen
Und aus der bestehenden Anweisung, machst du bei margin-top anstatt der 373px zum Beispiel 20px (musst du dann selbst ausprobieren, was am besten passt). Sollte dann so aussehen:Code:.menu .ce_headline.HTop {
width: 420px;
margin-top: 373px;
margin-left: 30px;
border-bottom: 1.5px dotted #B49272;
font-size: 20px;
color: #B49272;
z-index: 0;
Code:.menu .ce_headline {
width: 420px;
margin-top: 20px;
margin-left: 30px;
border-bottom: 1.5px dotted #B49272;
font-size: 20px;
color: #B49272;
z-index: 0;
Vielleicht hilft auch schon ein
zusätzlich zu definieren.Code:.menu .ce_headline:first-child {
margin-top:0px;
}
Zitat:
Zitat von derRenner
Danke, so funktioniert es. :)
Zitat:
Zitat von derRenner
Aus irgendeinem Grund wirft er mir wieder alles durcheinander und die Abstände stimmen nicht mehr. Zuerst dachte ich, ich hätte versehentlich etwas verändert, nach mehrfacher Kontrolle kann ich aber nichts feststellen?Zitat:
Zitat von Tashera
Hallo,
ich kann jetzt nicht nachvollziehen, was es alles durcheinander wirft, aber zu den Abständen kann ich dir sagen, dass du zu jeder Überschrift die Klasse HeadTop eingefügt hast und darum überall die grossen Abstände hast.
Anhang 10177
Die Klasse .HeadTop solltest du nur bei der ersten Überschrift verwenden, bei den anderen darauffolgenden Überschriften kannst du diese Klasse weglassen und das margin einfach kleiner setzen.
Mein Gott, manchmal ist man einfach etwas blind auf den Augen.
Danke!!! Ich dachte, ich hätte jedem besagten Überschrifttyp die Klasse HeadTop zuweisen müssen.
Im Nachhinein ist es auf jeden Fall auch logisch. :-) Jetzt ist es gelöst.