FAQ gelesen - Woher kommen die Abstände :P

html.de-Forum HTML, XHTML & CSS
1

Also ich habe den angepinnten Post gelesen.
Margin und Padding hatte ich schon auf 0 gesetzt.

Ich versuche ein 2 spaltiges layout zu erstellen wobei die linke Seite als Navigation „fixed“ sein soll damit ich den rechten content nach unten scrollen kann. Natürlich kann ich das ganze jetzt mit margins nach oben verschieben.

Und Warum ist das graue tiefer als das rote DIV? Das Bild das oben links sein soll ist dann auf der gleichen höhe mit dem Roten Feld. Also woher die Differnez von grau zu rot und beides zusammen nochmal vom Browserfesnter?

Aber 2 Fragen:

  1. Woher kommen die Abstände?
  2. Gehe ich da falsch heran oder ist es so wie es ist und ich muss die divs einfach nach oben verschieben,
    ist die herangehensweise richtig oder wie oder was??

Hier mal ein fiddle.

2

das graue

hängt tiefer, weil das enthaltene
    ein margin-top hat (bzw. da kein margin gesetzt ist, vom Browser eines zugewiesen bekommt). Stichwort hier: Collapsing Margins

3

Wie Banana_Jones schon gesagt, du solltest statt body, html besser alles Elemente mit * ansprechen:

* { margin: 0px; padding: 0px; }

4

@Banana_Jones : Das

war also auch schuld daran, das der rechte Teil einen Abstand zum oberen Rand hatte.

Habe jetzt erstmal daraus

ul { margin:0; }

gemacht und das erste

mal testhalber durch normalen text ersetzt und siehe da alles ist schön oben.

Allerdings ist immer noch eine kleine Macke da. Da ist immernoch Platz unter dem Bild wie man sieht (gruener Balken) wo kommt dieser jetzt her?

Kannste bitte nochmal schauen? Mit collapse Border dürfte das jetzt nichts mehr zu tun haben oder?

Danke dir.

5

Danke @bodo92 , habe das jetzt mal so gemacht, aber das im vorherigen Post beschrieben gilt immernoch.

Update:
http://jsfiddle.net/3da30ev0/8/

6

Den Grund für den grünen Balken zu finden ist etwas kniffliger bzw nicht gerade offensichtlich:
Das Bild ist ein inline-Element. Das Standardverhalten des Browsers ist nun, inline-Elemente auf einer Linie auszurichten, der sog. Baseline (Das wäre quasi wie eine Linie in einem Schulheft). Und wie im Schulheft ist es so, das manche Buchstaben (y, g) unter die Baseline ragen. Dieser Platz wird selbstverständlich reserviert, und damit hast du deinen grünen Balken.
Die Lösung ist hier, die Elemente nicht auf der Baseline auszurichten, sondern eine andere vertikale Orientierung zu wählen, sprich: vertical-align: top (oder bottom, oder middle) für das Bild

7

Ich kenne das noch als bad practice, da es nach Ansicht einiger extrem unperformant ist.
Auf
http://stackoverflow.com/questions/2951997/what-is-the-performance-impact-of-csss-universal-selector
gibt es beide Meinungen dazu.

8

@Banana_Jones danke für die Ausführung, bin dieses We PC-los aber nicht Smartphone los daher werde ich vor Montag folgende Meinung nicht ausprobieren können will aber eben noch folgendes fragen :

Du sagst Bilder sind inline Elemente, also sollte es doch auch möglich sein das Bild als Display:Block zu definieren, damit sollte das Thema dann doch auch erledigt sein?!

@pax… Wie gesagt bin im We und am Smartphone mag ich Grad nicht lesen, mach ich dann Montag, danke für den link.

Aber ganz spontan ohne weiteren Hintergrund behaupte ich mal das die PC Leistung heute mehr als ausreichend ist?! Nun gut vielleicht die Browser engine oder so…?!

Bestimmt dann auch abhängig von der Größe der Seite selbst nehm ich an…

9

Korrekt

10

Danke!

Wie schließt man hier eigentlich Themen? Oder ist das nicht nötig?

11

@Banana_Jones nochmal eine Rückfrage. Du sagst das inline Elemente den Platz unter der Baseline reservieren. Lässt sich dies (grundsätzlich) abschalten?

12

Man könnte grundsätzlich eine vertical-align != baseline vergeben, aber ich denke nicht, dass das sinnvoll ist. Besser wäre es, solche Fälle speziell anzugehen.