padding, margin und float probleme
H_Zeiten
- design/layout
Ich habe mir ein Design erstellt, jedoch habe ich zwei bis drei Probleme.
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
Dein Link ist bei mir nicht erfolgreich.
- 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
Hallo,
- Wieso hat das <nav> ober und unterhalb einen Abstand? Wie bekomme ich den weg?
mit
nav ul {
padding:0;
margin:0;
}
- 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
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ü.
<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?
- 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
Hallo,
Aber trotzdem sind noch ein paar pixel Abstand zwischen logo und menü.
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
@@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'
@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.
@@H_Zeiten:
nuqneH
- 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'