Hallo Leute,
ich würde gern mein Layout zentriert ausrichten. Dazu habe ich zur Zeit ich direkt unter dem body ein div mit class="Seite". Leider ist zwischen dem div und dem Body eine Lücke oben im Browser. Gibt es eine Möglichkeit den Abstand vom Div abschließend mit dem Browser-Fenster zu realisieren?
Im allgemeinen kurz und bündig wäre das so (der Code ist noch nicht optimal geschrieben und noch nicht final!)
ich würde gern mein Layout zentriert ausrichten. Dazu habe ich zur Zeit ich direkt unter dem body ein div mit class="Seite". Leider ist zwischen dem div und dem Body eine Lücke oben im Browser. Gibt es eine Möglichkeit den Abstand vom Div abschließend mit dem Browser-Fenster zu realisieren?
Im allgemeinen kurz und bündig wäre das so (der Code ist noch nicht optimal geschrieben und noch nicht final!)
HTML:
<html><head>
<link href="design.css" rel="stylesheet">
</head>
<body >
<div class="Seite">
<header>
<center><h1>Title</center></h1>
</header>
<nav>
Navigation
</nav>
<div class="main">
<article>
Artikel
</article>
<aside>
Infobox
</aside>
</div>
</div>
</body>
</html>
CSS:
body {
background-color: red;
font-family:sans-serif;
margin:0 auto;
max-width: 1024px;
}
.Seite{
background-color:ghostwhite;
margin-top: 0px;
}
.main{
display:flex;
flex-flow:row;
justify-content:space-between;
}
header{
margin:0px;
background-color: silver;
}
article{
display:flex;
height:100px;
justify-content: flex-start;
align-items:flex-start;
flex-basis:90%;
background-color: grey;
margin:10px;
padding:10px;
}
nav{
background-color: silver;
margin:10px;
}
aside{
display:flex;
justify-content:center;
align-items:center;
flex-basis:10%;
background-color:lightskyblue;
margin:10px;
margin-left:20px;
padding:10px;
border-left-style:solid ;
border-left-color: deepskyblue;
border-left-width: 1.5em;
}
