top funktioniert leider nicht, denn ich wollte den Artikel Container weiter unten, von oben ausgesehen platzieren, wer hat Rat? THX!
HTML
<!doctype html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>TITEL</title>
<link rel="stylesheet" type="text/css" href="html.css">
</head>
<body>
<!-- Kommentar im sichtbaren Bereich -->
<header>
<img src="logo.gif" alt="">
<nav>
XXXXXXXXXXXXXXXXXXXXXXÂ
<a href="#">Â Home </a>
<a href="#">Â Angebot </a>
<a href="#">Â Blog </a>
<a href="#">Â Rundgang </a>
</nav>
</header>
<main>
<div id="container">
<article>
<div id="artikel">
<h1>XXXXXXXXXXXXXXXXXXXXXXXXX</h1>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam<br>
erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est<br>
Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et<br>
dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea<br>
takimata.
</p>
<h3>XXXXXXXXXXXXXXXXXXXX</h3>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam<br>
erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est<br>
Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et<br>
dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea<br>
takimata.
</p>
<h3>XXXXXXXXXXXXXXXXXXXXXXX</h3>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam<br>
erat, sed diam voluptua.
<ul> <li>xxxxxxxxxxxx</li>
<li>xxxxxxxxxxxxxxxxxx</li>
<li>xxxxxxxxxx</li>
<li>xxxxxxxxxxx</li>
<li>xxxxxxxxxxxxx</li>
<li>xxxxxxxxx</li>
<li>xxxxxxxxxxxxxx</li>
</ul>
</p>
<h3>XXXXXXXXXXXXXXXXXXXXXXXXXX</h3>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam<br>
erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est<br>
Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et<br>
dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea<br>
takimata.
</p>
</div>
</article>
</div>
</main>
<footer>
</footer>
</body>
</html>CSS
body {
background:url(ba.jpg) no-repeat;
background-size: cover;
}
#container {
background: hsla(360,0%,96%,0.6);
top: 120px;
width: 70%;
margin: auto;
-moz-border-radius: 40px;
webkit-border-radius: 40px;
border-radius: 40px;
}
header {
background: hsla(360,0%,96%,0.9);
position: absolute;
top: 1px;
left: 1px;
right: 1px;
height: 40px;
}
a:link {
color: black;
text-decoration: none;
}
a:visited {
color: gray;
text-decoration: none;
}
a:active {
color: red;
text-decoration: none;
}
a:hover {
border-with: 4px;
color: blacK;
background-color: gray;
padding: 20px 0px;
}
#artikel {
padding: 20px;
}