Abstände (nach oben) können nicht entfernt werden: margin

gamester · 23. April 2014

Hallo Leute

Ich habe bei meinem Layout welches ich gerade erstelle ein Problem mit den Abständen.
Habe jedes Div mehrmals abgesucht aber habe den Fehler nicht gefunden.
Aussen sind 2 Aussencontainer bevor der div-container mit dem Inhalt, header und footer
kommt.
obwohl ich kein margin definiert habe macht das div: outercontainer-small einen Abstand nach oben ( ca 15px ).
Auch der Inhalt und der Footer haben einen Abstand nach oben obwohl ich im CSS nichts definiert habe.

Was könnte das Problem sein ?

Vielen Dank für eure Hilfe

HTML

<!DOCTYPE html> 
<html>
<head>
<!--<link rel="stylesheet" type="text/css" href="css/meinecss.css">-->
<!--<link rel="stylesheet" type="text/css href=""-->  
<meta name="description" content="">
<meta charset="UTF8"/>
<title>Website</title>
<style type="text/css"> 
html, body{ 
margin: 0px; 
padding: 0px;  
text-align:center; 
height: 100%; 
overflow: hidden; 
}




header{
width: 100%; 
background-color: blue;
}




footer{
width: 100%; 
background-color: red;
}




#outercontainer-big{ /*1*/
height: 100%; 
overflow:auto;
width:100%;
text-align: center;  
}




#outercontainer-small{ /*2*/
min-height: 100%;
width:1059px;
margin:auto auto; 
}




#container{ 
width:1020px;
height: 100%;
margin:0px auto;
text-align:left;
z-index: 99;
}




#content {
width:1020px;
background-color: yellow;
}
</style>
</head>
<body>
<div id="outercontainer-big"> 
	<div id="outercontainer-small">
		<div id="container">
			<header>
			<h2>HEADER</h2>
			</header> 
			<div id="content"> 
				<h1> INHALT </h1>
			</div> 
			<footer>
			<h2>FOOTER</h2>
			</footer> 
		</div>
	</div>
</div>
</body>
</html>

Alles anzeigen

marbro · 23. April 2014

Hallo
Versuche es mal in CSS mit einem Universalselektor, welcher die Abstände auf 0 setzt.

* {
margin 0;
padding 0;
}

wolf · 23. April 2014

Genau richtig, dein Browser hat vordefinierte Werte für alle möglichen HTML Elemente, z.B. h1 hat so und so viel Margin...
Wenn du in Firefox unterwechs bist dann hol dir mal das Addon firebug und mach einen Rechtsklick auf eins der Div's -> Element mit firebug untersuchen
dann fährst du im angezeigten Quellcode über die Div's und siehe da du siehst alle definierten Margin's/Padding's..
Bitte achte auch auf Einrückung im css Code, ist zwar Geschmackssache aber es hilft beim Fehler finden!

Zu deinem Problem, wie schon gesagt., dein Stylesheet immer einfach so anfangen:

CSS

/* >> * << bedeutet so viel wie: für jedes Element */
*{
    margin 0;
    padding 0;
}
/* Hier dein ganzes CSS */
body{
    width: 90%;
}
/* bla bla bla :D */




/* --------------------------------------------------------- */
/* ein Beispiel für weitere Anwendungszwecke:
 * bedeutet so viel wie für jedes Element was innerhalb eines Div's liegt */
div *{
    color: red;
}

Alles anzeigen

gamester · 25. April 2014

Zitat von wolf

Genau richtig, dein Browser hat vordefinierte Werte für alle möglichen HTML Elemente, z.B. h1 hat so und so viel Margin...
Wenn du in Firefox unterwechs bist dann hol dir mal das Addon firebug und mach einen Rechtsklick auf eins der Div's -> Element mit firebug untersuchen
dann fährst du im angezeigten Quellcode über die Div's und siehe da du siehst alle definierten Margin's/Padding's..

Ok das wusste ich nicht mit den vordefinierten Werten. Gibt es da eine Liste oder so ? Sind diese Werte bei jedem Browser verschieden ?
Habe das ganze mit Firebug beriets untersucht aber nichts gefunden, Google Chrome hat ein ähnliches Tool bereits vorinstalliert.

Zitat

Zu deinem Problem, wie schon gesagt., dein Stylesheet immer einfach so anfangen:

CSS

/* >> * << bedeutet so viel wie: für jedes Element */
*{
    margin 0;
    padding 0;
}
/* Hier dein ganzes CSS */
body{
    width: 90%;
}
/* bla bla bla :D */




/* --------------------------------------------------------- */
/* ein Beispiel für weitere Anwendungszwecke:
 * bedeutet so viel wie für jedes Element was innerhalb eines Div's liegt */
div *{
    color: red;
}

Alles anzeigen

Danke das Problem ist nun gelöst
der Universalselector hats gerichtet

CSS

*{
    margin 0;
    padding 0;
}

wolf · 25. April 2014

Eine Liste? weis nicht :0
Verschiedene werte? JAAA, leider.
Firebug, ja der Wert wird nicht angezeigt aber man sieht gelbe/blaue Einfärbungen der Bereiche.
Nice!

Abstände (nach oben) können nicht entfernt werden: margin

Jetzt mitmachen!

Teilen