CSS Fehlermeldungen
Hallo liebe Leser/in,
ich habe erst kürzlich mein Stylesheet hier jigsaw.w3.org/css-validator/
validiert und der Validator hat 17 Fehler gefunden, davon wurden drei von mir behoben.
Ich habe viele Dinge ausprobiert, aber nichts hat geholfen...vlt weil ich noch ein
Anfänger bin? Mein HTLM-Code ist in Ordnung, aber mein Stylesheet könnte Hilfe gebrauchen.
Könnt ihr mir weiterhelfen?
Hier sind die Fehlermeldungen:
jigsaw.w3.org/css-validator/validator
und hier die von dieser Seite (vlt könnt ihr die Seite nicht aufrufen):
jigsaw.w3.org/css-validator/validator
Hier mein Stylesheet:
[CSS]
/* Seite wechseln */
.weiter{
text-align:center;
}
#pfeilrechts{
width:50px;
height:20px;
margin-left:20px;
}
.zurück{
text-align:center;
}
#pfeillinks{
width:50px;
height:20px;
margin-right:20px;
}
/* Überschrift wechseln */
p.strong{
font-weight:bold;
margin-left:50px;
text-decoration:underline;
}
/* Formatierung für Laufband */
.bild{
width:190px;
height:150px;
}
/* Links */
/* Datenschutzerlklärung */
div.schutz a:link,div.schutz a:active,div.schutz a:visited { text-decoration:none; color : #FFFFFF; }
div.schutz a:hover { font-weight: bold; text-decoration: underline; color : #FF0000; }
/* Quellenangaben */
p.quelle a:link,p.quelle a:active,p.quelle a:visited { text-decoration:none; color : blue; }
p.quelle a:hover { font-weight: bold; text-decoration: underline; color : #FF0000; }
/* Jahreszahlen Rilke */
span.rilke{
font-weight: bold;
font-size:15px;
font-style:normal;
font-family:Georgia;
color:grey;
}
/* Button-Stylesheet */
/* Butonskofiguration */
#button-rilk {
background: #aebbc4;
background-image: -webkit-linear-gradient(top, #aebbc4, #0071b8);
background-image: -moz-linear-gradient(top, #aebbc4, #0071b8);
background-image: -ms-linear-gradient(top, #aebbc4, #0071b8);
background-image: -o-linear-gradient(top, #aebbc4, #0071b8);
background-image: linear-gradient(to bottom, #aebbc4, #0071b8);
-webkit-border-radius: 25;
-moz-border-radius: 25;
border-radius: 25px;
text-shadow: 3px 3px 3px #424042;
-webkit-box-shadow: 3px 4px 3px #000000;
-moz-box-shadow: 3px 4px 3px #000000;
box-shadow: 3px 4px 3px #000000;
font-family: Arial;
color: #ffffff;
font-size: 25px;
padding: 20px 20px 20px 20px;
border: solid #1f628d 4px;
text-decoration: none;
text-align: center;
}
#button-rilk:hover {
background: #fce23c;
background-image: -webkit-linear-gradient(top, #fce23c, #0071b8);
background-image: -moz-linear-gradient(top, #fce23c, #0071b8);
background-image: -ms-linear-gradient(top, #fce23c, #0071b8);
background-image: -o-linear-gradient(top, #fce23c, #0071b8);
background-image: linear-gradient(to bottom, #fce23c, #0071b8);
text-decoration: none;
}
#button-mod {
background: #aebbc4;
background-image: -webkit-linear-gradient(top, #aebbc4, #0071b8);
background-image: -moz-linear-gradient(top, #aebbc4, #0071b8);
background-image: -ms-linear-gradient(top, #aebbc4, #0071b8);
background-image: -o-linear-gradient(top, #aebbc4, #0071b8);
background-image: linear-gradient(to bottom, #aebbc4, #0071b8);
-webkit-border-radius: 25;
-moz-border-radius: 25;
border-radius: 25px;
text-shadow: 3px 3px 3px #424042;
-webkit-box-shadow: 3px 4px 3px #000000;
-moz-box-shadow: 3px 4px 3px #000000;
box-shadow: 3px 4px 3px #000000;
font-family: Arial;
color: #ffffff;
font-size: 25px;
padding: 20px 20px 20px 20px;
border: solid #1f628d 4px;
text-decoration: none;
text-align: center;
}
#button-mod:hover {
background: #fce23c;
background-image: -webkit-linear-gradient(top, #fce23c, #0071b8);
background-image: -moz-linear-gradient(top, #fce23c, #0071b8);
background-image: -ms-linear-gradient(top, #fce23c, #0071b8);
background-image: -o-linear-gradient(top, #fce23c, #0071b8);
background-image: linear-gradient(to bottom, #fce23c, #0071b8);
text-decoration: none;
}
/* Butonstypen */
.curl-top-left {
display: inline-block;
position: relative;
-webkit-transform: translateZ(0);
transform: translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.curl-top-left:before {
position: absolute;
content: '';
height: 0px;
width: 0px;
top: 0px;
left: 0px;
background: white;
/* IE9 */
background: linear-gradient(135deg, white 45%, #aaaaaa 50%, #cccccc 56%, white 80%);
filter: progid
XImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#ffffff', endColorstr='#000000');
/* Für IE7-8-9 */
z-index: 1000;
box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.4);
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-property: width, height;
transition-property: width, height;
}
.curl-top-left:hover:before, .curl-top-left:focus:before, .curl-top-left:active:before {
width: 25px;
height: 25px;
}
.curl-top-right {
display: inline-block;
position: relative;
-webkit-transform: translateZ(0);
transform: translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.curl-top-right:before {
position: absolute;
content: '';
height: 0px;
width: 0px;
top: 0px;
right: 0px;
background: white;
/* IE9 */
background: linear-gradient(225deg, white 45%, #aaaaaa 50%, #cccccc 56%, white 80%);
box-shadow: -1px 1px 1px rgba(0, 0, 0, 0.4);
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-property: width, height;
transition-property: width, height;
}
.curl-top-right:hover:before, .curl-top-right:focus:before, .curl-top-right:active:before {
width: 25px;
height: 25px;
}
body{
background-image:url(http://scotty.qg-moessingen.de/~haapan/Projektaufgaben/Bilder/Items/weihnachtsmuster.png);
}
#section {
background-image:url(http://scotty.qg-moessingen.de/~haapan/Projektaufgaben/Bilder/Rilke/rilke.jpg);
}
#article{
background-image:url(http://scotty.qg-moessingen.de/~haapan/Projektaufgaben/Bilder/Modellierung/hotels.jpg);
}
.laufband {width:1000px; height:150px; overflow:hidden; position:relative; border:5px solid #aaa; margin:21px auto;
-moz-box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.7);
-webkit-box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.7);
box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.7);
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
border-radius: 8px;
background:#4ad;
background-image: -webkit-gradient(linear, 0% 0%, 0% 95%, from(rgba(255, 255, 255, 0.7)), to(rgba(255, 255, 255, 0)));
background-image: -moz-linear-gradient(rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0));
background-image: -o-linear-gradient(rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0));
background-image: linear-gradient(rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0));
}
.scroller {display:block; width:1800px; height:40px; position:absolute; left:0; top:0;
-moz-animation-iteration-count: infinite;
-moz-animation-timing-function: linear;
-moz-animation-duration:10s;
-moz-animation-name: scroll;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-webkit-animation-duration:25s;
-webkit-animation-name: scroll;
animation-iteration-count: infinite;
animation-timing-function: linear;
animation-duration:10s;
animation-name: scroll;
}
.scroller div {font-family:georgia, serif; font-size:16px; line-height:40px; float:left; width:600px; color:#000; font-weight:bold; padding:0 10px;}
.scroller div a {color:#c00;}
.scrollerend div{font-family:georgia, serif; font-size:16px; line-height:40px; float:left; width:600px; color:#000; font-weight:bold; padding:0 10px;}
@-moz-keyframes scroll {
0% {left:0;}
100% {left:-620px;}
}
@-webkit-keyframes scroll {
0% {left:0;}
100% {left:-620px;}
}
@-o-keyframes scroll {
0% {left:0;}
100% {left:-620px;}
}
.scroller:hover {
-moz-animation-play-state: paused;
-webkit-animation-play-state: paused;
animation-play-state: paused;
}
[/CSS]
Das war mein erstes Problem und ich machen auch weiter :oops:
Meine Seite sollte so aussehen (siehe Seitenbild1), mit 15.6" Laptop,
aber sie sieht manchmal so aus (siehe Seitenbild2), mit 27" Monitor.
Meine Seite passt sich gar nicht an, stattdessen "verschiebt" sie sich nach links oben,
obwohl man von "verschieben" gar nicht sprechen kann, da sie ja immer ihre Ursprungsform (15.6") behält. Ich habe schon mit "%" experimentiert, aber die Ergebnisse waren nicht
vielversprechend. Alles, was ich will, ist...er sollte so aussehen (siehe Seitenbild1) und das immer, egal was für ein Monitor, mit Ausnahme von Smartphones etc.
Schaut euch die Seite einfach an:
scotty.qg-moessingen.de/~haapan/Projektaufgaben/HTML/projektaufgaben.html
Beitrag erstellen
EinloggenKostenlos registrieren