Moin moin aus dem hohen Norden!
An einem Monitor in meiner gemütlichen Höhle ist der Footer nicht ganz unten im Desktop. Es handelt sich um einen Monitor mit der Auflösung 1920px x 1200px.
html-seminar.de/woltlab/attachment/1058/
...siehe die roten Pfeile.
Ich komme nicht dahinter, woran das liegt und erbitte Eure Hilfe.
Meine Homepage ist im "Responded Design" konzipiert.
HTML
<!DOCTYPE html>
<html>
<head>
.....
</head>
<body>
<section id="menubar">
<ul>
<li><a class="menubutton" href="#menu"><img src="images/png/menu-button001.png" alt="Menu" /></a></li>
</ul>
</section>
<nav class="nav">
<ul>
<li><a href="sides/inside01.php" class="active">Inside</a></li>
<li><a href="sides/songs01.php">Songs</a></li>
<li><a href="sides/video01.php">Videos</a></li>
<li><a href="sides/kontakt01.php">Kontakt</a></li>
</ul>
</nav>
<header>
<img src="images/png/LPK-001.png" alt="" />
</header>
<section id="main">
<article>
<?php
include("txt/article01.txt");
?>
</article>
<aside>
<section>
<?php
include("txt/aktuell01.txt");
?>
</section>
<section>
<?php
include("txt/termine01.txt");
?>
</section>
</aside>
</section>
<footer>
<ul>
<li><a href="sides/rechtliches01.php">Rechtliches</a></li>
<li><a href="sides/impressum-disclaimer01.php">Impressum/Disclaimer</a></li>
<li>© 2017 Lenni Paul Klimek</li>
</ul>
</footer>
</body>
</html>CSS
html {
width:100%;
height:100%;
background:url(../images/png/LenniPaulKlimek-2580x1731-001.png) center center fixed;
background-repeat:no-repeat;
-webkit-background-size:cover;
-moz-background-size:cover;
-o-background-size:cover;
background-size:cover;
}
body {
width:100%;
height:100%;
font-size:100%;
}
* {
padding:0em;
margin:0em;
}
/* ##### */
h1 {
font-size:2.5em;
line-height:1.8em;
font-family:Arial;
font-weight:100;
color:#ffffff;
margin:0em;
padding:1.25em;
text-align:left;
}
h2 {
font-size:1.563em;
line-height:1.8em;
font-family:Arial;
font-weight:100;
color:#ffffff;
margin:0em;
padding:1.25em;
text-align:left;
}
/* ### Nur fuer Kontakt-Fehler-Test ### */
h3 {
font-size:1.375em;
line-height:1.8em;
font-family:Arial;
font-weight:100;
color:#ffffff;
margin:0em;
padding:1.25em;
text-align:left;
}
/* ### */
p {
line-height:1.25em;
font-family:Arial;
font-weight:100;
color:#ffffff;
margin:0em;
padding:1.25em;
text-align:left; /*justify; */
}
/* ### Links-Einstellungen ### */
ul {
margin:0px;
padding:0px;
}
li {
list-style:square;
font-family:Arial;
font-weight:100;
color:#ffffff;
line-height:1.25em;
margin:0.313em 0em 0.313em 0em;
padding:0em;
}
img {
width:90%;
height:auto;
max-width:100%;
}
a:active, a:link, a:visited, a:focus, a:hover {
color: #ffffff;
text-decoration: none;
outline: none;
text-decoration:none;
}
/* ##### On Top Bar ##### */
#menubar {
display:block;
background:#333333;
}
#menubar ul {
display:block;
width:4.375em; /* Größe des Menu-Button */
padding:0.9em;
}
#menubar ul li {
display:inline;
}
#menubar ul li a.menubutton {
display:none;
}
/* ##### Navigation ##### */
nav {
display:block;
height:2.5em;
background:#333333;
text-align:center;
}
nav ul {
display:block;
}
nav ul li {
display:inline;
margin:0em 0.188em 0em 0.188em;
}
nav ul li a {
color:#ffffff;
font-size:1.125em;
line-height:2.5em;
padding:0.563em 0.938em 0.375em 0.983em;
transition:background 0.2s;
/* -webkit-transition:background 0.2s; */
}
nav ul li a:hover {
background:#333333;
border-bottom:0.188em solid #ffffff;
}
nav ul li a:active {
border-bottom:0.188em solid #ff0000; /* #E7590B */
}
/* ##### Header ##### */
header {
display:block;
/* background:#333333; */
text-align:center;
}
header img {
width:90%;
height:auto;
max-width:560px;
}
/* ##### Content Area ##### */
#main {
display:block;
width:96%;
max-width:980px;
margin:1.25em auto;
padding:0em;
}
#main article {
display:inline-block;
width:65.3%;
/* background:#333333; */
vertical-align:top;
margin:0em;
padding:0em;
text-align:center;
}
#main article img {
width: 100%;
height: auto;
}
#main aside {
display:inline-block;
width:30.6%;
margin-left:3%;
padding:0em;
vertical-align:top;
}
#main aside section {
margin-bottom:1.563em;
/* background:#333333; */
border-bottom:0.125em solid #ffffff;
}
#main article h2 {
padding:1em 1.8em 1em 1.8em;
}
#main aside section ul {
padding:0em 1.875em 1.25em 2.5em;
}
/* ##### Kontaktformular ##### */
table {
text-align:left;
padding:1.25em;
margin:0em;
width:80%;
height:auto;
max-width:90%;
}
p1 {
font-family:Arial;
font-weight:100;
color:#ffffff;
}
input[type="text"]{
background:#EEE;
width: 100%;
}
textarea {
background:#EEE;
width:100%;
}
input[type="submit"] {
background:#DDD;
color:#ff0000;
font-size:100%;
font-weight:bold;
}
/* ##### Footer ##### */
footer {
display:block;
background:#333333;
text-align:center;
bottom:0px;
}
footer ul {
display:block;
width:100%;
max-width:980px;
text-align:center;
margin:0px auto;
}
footer ul li {
display:inline;
font-size:0.8em;
line-height:2.8em;
color:#ffffff;
padding:0em 0.625em 0em 0.625em;
}
footer ul li a {
color:#ffffff;
}
/* ##### Mobile Style ##### */
@media screen and (max-width:800px) {
html {
background-image: url(../images/png/LenniPaulKlimek-800x537-001.png);
}
body {
font-size:90%;
}
}
@media screen and (max-width:600px) {
#main aside, #main article {
width:100%;
display:block;
margin:0.625em 0em 0.625em 0em;
}
#main article {
border-bottom:0.125em solid #ffffff;
}
}
@media screen and (min-width:550px) {
nav.nav {
display:block !important;
}
}
@media screen and (max-width:550px) {
html {
background-image: url(../images/png/LenniPaulKlimek-500x336-001.png);
}
body {
font-size:86%;
}
header img {
height:100%;
}
#menubar ul li a.menubutton {
display:block;
}
nav {
display:none;
height:auto;
}
nav ul li {
display:block;
margin:0.3em 0em 0.3em 0em;
}
p1{
font-size:80%;
}
}Danke Euch Allen!
