padding, margin und float probleme – SELFHTML-Forum Forum als Ergänzung zum SELFHTML-Wiki und zur Dokumentation SELFHTML https://forum.selfhtml.org/self padding, margin und float probleme Thu, 17 Oct 13 14:37:41 Z https://forum.selfhtml.org/self/2013/oct/17/padding-margin-und-float-probleme/1592284#m1592284 https://forum.selfhtml.org/self/2013/oct/17/padding-margin-und-float-probleme/1592284#m1592284 <p>Ich habe mir ein Design erstellt, jedoch habe ich zwei bis drei Probleme.</p> <p><a href="http://jsfiddle.net/MGK6z/2/" rel="noopener noreferrer">Design Entwurf</a></p> <p>1. Wieso hat das <nav> ober und unterhalb einen Abstand? Wie bekomme ich den weg?<br> 2. Wie bekomme ich das große Bild im <aside id="page_img"> 10px hinunter, damit es nicht ganz oben am <main> sitzt.<br> 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?</p> <p>LG,<br> H Zeiten</p> padding, margin und float probleme Thu, 17 Oct 13 14:50:41 Z https://forum.selfhtml.org/self/2013/oct/17/padding-margin-und-float-probleme/1592291#m1592291 https://forum.selfhtml.org/self/2013/oct/17/padding-margin-und-float-probleme/1592291#m1592291 <p>Dein Link ist bei mir nicht erfolgreich.</p> <blockquote> <ol> <li>Wieso hat das <nav> ober und unterhalb einen Abstand? Wie bekomme ich den weg?</li> </ol> </blockquote> <p>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?</p> <p>Linuchs</p> padding, margin und float probleme Thu, 17 Oct 13 15:23:26 Z https://forum.selfhtml.org/self/2013/oct/17/padding-margin-und-float-probleme/1592286#m1592286 https://forum.selfhtml.org/self/2013/oct/17/padding-margin-und-float-probleme/1592286#m1592286 <p>Hallo,</p> <blockquote> <ol> <li>Wieso hat das <nav> ober und unterhalb einen Abstand? Wie bekomme ich den weg?</li> </ol> </blockquote> <p>mit<br> nav ul {<br>     padding:0;<br>     margin:0;<br> }</p> <blockquote> <ol start="2"> <li>Wie bekomme ich das große Bild im <aside id="page_img"> 10px hinunter, damit es nicht ganz oben am <main> sitzt.</li> </ol> </blockquote> <p><aside id="page_img"></aside><br> ist leer...</p> <p>Gruß<br> Kalk</p> padding, margin und float probleme Fri, 18 Oct 13 15:51:03 Z https://forum.selfhtml.org/self/2013/oct/17/padding-margin-und-float-probleme/1592285#m1592285 https://forum.selfhtml.org/self/2013/oct/17/padding-margin-und-float-probleme/1592285#m1592285 <p>@@H_Zeiten:</p> <p>nuqneH</p> <blockquote> <ol start="3"> <li>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?</li> </ol> </blockquote> <p><a href="http://molily.de/weblog/css-floats-einschliessen" rel="nofollow noopener noreferrer">Einschließen (Clearing) von Floats</a></p> <p>Das section-Element sollte aber gar nicht da sein. <a href="http://blog.paciellogroup.com/2013/10/using-html5-section-element/" rel="nofollow noopener noreferrer">Using the HTML5 section element</a></p> <p>Qapla'</p> <div class="signature">-- <br> „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer) </div> padding, margin und float probleme Thu, 17 Oct 13 20:36:46 Z https://forum.selfhtml.org/self/2013/oct/17/padding-margin-und-float-probleme/1592287#m1592287 https://forum.selfhtml.org/self/2013/oct/17/padding-margin-und-float-probleme/1592287#m1592287 <p>Hallo,</p> <blockquote> <p>nav ul {<br>     padding:0;<br>     margin:0;<br> }</p> </blockquote> <p>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.</p> <p>Aber trotzdem sind noch ein paar pixel Abstand zwischen logo und menü.</p> <p><a href="http://jsfiddle.net/MGK6z/4/" rel="noopener noreferrer">akutelles Design</a></p> <blockquote> <p><aside id="page_img"></aside><br> ist leer...</p> </blockquote> <p>hab ich jetzt auch geändert und so funktioniert es dann auch.</p> <p>Aber das große Verständnisproblem ist noch immer nicht geklärt. Funktioniert hier float nicht? Kann man das irgendwie anders Lösen?</p> <blockquote> <ol start="3"> <li>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?</li> </ol> </blockquote> <p>LG,<br> H Zeiten</p> padding, margin und float probleme Fri, 18 Oct 13 09:42:47 Z https://forum.selfhtml.org/self/2013/oct/17/padding-margin-und-float-probleme/1592290#m1592290 https://forum.selfhtml.org/self/2013/oct/17/padding-margin-und-float-probleme/1592290#m1592290 <p>Hallo,</p> <blockquote> <p>Aber trotzdem sind noch ein paar pixel Abstand zwischen logo und menü.</p> <p><a href="http://jsfiddle.net/MGK6z/4/" rel="noopener noreferrer">akutelles Design</a></p> </blockquote> <p>das verwundert mich auch. Mit<br> header { height: <höheDesBildes>px; }<br> verschwindet der Abstand zwar, aber eigentlich sollte das nicht nötig sein.<br> Was sagen die CSS-Profis?</p> <p>Gruß<br> Kalk</p> padding, margin und float probleme Fri, 18 Oct 13 09:49:21 Z https://forum.selfhtml.org/self/2013/oct/17/padding-margin-und-float-probleme/1592288#m1592288 https://forum.selfhtml.org/self/2013/oct/17/padding-margin-und-float-probleme/1592288#m1592288 <p>@@H_Zeiten:</p> <p>nuqneH</p> <blockquote> <p>Aber trotzdem sind noch ein paar pixel Abstand zwischen logo und menü.</p> </blockquote> <p>img-Elemente sind per Default inline und stehen auf der Grundlinie. Darunter ist der Raum für Unterlängen.</p> <p>'vertical-align: bottom' oder 'display: block'</p> <p>Qapla'</p> <div class="signature">-- <br> „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer) </div> padding, margin und float probleme Fri, 18 Oct 13 16:08:30 Z https://forum.selfhtml.org/self/2013/oct/17/padding-margin-und-float-probleme/1592289#m1592289 https://forum.selfhtml.org/self/2013/oct/17/padding-margin-und-float-probleme/1592289#m1592289 <p>@Bittersmann @Tabellenkalk</p> <p>vielen Dank für eure Tipps. Ihr habt mir bei der Problemlösung super geholfen.</p> <p>Das letzte Problem habe ich hiermit gelöst.</p> <blockquote> <p>Was du suchst ist der „clearfix“:<br> http://nicolasgallagher.com/micro-clearfix-hack/</p> <p>In den meisten Fällen reicht auch ein overflow:hidden; auf das <section>-Element.</p> </blockquote>