Abstände: mehrere Inhaltselemente

**Tashera** · 28.02.2013, 14:30

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

**wiese** · 28.02.2013, 15:33

vielleicht solltest du erstmal CSS lernen? Mittels eines modernen Browsers hat es in etwa eine Sekunde gedauert dein Problem zu erkennen ..

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;
}

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?

**Tashera** · 28.02.2013, 15:47

Zitat von wiese

vielleicht solltest du erstmal CSS lernen? Mittels eines modernen Browsers hat es in etwa eine Sekunde gedauert dein Problem zu erkennen ..

Im Moment lerne ich CSS, ja, manchmal macht man Fehler, um diese zu beheben und genau daraus zu lernen.

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?

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.

**derRenner** · 28.02.2013, 20:25

Zitat von wiese

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;
}

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.

Hallo,

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

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;

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 {
width: 420px;
margin-top: 20px;
margin-left: 30px;
border-bottom: 1.5px dotted #B49272;
font-size: 20px;
color: #B49272;
z-index: 0;

**wiese** · 01.03.2013, 11:48

Vielleicht hilft auch schon ein

Code:

.menu .ce_headline:first-child {
    margin-top:0px;
}

zusätzlich zu definieren.

**Tashera** · 04.03.2013, 08:34

Zitat von derRenner

Hallo,

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

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;

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 {
width: 420px;
margin-top: 20px;
margin-left: 30px;
border-bottom: 1.5px dotted #B49272;
font-size: 20px;
color: #B49272;
z-index: 0;

Danke, so funktioniert es.

**Tashera** · 04.03.2013, 11:12

Zitat von derRenner

Hallo,

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

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;

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 {
width: 420px;
margin-top: 20px;
margin-left: 30px;
border-bottom: 1.5px dotted #B49272;
font-size: 20px;
color: #B49272;
z-index: 0;

Zitat von Tashera

Danke, so funktioniert es.

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?

**derRenner** · 04.03.2013, 17:47

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.

head.jpg

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.

**Tashera** · 05.03.2013, 07:52

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.