• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Plötzlicher Abstand von gefüllten DIVs

soulxheart

soulxheart

Mitglied
Guten Tag

Wollte mir eben so eine Art simplen Grafikentwurf erstellen. Habe mir dazu eine einfache HTML-Seite wie folgt erstellt:

HTML: 
<!DOCTYPE html>
<html lang="de" xml:lang="de">

<head>
</head>

<body>

<div id="content">

<header></header>
<aside></aside>
<article></article>
<footer></footer>

</div>

</body>

</html>
Diese habe ich folgendermassen formatiert:
[css]
body {
font-weight:normal;
font-size:10pt;
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
text-align:center;
background-color:#fff;
color:#000;
margin:0;
padding:0;
}

#content {
margin:0 auto;
width:1000px;
text-align:left;
border:1px solid black;
}

header {
height:60px;
background-color:red;
}

article {
height:500px;
margin-right:200px;
background-color:green;
}

aside {
width:180px;
height:500px;
background-color:grey;
float:right;
}

footer {
height:60px;
background-color:aqua;
}
[/css]
Wenn ich nun die "Container" mit Text fülle, erhalte ich überall einen weissen Rand/Abstand. Setze ich also drei Navigationspunkte, erscheint oberhalb des <header> eine weisse, etwa 5px hohe Fläche.
HTML:
Was kann ich dagegen tun, dass die Container alle aneinander liegen, auch wenn sie mit Inhalt gefüllt sind?

Danke für die Hilfestellungen.
 
Zuletzt bearbeitet:
Hallo Zejo

Vielen Dank für deine Antwort.

Mir wurde einmal gesagt, ich söll nie dieses Sternchen * verwenden. Unter body habe ich im Stylesheet doch bereits margin:0; und padding:0;? Beziehen sich diese beiden Angaben dann nicht auf den gesamten Inhalt des body?

Grüsse
 
Nein, sie beziehen sich nur auf das body-Element.

Das * kann man heutzutage durchaus verwenden. Besonders als

Code: 
* { margin: 0;padding: 0; }

ist es schon lange unproblematisch einsetzbar.
 
Vielleicht mal ne generelle Erklärung wofür dieses * {margin: 0; padding: 0} gut ist? Damit erreicht man sozusagen einen CSS Reset der Browser. Browser haben von sich aus vorgefertigte Abstände von margin, padding usw.

Durch * erreicht man sozusagen ein Reset.

Es gibt noch umfangreichere Resets der Browser.

Bekann ist vor allem das Reset von Eric Meyer:

Code: 
/* http://meyerweb.com/eric/tools/css/reset/     v2.0 | 20110126    License: none (public domain) */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}/* HTML5 display-role reset for older browsers */

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
  display: block;
}

body {
  line-height: 1;
}

ol, ul {
  list-style: none;
}

blockquote, q {
  quotes: none;
}

blockquote:before, blockquote:after, q:before, q:after {
  content: '';
  content: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}



Wie du siehst, setzt er hier fast alle bekannten HMTL Tags auf 0.

zu finden: CSS Tools: Reset CSS

Es gibt noch das Yahoo Reset:

YUI 2: Base CSS

Code: 
  /* base.css, part of YUI's CSS Foundation */
h1 {
    /*18px via YUI Fonts CSS foundation*/
    font-size:138.5%;
}
h2 {
    /*16px via YUI Fonts CSS foundation*/
    font-size:123.1%;
}
h3 {
    /*14px via YUI Fonts CSS foundation*/
    font-size:108%;
}
h1,h2,h3 {
    /* top & bottom margin based on font size */
    margin:1em 0;
}
h1,h2,h3,h4,h5,h6,strong {
    /*bringing boldness back to headers and the strong element*/
    font-weight:bold;
}
abbr,acronym {
    /*indicating to users that more info is available */
    border-bottom:1px dotted #000;
    cursor:help;
}
em {
    /*bringing italics back to the em element*/
    font-style:italic;
}
blockquote,ul,ol,dl {
    /*giving blockquotes and lists room to breath*/
    margin:1em;
}
ol,ul,dl {
    /*bringing lists on to the page with breathing room */
    margin-left:2em;
}
ol li {
    /*giving OL's LIs generated numbers*/
    list-style: decimal outside;
}
ul li {
    /*giving UL's LIs generated disc markers*/
    list-style: disc outside;
}
dl dd {
    /*giving UL's LIs generated numbers*/
    margin-left:1em;
}
th,td {
    /*borders and padding to make the table readable*/
    border:1px solid #000;
    padding:.5em;
}
th {
    /*distinguishing table headers from data cells*/
    font-weight:bold;
    text-align:center;
}
caption {
    /*coordinated marking to match cell's padding*/
    margin-bottom:.5em;
    /*centered so it doesn't blend in to other content*/
    text-align:center;
}
p,fieldset,table {
    /*so things don't run into each other*/
    margin-bottom:1em;
}

Diese sollten aber je nach Webseite noch individuell angepasst werden, je nachdem was man für Elemente auf der Seite hat.
 
Habe

HTML: 
margin:0;
padding:0;
hinzugefügt. Es klappt nun mit dem Inhalt. Vielen Dank.

@Zejo: Vielen Dank für deine Erklärung. Werde mir die Seite von Eric Meyer gleich mal unter die Lupe nehmen.



Grüsse
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben