Hilfe ich habe einen Whitespace zwischen Header und Browserrand

html.de-Forum HTML, XHTML & CSS
1

Hallo zusammen,

ich bin ziemlich neu was HTML/CSS angeht. Ich habe auf einer Website soein interaktives Tutorial gemacht und versuche danach selbst eine simple HTML seite mit etwas CSS zu erstellen. Das Problem, ich habe zwischen dem Header, bzw Body und dem Browser nach oben hin einen Whitespace den ich ums Verrecken nicht weg bekomme. Ich habe schon erfahren das der Body standardmäßig einen margin wert hat und habe diesen auf 0px gesetzt. Das brachte zwar links und rechts an den Seiten etwas aber nach oben hin blieb der Whitespace bestehen.

Beim Screenshot hatte ich gerade den padding Wert von

auf 0px gesetzt, nicht das ihr euch wundert…

Vielen Dank für eure Zeit.

Hier noch was ich bisher verbrochen habe. :slight_smile:

[HTML]

MSS 
<link href="style.css" type="text/css" rel="stylesheet">

MSS

  • News
  • Über mich
  • Meine Projekte
  • Kontakt
[/HTML]

[CODE]header{
text-align: center;
background: blue;
background-size: cover;
color: white;
}
h1{
font-size: 44px;
padding: 100px;
}
ul{
padding: 10px;
background: black;
}
li{
display: inline;
font-size: 20px;
padding: 0px 15px 0px 15px;

}
body
{
margin: 0px;

}[/CODE]

2

Mach mal im body margin und padding auf 0. Deine Überschrift hat auch ein padding von 100px, nur mal so. Keine Ahnung ob das zwingend gewollt ist.

3

Margin und Padding mit dem Universalselektor zurücksetzen. Außerdem bietet sich der Einsatz einer reset.css oder normalize.css an.

4

Wie Tronjer bereits gesagt hat, solltest du dir eine CSS-Datei anlegen, die alle von den jeweiligen Browsern vordefinierte Werte auf 0 setzt. So ziemlich jedes HTML-Element ist von jedem Browserhersteller anders vordefiniert (margin, padding, Schriftgrößse, usw.).

Hier bekommst du die nötige Hilfe. Da bekommst du nicht nur die CSS-Dateien, sondern noch ein paar Kinkerlitzchen mehr (ob du diese wirklich brauchst, sei mal dahin gestellt).

5

Vielen Dank Leute, klasse Infos. In dem Fall hat der Universalselektor die Situation geklärt. :slight_smile: