padding, margin und float probleme

[H_Zeiten]

Ich habe mir ein Design erstellt, jedoch habe ich zwei bis drei Probleme.

Design Entwurf

1. Wieso hat das <nav> ober und unterhalb einen Abstand? Wie bekomme ich den weg?
2. Wie bekomme ich das große Bild im <aside id="page_img"> 10px hinunter, damit es nicht ganz oben am <main> sitzt.
3. Wieso fallen die zwei <article> in der <section> aus dem weißen <main>? Wenn ich sie nicht floate sind sie drinnen. Wie bekomme ich die wieder rein?

LG,
H Zeiten

[Linuchs]

Dein Link ist bei mir nicht erfolgreich.

1. Wieso hat das <nav> ober und unterhalb einen Abstand? Wie bekomme ich den weg?

Da käme padding, border und margin infrage. Setze einen einfachen div mit border:1px solid #f00 um das nav-Element und du hast es "eingekreist". Vielleicht ist ja auch ein Elter, Vorgänger oder Nachfolger verantwortlich?

Linuchs

[Tabellenkalk]

Hallo,

1. Wieso hat das <nav> ober und unterhalb einen Abstand? Wie bekomme ich den weg?

mit
nav ul {
    padding:0;
    margin:0;
}

2. Wie bekomme ich das große Bild im <aside id="page_img"> 10px hinunter, damit es nicht ganz oben am <main> sitzt.

<aside id="page_img"></aside>
ist leer...

Gruß
Kalk

[H_Zeiten]

Hallo,

nav ul {
    padding:0;
    margin:0;
}

Danke das wars wirklich. Ich hab überall schon padding und margin auf 0 gesetzt (bzw. sogar schon auf minus x), aber nav ul hab ich anscheinend vergessen.

Aber trotzdem sind noch ein paar pixel Abstand zwischen logo und menü.

akutelles Design

<aside id="page_img"></aside>
ist leer...

hab ich jetzt auch geändert und so funktioniert es dann auch.

Aber das große Verständnisproblem ist noch immer nicht geklärt. Funktioniert hier float nicht? Kann man das irgendwie anders Lösen?

3. Wieso fallen die zwei <article> in der <section> aus dem weißen <main>? Wenn ich sie nicht floate sind sie drinnen. Wie bekomme ich die wieder rein?

LG,
H Zeiten

[Tabellenkalk]

Hallo,

Aber trotzdem sind noch ein paar pixel Abstand zwischen logo und menü.

akutelles Design

das verwundert mich auch. Mit
header { height: <höheDesBildes>px; }
verschwindet der Abstand zwar, aber eigentlich sollte das nicht nötig sein.
Was sagen die CSS-Profis?

Gruß
Kalk

[Gunnar Bittersmann]

@@H_Zeiten:

nuqneH

Aber trotzdem sind noch ein paar pixel Abstand zwischen logo und menü.

img-Elemente sind per Default inline und stehen auf der Grundlinie. Darunter ist der Raum für Unterlängen.

'vertical-align: bottom' oder 'display: block'

Qapla'

[H_Zeiten]

@Bittersmann @Tabellenkalk

vielen Dank für eure Tipps. Ihr habt mir bei der Problemlösung super geholfen.

Das letzte Problem habe ich hiermit gelöst.

Was du suchst ist der „clearfix“:
http://nicolasgallagher.com/micro-clearfix-hack/

In den meisten Fällen reicht auch ein overflow:hidden; auf das <section>-Element.

[Gunnar Bittersmann]

@@H_Zeiten:

nuqneH

3. Wieso fallen die zwei <article> in der <section> aus dem weißen <main>? Wenn ich sie nicht floate sind sie drinnen. Wie bekomme ich die wieder rein?

Einschließen (Clearing) von Floats

Das section-Element sollte aber gar nicht da sein. Using the HTML5 section element

Qapla'