Doch ist leider so, auf dem Laptop und den Mittelgroßen Monitor passt der untere Abstand perfekt mit 4px nur auf den großen Monitor da wird aus den 4px ungefähr 20px bis 30px...
Da weiß ich leider auch nicht mehr weiter....
<!doctype html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>XXXXXXXXXXXXXXXXX XXXXXXXX</title>
<meta name="Description" content="XXXXXXXXXXXXXXXXX XXXXXXXX">
<meta name="viewport" content="width=device-width" initial-scale="1.0">
<link rel="stylesheet" type="text/css" href="html.css">
</head>
<body>
<!-- Kommentar im sichtbaren Bereich -->
<header>
<nav>
<img src="http://lorempixel.com/70/70/" width="10" height="20" alt="XXXXXXXXXXXXXXXXX XXXXXXXX">
<b>XXXXXXXXXXXXXXXXX XXXXXXXXÂ </b>
<a href="#">Home</a>
<a href="#"> Angebot</a>
<a href="#"> Blog</a>
<a href="#"> Rundgang</a>
</nav>
</header>
<main>
<article>
<h1>XXXXXXXXXXXXXXXXX XXXXXXXX</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>Wer bin ich?</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>Was kann ich für Sie tun?</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>Behandlung1</li>
<li>Behandlung2</li>
<li>Behandlung3</li>
<li>Behandlung4</li>
<li>Behandlung5</li>
<li>Behandlung6</li>
<li>Behandlung7</li>
</ul>
<h3>Wie können Sie mich finden?</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>
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>
</article>
</main>
<footer>
</footer>
</body>
</html>
Alles anzeigen
/*CSS zur Uebung */
body {
/* Hintergrundbild */
background:url(ba.jpg) no-repeat;
background-size: cover;
margin: 0px;
}
article {
/* Kompletter Artikelblock */
background: hsla(360,0%,96%,0.6);
width: 70%;
margin: auto;
margin-top: 75px;
margin-bottom: 4px;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
border-radius: 15px;
padding: 20px;
}
header {
/* Anweisung fuer die Navigationsleiste */
background: hsla(360,0%,96%,1.0);
padding: 9px;
margin: 0px;
}
h1, h3, p, ul, nav {
/* Anweisung fuer saemtliche Textfarben, siehe Selektoren */
color:#43182b;
font-family:arial, "lucida console", sans-serif;
}
h1 {
/* Anweisung fuer die Ueberschrift */
font-size:28pt;
display: inline;
}
h3 {
/* Anweisung fuer die Ueberschrift */
font-weight: normal;
font-size:14pt;
}
p, ul {
/* Schriftgroesse, siehe Selektoren */
font-size:9pt;
}
a:link, a:visited, a:active {
/* Anweisung fuer die Links, sind bisher alle einfarbig, da auf dem Screenhot nicht alle Farben zu definieren sind */
color:#43182b;
font-size:9pt;
font-family:arial, "lucida console", sans-serif;
text-decoration: none;
}
a:hover {
/* Effekt fuer den Mouseover in der Navigationsleiste */
border-with: 4px;
color: black;
background-color: gray;
padding: 11px;
padding-top: 18px;
}
nav {
/* Anweisung in der Navigationsleiste */
font-size:11pt;
}
Alles anzeigen
