Hallo beisammen,
ich habe da etwas, was ich nicht verstehe; - aber mal der Reihe nach:
1. Ich habe mir einfach mal meine eigene Internetseite programmiert; - einfach zum Spaß und zum ausprobieren: http://www.einsterneinberg.de
2. Gerne könnt ihr da mal drauf und mich bitte konstruktiv kritisieren. Aber Vorsicht;- bin noch nicht überall so weit.
3. Parallel habe ich eine gute Bekannte, für die ich mal eine ganz banale Webseite programmiere. Hier habe ich zuerst ausprobiert mit dem fix fixierten Hintergrundbild - und es funktionniert.
4. Dann habe ich das auch bei meiner Internetseite integriert: Funktionniert bei Firefox und IE --- ABER nicht bei Chrome?? Interessanterweise klappt es wenn ich es über XAMPP mit localhost in Chrome ohne Problem.
Warum ist das so? Habe ich einen Programmierfehler gemacht?
Die CSS Datei hier anbei:
/* 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: 100% 100%;
font-family: 'Roboto', sans-serif;
height: 100%;
text-align: center; /* wegen alter IE-Versionen */
}
#seite {
position: relative;
min-height: 100%;
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;
}
#einsterneinbergbox {
background-color: green;
position: absolute;
left: 1em;
top: 1em;
height: 150px;
width: 150px;
}
#einsterneinbergbox p {
color: white;
padding: 0.5em;
font-size: 2em;
text-align: left;
}
#einsterneinbergbox:hover,
#einsterneinbergbox p:hover {
opacity: 0;
}
#sternbergbox {
background-image: url(bilder/einsterneinberg-bild-logo-v2.jpg);
position: absolute;
left: 1em;
top: 1em;
height: 150px;
width: 150px;
}
#sternbergbox p {
padding: 3.7em 0.2em 0.2em 1em;
font-size: 1.5em;
color: white;
}
#ueberschrift {
height: 150px;
width: 350px;
position: absolute;
left: 150px;
top: 0;
}
header {
width: 100%;
height: 190px;
}
header p {
color: white;
text-shadow: 2px 2px 10px black;
padding: 0.6em 0.1em 0.1em 1.3em;
font-size: 4em;
text-align: left;
}
nav{
width: 190px;
float: left;
margin: 0 auto;
padding-top: 2em;
}
nav ul {
padding: 0;
}
nav li {
font-size: 1.1em;
color: green;
line-height: 1.5em;
list-style-type: none;
display:inline-block;
padding-left: 1em;
height: 1.5em;
width: 10em;
line-height: 1.5em;
}
nav a {
color: white;
text-decoration-line: none;
}
nav a:link {
color: white;
}
nav a:visited {
color: green;
}
nav a:hover {
color: lightsteelblue;
text-decoration:underline;
text-transform: uppercase;
}
nav a:active {
color: yellow;
}
.schatten {
background-image: url(bilder/schatten.png);
height: 12px;
margin-left: 190px;
}
article {
margin: 0px 0px 0px 190px;
color: black;
font-size: 1em;
background-color: white;
padding: 0.1em 1em 2em 3em;
}
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;
}
Alles anzeigen
Danke für konstruktive Hilfe