Margin in Firefox

[kronenmichl]

Hallo,
ich versuche den Kopfbereich meiner Seite in einer Box darzustellen und dieser mittels margin einen Rand von 5px zu geben.
Im IE8 funktioniert das auch so wie ich mir das vorgestellt hab. Im Firefox allerdings wird die die Angabe für top und bottom völlig ignoriert.
Zudem wird auch die Hintergrundfarbe für die nachfolgenden Menü und Inhaltscontainer nicht angezeigt. Habt Ihr einen Tipp für mich wo ich anfangen sollte zu suchen? Danke schonmal. Hier der Link: Dein Erfolgsplaner

LG Micha

 

[Efchen]

Du hättest noch dazu sagen können, um welches Element es geht.

Die Eigenschaften top/bottom ziehen ja nur in Zusammenhang mit "position" und haben nichts mit Abständen zu tun, wie Du im Topic angegeben hast, das ist Dir bewusst?

Ein Menü kann ich in Deinem HTML-Code übrigens nicht finden. Das, was vom Inhalt her ein Menü sein könnte (aber fälschlicherweise nicht als Liste ausgezeichnet ist), hat keine Hintergrundgrafik oder -farbe. Daher wird da natürlich auch nichts angezeigt.

Mein Tipp, wo Du anfangen solltest: Bei HTML. Dein Verständnis von HTML ist noch unvollständig oder Du kannst es nicht richtig anwenden. HTML ist für die logische Inhaltsauszeichnung (= Semantik) zuständig. Davon sieht man bei Dir leider noch zu wenig. Deine Überschrift hast Du z.B. auch als Background-Image eingebunden, und es damit zur "Zierde" abgestempelt. Das Image enthält aber Content, muss also per <img> mit richtigem alt-Attribut eingebunden werden, und dann sollte es natürlich auch als Überschrift ausgezeichnet werden, wodurch sich die Wertigkeiten Deiner anderen Überschriften natürlich verschieben.

 

[kronenmichl]

Vielen Dank für die schnelle ausführliche Antwort.

Es geht mir ja genau darum diesen semantischen Aufbau zu lernen. Konkret geht es mir im Moment um genau den Bereich, der als Hintergrund diese Überschrift enthält. Für mich war das auch nur eine Notlösung weil ich es einfach, trotz Stundenlangen probierens, nicht auf die Reihe gebracht hab in einem div-container drei Bilder (linke Ecken, logo, rechte ecken) so anzuordnen wie ich mir das vorgestellt hab.
Nun hab ich eine Box (wrapper) die den kompletten Inhalt mittig im Browser zentriert. Diese hat einen hellen Hintergrund.
Die darin enthaltene Header Box sollte nun zu dieser wrapper-box einen Aussenabstand von 5px haben. Im IE8 siehts bei mir auch genau so aus wie ich's wollte

 

[Efchen]

Konkret geht es mir im Moment um genau den Bereich, der als Hintergrund diese Überschrift enthält.

Du hast ihnen doch IDs gegeben, da kannst Du sie unmissverständlich nennen.
Du meinst div#header, richtig?

Für mich war das auch nur eine Notlösung weil ich es einfach, trotz Stundenlangen probierens, nicht auf die Reihe gebracht hab in einem div-container drei Bilder (linke Ecken, logo, rechte ecken) so anzuordnen wie ich mir das vorgestellt hab.

Naja, fast richtig.
Die linken und rechten Ränder, weil sie keinen Content enthalten, werden tatsächlich per background-image eingebunden, und dazu legt man auch im HTML-Code ein leeres <div> an. Der mittlere Teil jedoch besteht aus einem Text (oder einer Grafik, die mit <img> eingebunden wird, so dass man den Text aus der Grafik auch ins alt-Attribut übernehmen kann) und einer Hintergrundgrafik, die in x-Richtung wiederholt wird und nur 1px breit ist.
Semantisch handelt es sich ja hier um eine Überschrift, Du würdest also das <img> in ein <h1> einpacken und dem <h1> die Hintergrundgrafik geben.
Fertig.
Ach ja, dass Du Block-Elemente nebeneinander bekommst, indem Du sie floatest, weißt Du ja.

Nun hab ich eine Box (wrapper) die den kompletten Inhalt mittig im Browser zentriert. Diese hat einen hellen Hintergrund.

Meine erste reaktion darauf war "Nö!"
Daraufhin habe ich nachgesehen. Jetzt ist alles klar.
Die nachfolgenden Elemente floaten alle, werden also aus dem Textfluss genommen und zählen daher nicht mehr zur Höhe von #wrapper.
Du musst ein Element nach den Bereichen einfügen, das ein "clear" macht. Dann umschließt #wrapper auch wieder die anderen Elemente und man sieht die Hintergrundfarbe.

Die darin enthaltene Header Box sollte nun zu dieser wrapper-box einen Aussenabstand von 5px haben. Im IE8 siehts bei mir auch genau so aus wie ich's wollte

Im Firefox auch. 960px Breite, 2x 5px margin links und rechts und #wrapper ist 970px breit. Das passt schon.

Mal abgesehen davon, dass das doof ist, wenn mein Viewport kleiner ist als 970px. Und auch doof ist, wenn mein Viewport 2000px breit ist, insbesondere wenn ich dazu noch die Schriftgröße erhöhe. Aber das ist ja ein anderes Thema :-)

 

[kronenmichl]

So, hab jetzt nochmal ein bisschen nach deinen Anregungen überarbeitet. Titel müsste jetzt so passen.

Aber mit dem Abstand nach oben im Firefox bin ich noch nicht zufrieden. Im #header hab ich margin 5px. Wie du ja schon sagtest funktioniert das zu den Seiten hin wunderbar, aber eben nicht nach oben. Zumindest nicht im Firefox.

Wäre super wenn du da noch einen Tipp für mich hättest.

LG Micha

 

[Efchen]

Wozu ist div#logo_box? Rauswerfen.

Wozu ist div#menu_left? Rauswerfen.

Wenn Du #menu_right vor #content in den HTML-Code stellst, brauchst Du #content nicht zu floaten und kannst auf #footer verzichten.

Die Bezeichnungen "menu_right" und "_left" sind semantisch nicht sinnvoll. Wenn Du die Position mal tauschen willst, hast Du den Salat: Entweder Elemente mit falscher ID oder zusätzlichen Aufwand, die IDs zu ändern. In HTML vergibt man nur Semantik. Mach das auch bei ID- und Klassennamen so. Nur Bezeichnungen, die einen Hinweis auf die Logik geben, nicht auf Layout.

Nun zu Deinem Header. Mir ist eben so nebenbei aufgefallen, dass Du ihm eine Höhe von 80px gibst, zumindest die Grafik für den linken Rand aber 81px hoch ist.

Der Abstand nach oben hin funktioniert in Firefox wunderbar. 5px. Passt doch alles.
Ich vermute aber, Du verwechselst margin (Außenabstand) mit padding (Innenabstand). Der Hintergrund erstreckt sich immer nur bis zum Border, also über padding, aber nicht über margin. Ist es das, wo Dein Denkfehler liegt?

 

[kronenmichl]

Sobald ich #logo_box rausnehme hab ich als Ergebnis eine nach unten verschobene Ecke rechts..

Manchmal ist es leichter murx zu schreiben als korrekt, aber ich will's jetzt endlich mal richtig lernen.

 

[Efchen]

Wenn ich sage "rausschmeißen", dann meine ich damit natürlich nur das Tag. Die Eigenschaften musst Du ggfs. übertragen, in diesem Fall fehlt dann natürlich das float im <h1>.

 

[kronenmichl]

Geschafft, danke!!

 

[kronenmichl]

Sorry, aber einmal muss ich noch. Ich schaff's einfach nicht den #content in die Mitte zwischen #navi und #vorschau_box zu bekommen. Sicher fehlt da wieder nur irgendwo eine Kleinigkeit.

Edit: Hat sich erledigt, habs gefunden.