[XHTML, CSS] Abstände...

**Namenloser**

Hallo,

ich hab mal wieder ein Problem, das ich überhaupt nicht verstehe... und zwar möchte ich auf meiner Seite einen farbigen Header haben, der über die ganze Bildschirmbreite geht und oben bündig abschließt (so ähnlich wie bei der DP). Dazu habe ich natürlich erst mal die Margins und Paddings der diversien <div>s und des <body> auf 0 gesetzt.
Nun befindet sich aber in dem Header noch eine Überschrift (<h1>-Tag), welche einen Margin > 0 hat, da sie natürlich nicht direkt am Rand kleben soll.

Nun führt das eigenartigerweise dazu, dass die Seite so gerendert wird, als ob der Header, nicht die Überschrift, das Margin > 0 hätte.

Um das ganze mal etwas anschaulicher zu machen, hier (verkürzt) der Code:

zusammenfalten · markieren

XML-Code:

			<html>

  <head>...<head>

  <body>

    <div id="wrapper">

      <div id="header">

        <h1>Test</h1>

      </div>

      <div id="main">

        ...

      </div>

    </div>

  </body>

</html>

markieren

Code:

			body, #wrapper, #header, #main {

  margin: 0px;

  padding: 0px;

}

#header { background: red; }

#wrapper { background: blue; }

#main { background: green; }

/* Das einzige Element mit margin != 0: */

h1 {

  margin-top: 50px;

  margin-bottom: 50px;

}

So sieht das Ergebnis aus (man beachte den großen weißen Abstand oben und darunter den blauen Bereich – beides sollte nicht da sein):

Aussehen soll (und müsste es nach meiner Logik) aber so:

Ich habe dieses seltsame Verhalten sowohl in der Alpha des Firefox 6 als auch im IE9 festgestellt.

Live-Demo gibts hier (die gleiche Datei gibt’s auch noch mal zusätzlich im Anhang)

Danke im Voraus,
ich bin gerade ziemlich ratlos...

**s.h.a.r.k**

Jup, ist ein sehr unschönes Problem. Ich löse das dann immer so, dass ich anstatt margin in solchen Fällen dann einfach padding verwende. Ich glaube es gibt für sowas auch einen "transparent boder fix", aber bin mir da etwas unsicher.

PS: Schau dir vielleicht mal CSS-reset-Dateien an. Ich glaube, ich nutze den

hier immer.

-- EDIT

Jup, das mit dem transparenten Border klappt. Habe dem <div id="header"> ein border-top: 1px solid transparent; verabreicht und schon hats im FF5 geklappt. Unschön wie ich finde, aber es geht

**Namenloser**

Zitat von s.h.a.r.k:

PS: Schau dir vielleicht mal CSS-reset-Dateien an. Ich glaube, ich nutze den

hier immer.

Danke, aber daran liegt es nicht. Ich hab schon mit Firebug ordentlich rumgefrickelt, und auch so Sachen wie

markieren

Code:

			* {

  margin: 0px !important;

  padding: 0px !important;

}

/* Ohne das folgende ist der Abstand oben weg, aber leider auch der der Überschrift */

h1 {

  margin-top: 50px !important;

  margin-bottom: 50px !important;

}

ausprobiert, mit unverändertem Resultat. Die Abstände sind definitiv alle 0; wird auch von Firebug im „Berechnet“-Tab so angezeigt. Aber wenn man in der HTML-Ansicht über das <body>-Tag hovert, sieht man an der Hervorhebung, dass der Body-Bereich bereits so weit unten beginnt. Alle Margins und Paddings sind aber, wie gesagt, 0. Ich hab spaßeshalber sogar mal für html und head die Abstände auf 0 gesetzt, aber das brachte auch nichts...

Zitat von s.h.a.r.k:

Jup, ist ein sehr unschönes Problem. Ich löse das dann immer so, dass ich anstatt margin in solchen Fällen dann einfach padding verwende. Ich glaube es gibt für sowas auch einen "transparent boder fix", aber bin mir da etwas unsicher.

Werde ich gleich mal nach googlen, Danke. Es muss doch irgendeine „gescheite“ Lösung dafür geben. Die Darstellung ist doch völlig unlogisch...

Edit (@dein Edit): Okay, Danke, werd ich gleich mal testen. Aber trotzdem: WTF.

PS: Genau deshalb hasse ich Webdevelopment...

Edit 2: Dein Tipp funktioniert. Allerdings löst das nur das Problem mit dem weißen Bereich, der blaue ist immer noch da (ist für mein Design ein nicht ganz so großes Problem, aber trotzdem doof). Muss ich jetzt etwa für jedes Element, das auf ein Element folgt, das ein Element mit Margin > 0 enthält, Border-Top: 1px solid transparent setzen? Das kann ja wohl nicht wahr sein...

**s.h.a.r.k**

CSS und Logik lässt sich nicht immer sinnvoll vereinbaren

Daher habe ich schon mehr oder weniger aufgegeben, über saubere Lösungen nachzudenken. Vor allem das, was du hier gerade präsentierst ist ein Paradebeispiel, dass irgendwas schief gelaufen ist...

Das mit der Reset-Datei war nur ein allgemein Hinweis, da du erwähnt hattest, dass du die margin- und padding-Werte von body etc. auf 0 gesetzt hast. So eine reset-Datei macht das eben für alles Element von vorn herein automatisch.

Oha, hatte da doch glatt nur den border für top angegeben. Du kannst ihn für das header-div ohne top setzen, also border: 1px solid transparent;. Hatte leider eher selten diese Problem, weswegen ich dir wohl nur diese eine Lösung anbieten kann.

**Namenloser**

Zitat von s.h.a.r.k:

CSS und Logik lässt sich nicht immer sinnvoll vereinbaren

Daher habe ich schon mehr oder weniger aufgegeben, über saubere Lösungen nachzudenken.

Ist vielleicht wirklich das gesündeste... ich hatte zwar auch schon ein paar mal Ärger mit CSS, aber da waren es meist Darstellungsbugs in einzelnen Browsern und nicht solche grundsätzlichen Irrationalitäten.

Zitat von s.h.a.r.k:

Oha, hatte da doch glatt nur den border für top angegeben. Du kannst ihn für das header-div ohne top setzen, also border: 1px solid transparent;.

Ähh ja... ich dachte erst, das gäbe dann Probleme, wenn ich doch eine Border haben will, aber ich merke gerade, dass ich ja dann einfach diese statt transparent verwenden kann... CSS hat mich schon ganz konfus gemacht

[XHTML, CSS] Abstände...

[XHTML, CSS] Abstände...

AW: [HTML, CSS] Abstände...

AW: [HTML, CSS] Abstände...

AW: [XHTML, CSS] Abstände...

AW: [XHTML, CSS] Abstände...

Forumregeln