Hallo beisammen,
Nachdem ich mich in CSS3 und RWD eingelesen habe und auch endlich das Menü so hinbekommen habe wie ich es wollte, kommt jetzt der nächste Hacken, den ich einfach nicht hin bekomme (zumindest bis jetzt). Diesmal kann ich einen Schreibfehler (siehe mein Menüproblem) ausschließen:
Folgender Link habe ich schon mal eingestellt, damit man sich das "live" ansehen kann: http://einsterneinberg.de/test/rwd/Bildergalerie-test.htm
Die Seite ist nur zum Testen gedacht; somit gehen die dort aufgeführten links ins Leere. Auch die angeführte jQuery funktioniert nicht (auch so gewollt, da nicht Teil der Frage).
A.) Hauptproblem: Die Fußzeile funktioniert hervorragend: Beim verändern der Bildschirmgröße bleibt Sie brav, wie von mir gewollt am unteren Rand hängen. ABER: wenn man runter scrollt - bleibt die Zeile an der Stelle auch stehen und verrutscht eben nicht wieder an den unteren Bildschirmrand.
B.) Kleines zusätzliches Problem (bitte aber zweitrangig): Wenn ich die Seite auf meinem Smartphone (Samsung S5) öffne und nach rechts scrolle wird das Hintergrundbild verhunzt. Auch hier habe ich noch keine gute Lösung gefunden (getestet habe ich die auskommentierte Version mit #hintergrund - siehe Code - funktioniert aber auch nicht so richtig).
Die CSS Datei hänge ich hier an:
Code
/* Universalselektoren setzten, um alle Browser auf "Null" zu setzten*/
* {
margin: 0;
padding: 0;
}
/* Fuer alte Browser */
header, nav, footer, article, aside {
display: block;
}
/* Definition des kompletten Bildschirmes*/
html, body {
background-image: url(bilder/Rund.jpg);
background-attachment: fixed;
background-size: cover;
font-family: 'Roboto', sans-serif;
height: 100%;
text-align: center; /* wegen alter IE-Versionen */
}
/*Definition der Aktion bei verkleinertem Bildschirm (z.B. Smartphones, etc.)*/
@media only screen and (max-width: 40em) {
body, article {
width: 100%;
}
#mobilanzeige {
position: absolute;
left: -15em;
width: 25em;
}
#einsterneinbergmobil {
display: block;
background-color: green;
position: absolute;
border-radius: 20px 0px;
height: 3.3em;
width: 3.3em;
}
#sternbergbox, #einsterneinbergbox {
display: none;
}
header {
height: 6em;
}
#ueberschrift p {
padding: 0.9em 0.1em 0.1em 2.5em;
font-size: 2em;
}
/* CSS erweitern um Menu Button */
nav {
display: none;
}
.menue-button {
width: 15em;
display: block;
background-color: green;
color: white;
position: absolute;
left: 1em;
top: 0;
cursor: pointer;
text-decoration: none;
}
.menue-button:hover {
font-weight: bold;
background-image: url(bilder/dreieck.gif);
background-repeat: no-repeat;
background-position: right center;
text-transform: uppercase;
animation-name: steuerung-animation;
animation-duration: 2s;
}
#steuerung p {
font-size: 1em;
}
#nav-menue:target nav {
display: block;
float: none;
}
#nav-menue:target .menue-button-beschreibung-open {
display: none;
}
}
/* Hintergrund bei Smartphones, hier speziell für Samsung S5 - Noch UNKLAR!!*/
/*#hintergrund {
z-index: -1;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-size: cover;
background-image: url(bilder/Rund.jpg);
background-attachment: fixed;
}*/
#seite {
position: relative;
min-height: 100%;
margin: 0 auto;
/* Wenn gewollt: Diese Zeile einfügen, dann wird die Seite zentriert angegeben: -- width: 800px;*/
text-align: left; /* wegen alter IE-Versionen */
}
h1 {
color: #656565;
font-size: 2em;
}
h2 {
color: black;
font-size: 1.5em;
}
h3 {
color: blue;
font-size: 3em;
font-family: 'Waiting for the Sunrise', cursive;
}
#einsterneinbergmobil {
position: absolute;
left: 1em;
top: 1.9em;
}
#einsterneinbergmobil p {
color: white;
padding: 0.5em 0.5em 0.5em 0.5em;
font-size: 0.7em;
text-align: left;
}
#einsterneinbergbox {
background-color: green;
position: absolute;
left: 1em;
top: 1em;
height: 9.375em;
width: 9.375em;
border-radius: 50px 0px;
transition: all 5s 1s ease;
}
#einsterneinbergbox p {
color: white;
padding: 0.7em 0.5em 0.5em 0.5em;
font-size: 2em;
text-align: left;
text-shadow: 3px 3px 3px black;
transition: all 5s 1s ease;
}
#einsterneinbergbox:hover,
#einsterneinbergbox p:hover {
opacity: 0;
}
#sternbergbox {
background-image: url(bilder/einsterneinberg-bild-logo-v2.jpg);
position: absolute;
left: 1em;
top: 1em;
height: 9.375em;
width: 9.375em;
border-radius: 50px 0px;
}
#sternbergbox p {
padding: 3.7em 0.2em 0.2em 0.5em;
font-size: 1.5em;
color: white;
text-shadow: 2px 2px 2px black;
}
#steuerung a p {
padding-left: 1em;
}
#neupost {
height: 8em;
width: 11em;
position: absolute;
left: 25em;
top: -8em;
background-image: linear-gradient(darkgrey 2%, yellow 8%);
box-shadow: 1em 1em 1em black;
transform: rotate(-10deg);
transform-origin: bottomright;
animation: neuposteinblenden 4s 3s 2 alternate ease;
}
@keyframes neuposteinblenden {
0% {
right: 0;
}
90% {
left: 2em;
top: 0;
transform: rotate(20deg);
}
95% {
left: 2em;
top: 0;
transform: rotate(-20deg);
}
100% {
left: 2em;
top: 0;
transform: rotate(20deg);
}
}
#neupost p {
color: blue;
font-size: 2em;
line-height: 1em;
font-weight: bolder;
font-family: 'Waiting for the Sunrise', cursive;
text-align: left;
padding: 0 0 0 0.5em;
}
header {
width: 100%;
}
#ueberschrift {
height: 7.3em;
}
header p {
color: white;
text-shadow: 2px 2px 10px black;
padding: 0.3em 0.1em 0.1em 4.1em;
font-size: 4em;
}
#steuerung {
display: block;
}
nav {
margin-top: 1em;
width: 14.5em;
float: left;
}
nav a {
color: white;
text-shadow: 1px 1px 4px black;
text-decoration-line: none;
display: inline-block;
width: 100%;
padding-left: 1em;
box-sizing: border-box;
line-height: 1.7em;
}
nav a:hover {
font-weight: bold;
background-image: url(bilder/dreieck.gif);
background-repeat: no-repeat;
background-position: right center;
text-transform: uppercase;
animation-name: steuerung-animation;
animation-duration: 2s;
}
@keyframes steuerung-animation {
0% {color: lightgreen}
50% {color: limegreen}
100% {color: darkgreen}
}
nav a:active {
color: yellow;
}
.neunav {
height: 1.5em;
width: 4.2em;
background-color: yellow;
box-shadow: 0.5em 0.5em 0.5em black;
margin: -1.5em 0 0 160px;
transform-origin: left bottom;
transform: rotate(-25deg);
}
.neunav p {
color: blue;
font-size: 1em;
line-height: 1em;
font-weight:bolder;
font-family: 'Waiting for the Sunrise', cursive;
text-align: left;
padding: 0.3em 0 0 0.1em;
}
.schatten {
box-shadow: 0 -4px 6px white;
/*background-image: url(bilder/schatten.png);
height: 12px;
margin-left: 190px;
UNBEDINGT im ORIGINAL LÖSCHEN --- an kopfsteuerung.htm denken: <article class="schatten"> einbauen*/
}
article {
background-color: white;
position: absolute;
left: 14.5em;
margin: 0 0;
color: black;
font-size: 1em;
width: max-width;
padding: 0.1em 1em 2em 2em;
}
article h1,
article h3,
article p {
margin: 0.4em 0;
}
article ol,
article ul{
line-height: 1.5em;
padding-left: 2em;
}
small {
font-size: 0.5em
}
footer {
background-color: #656565;
color: white;
line-height: 2em;
font-size: 1em;
padding-left: 1em;
position: absolute;
bottom: 0;
width: 100%;
height: 2em;
clear: both;
}Falls ich den HTML Code anhängen soll, bitte kurz melden.
Schon jetzt ein Danke wieder an die Profis hier im Forum