Bourbon
Mitglied
Hallo Leute,
ich will gerade den Header formatieren.
Aber irgendwie gibt es immer einen Abstand zwischen HTML und Body.
Und egal, was ich einstelle, es ändert sich nichts (jedenfalls der Abstand nicht).
Hier der Code der index.php
Und hier der Code der main.css:
Die Änderungen bei margin; padding; top oder position haben alle nichts gebracht.
Das kann doch nicht so schwer sein. Was bitte übersehe ich da schon wieder?
Wenn ich mir bspw. den CSS-Code der Google-Suche anschaue, erkennen ich kaum einen Unterschied.
NACHTRAG:
Das der Header als Liste und den Prozentangaben totaler Mist ist, weiß ich selbst, deswegen will ich den ja auch überarbeiten. Das werden einzelne Divs, die durch display: flex dann nebeneinander liegen. Also das einfach nicht beachten.
ich will gerade den Header formatieren.
Aber irgendwie gibt es immer einen Abstand zwischen HTML und Body.
Und egal, was ich einstelle, es ändert sich nichts (jedenfalls der Abstand nicht).
Hier der Code der index.php
HTML:
<!DOCTYPE html>
<title>Frontend</title>
<html lang="de">
<head>
<link href="styles/main.css" rel="stylesheet" type="text/css" />
<meta name="Content-Type" content="text/html"; charset="UTF-8"/>
</head>
<header>
<ul id='headerleiste'>
<li id='header_links'><input type="button" value="Platzhalter" class='noBorder' /></li>
<li id='header_mitte'>Header</li>
<li id='header_rechts'><button class='noBorder' > + </button></li>
</ul>
</header>
<div class='main'> <!--div['main' wird geöffnet]-->
<p>hier steht ein Testtext</p>
<hr>
<p>hier steht ein Testtext</p>
<hr>
<p>hier steht ein Testtext</p>
<hr>
</div> <!--div['main' wird geschlossen]-->
</body>
</html>Und hier der Code der main.css:
Code:
body {
margin: 0px;
background-color: #f0f3f8;
top: 0;
padding: 0;
}
.main {
margin-top: 5px;
z-index: 1;
}
header {
margin: 0;
background-color: #3d7ee8;
height: 30px;
z-index: 2;
position: fixed;
width: 100%;
}
#headerleiste {
text-align: center;
padding: 0;
margin-bottom: 0px;
margin-top: 0px;
width: 100%;
height: 30px;
}
#headerleiste li {
display: inline-block; /*inline-block*/
list-style-type: none;
margin: 0;
color: white;
height: 30px;
vertical-align: middle;
text-align: middle;
}
<!-- /* display:flex; ausprobieren */
#header_links {
width: 27%;
text-align: left;
}
#header_mitte {
width: 42%;
font-weight: bold;
}
#header_rechts {
width: 27%;
text-align: right;
}Die Änderungen bei margin; padding; top oder position haben alle nichts gebracht.
Das kann doch nicht so schwer sein. Was bitte übersehe ich da schon wieder?
Wenn ich mir bspw. den CSS-Code der Google-Suche anschaue, erkennen ich kaum einen Unterschied.
NACHTRAG:
Das der Header als Liste und den Prozentangaben totaler Mist ist, weiß ich selbst, deswegen will ich den ja auch überarbeiten. Das werden einzelne Divs, die durch display: flex dann nebeneinander liegen. Also das einfach nicht beachten.
