Box ist auf einmal nach unten verrutscht

1 MarkusWi

Hallo alle zusammen

Auf der Seite https://markus-winter.ch/ gibt es eine Siedebar rechts. Doch leider ist die seit 2 Wochen nicht mehr "nur" rechts, sondern neu "rechts unten". Sie sollte aber rechts oben beginnen.

Mit den Entwicklertools habe ich rausgefunden dass es sich um die Klasse "sidebar widget-area" handeln müsste.
Aber was müsste ich an dieser Klasse eintragen, dass sie auf gleicher Höhe wieder Content ist?

Ich habe noch eine Seite mit gleichem Design. Da ist alles "noch" richtig. https://tessiner-pergola.center/ Wobei es mich wundert, warum ein "kleiner " Versatz vorhanden ist. Der ist mir in den vielen Jahren noch nie aufgefallen.

Und wie das mit "Anfängern" so ist, ich habe nichts verstellt.... ;-) Ausser dass ich viel Inhalt geändert habe. Aber nichts, dass auf ein nach unten Rutschen deuten würde...

Vielen lieben Dank für jegliche Informationen, welche zur "alten" Darstellung mit der Sidebar oben zurückführen.

Gruss Markus

2 MarkusWi

Danke, habe eine Lösung gefunden

.sidebar {
margin-left: 0%;
}

im CSS und es ist wieder beim Alten...

Viele liebe Grüsse
Markus

3 KohbargKrauter

Hi Markus,

..warum ein "kleiner " Versatz vorhanden ist.

Wenn du aus der Klasse .widget den margin rausnimmst

.widget {
  background: var(--BoxBak);
  box-sizing: border-box;
  border-radius: 15px 15px 15px 15px;
  */margin: 1em;*/
  padding: 1em;
  border-style: solid;
  border-width: var(--BrdThi);
  border-color: var(--BrdCol);
}

dann verschwindet der Versatz. Die vergrösserten Abstände kannst du dann über

  @media screen and (min-width: 61.5625em)
.widget {
  /*margin-bottom: 4.307692308em;*/
}

wieder einfangen.

Gruss Dirk

4 MarkusWi

Wow Super Dirk, danke vielmals. Habe das gefunden und anpassen können. Mit der Hilfe aus diesem Forum konnte ich auch ermitteln wie ich andere Abstände besser anpassen kann. (Kopfzeile-Content) Vielen Dank.

Wenn ich in Chrom die Elemente untersuche, dann werden mir da Farben angezeigt. Das blaue interpretiere ich als Margin. Auch Padding habe ich schon gefunden. Was aber könnte das Orange sein?

Ich frage, weil ich versuche den Abstand zwischen den beiden Fussblöcken Kontakt und Verwandte Seiten zu verringern.

Meiner Interpretation nach könnte das div.widget-area sein, da hat es rechts einen breiten orangen Bereich bei Kontakt.

Passt aber nicht, weil Verwandte Seite auch die Klasse div.widget-area hat, aber keinen Rand rechts hat.
Eine andere Klasse finde ich mit Durchsuchen nicht in dem Umfeld.

Was mache ich falsch?

Wünsche allen einen sonnigen Tag.
Gruss Markus

5 Jörg Kruse

Wähl mal in den DevTools auf der rechten Seite statt "Styles" den zweiten Tab "Computed" aus. Dort werden margin, border, padding und der Contentbereich des ausgewählten Elements mit den entsprechenden Farben angezeigt.

6 MarkusWi

Hey Dirk, Wahnsinn, danke Dir, das bestätigt meine Vermutung. Component ist eine coole Sache, jetzt lässt sich meine Raterei beweisen. Danke.

Div.Widget-area von Kontakt hat also definitiv einen Rechten Rand von 66.938. Aber das div.widget-area von Verwandte Seiten hat einen rechten Rand von "-". Und wenn ich den Rand verädere, dann verhunzt das meine Seite...

Also muss da eine Klasse sein, welche ich noch nicht erkenne...
Wie finde ich die?

Viele liebe Grüsse
Markus

7 Jörg Kruse

Wenn du links im HTML-Code das betreffende Div mit der Maus markierst, wird rechts im Tab "Styles" das maßgebliche CSS angezeigt, u.a.:

  @media screen and (min-width: 56.875em)
.content-bottom-widgets .widget-area:nth-child(1):nth-last-child(2), .content-bottom-widgets .widget-area:nth-child(2):nth-last-child(1) {
  float: left;
  margin-right: 7.14286%;
  width: 46.4286%;
}

Gruß Jörg

8 MarkusWi

Guten Abend Jörg

Vielen Dank. Ich sehe was Du mir zeigst und ich konnte es auch mit einiger Mühe nachvollziehen. Wenn ich im Quellcode unterschiedliche Elemente anklicke, verstehe ich noch nicht, welcher Style wirklich zur Anwendung kommt. Vor allem, weil dann die klassen mehrfach aufgeführt sind mit unterschiedlichen Eigenschaften. Da habe ich noch viel Lernaufwand.

Und vor allem glaube ich, dass ich mehr Chaos mache als Nutzen. Denn die PC Seite sieht wohl gut aus, aber Tablet und Smartphone...
War vermutlich ein Fehler, dass ich da die Finger rein gesteckt habe...

Ich geh mal zum Kissenhorchdienst und bedanke mich ganz herzlich...
Gute Nacht.

nach oben

Box ist auf einmal nach unten verrutscht

Beitrag schreiben (als Gast)