I3lackI2eborn
Themenersteller
Beginner (11 Beiträge)

CSS Fehlermeldungen

am 09.01.2015, 17:46 Uhr eröffnete I3lackI2eborn folgenden Thread
HTML5 & CSS    5704 mal gelesen    13 Antwort(en).

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: progidXImageTransform.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


I3lackI2eborn
Beginner (11 Beiträge)
am 09.01.2015, 17:47 Uhr schrieb I3lackI2eborn

Hier kommen weitere Bilder:


I3lackI2eborn
Beginner (11 Beiträge)
am 09.01.2015, 17:48 Uhr schrieb I3lackI2eborn

I3lackI2eborn schrieb:

Hier kommen weitere Bilder:


I3lackI2eborn
Beginner (11 Beiträge)
am 09.01.2015, 17:48 Uhr schrieb I3lackI2eborn

I3lackI2eborn schrieb:

I3lackI2eborn schrieb:

Hier kommen weitere Bilder:



I3lackI2eborn
Beginner (11 Beiträge)
am 09.01.2015, 17:49 Uhr schrieb I3lackI2eborn

I3lackI2eborn schrieb:

I3lackI2eborn schrieb:

I3lackI2eborn schrieb:

Hier kommen weitere Bilder:




I3lackI2eborn
Beginner (11 Beiträge)
am 09.01.2015, 17:51 Uhr schrieb I3lackI2eborn

I3lackI2eborn schrieb:

I3lackI2eborn schrieb:

I3lackI2eborn schrieb:

I3lackI2eborn schrieb:

Die Fehlermeldungen:





matthes
Avatar matthes
Foren Moderator
Evil Genius
Content Halbgott (973 Beiträge)
am 09.01.2015, 17:52 Uhr schrieb matthes

Wir machen hier sicher keine Hausaufgaben für andere.


Make Seitenreport great again!

I3lackI2eborn
Beginner (11 Beiträge)
am 09.01.2015, 17:52 Uhr schrieb I3lackI2eborn

Zu Problem 2:
Bilder:


I3lackI2eborn
Beginner (11 Beiträge)
am 09.01.2015, 17:53 Uhr schrieb I3lackI2eborn

Zu Problem 2:
Bilder:


I3lackI2eborn
Beginner (11 Beiträge)
am 09.01.2015, 17:56 Uhr schrieb I3lackI2eborn

Ich habe meine Aufgaben schon gemacht und will nur Tipps, um meine Fehler zu korrigieren.
Ist das schlimm? Ich habe schon viele Sachen ausgetestet und komme einfach nicht weiter...
Ich habe meine Seite schon "abgegeben (Weihnachten ist schon vorüber) und jetzt will
ich meine Seite einfach nur verbessern. Zu viel verlangt?


matthes
Avatar matthes
Foren Moderator
Evil Genius
Content Halbgott (973 Beiträge)
am 09.01.2015, 19:26 Uhr schrieb matthes

Na, dann ist das was anderes. Auch wenn der Beitrag _etwas_ unübersichtlich ist...

Die erste Fehlermeldung bezieht sich auf die Schreibweise der Microsoft-Gradient-Anweisung. Der Validator mag nicht, wenn da plötzlich noch ein Doppelpunkt vorkommt. Das ist ohnehin eine ziemlich unnötige Anweisung. Die ersten drei Fehler lassen sich entfernen, indem man die ganze Zeile 1044 löscht.

Den Fehler in Zeile 1047 kann ich auf den ersten Blick nicht ganz nachvollziehen, es könnte aber sein, dass es daran liegt, dass box-shadow eigentlich vier Maßangaben benötigt, aber nur drei vorhanden sind. Probiere einfach mal aus, eine hinzuzufügen. Gut möglich, dass sich die Fehler der folgenden Zeilen dann auch auflösen.

Die restlichen Probleme verstehe ich nicht ganz.
Eine Angabe der Maße in Prozent, also eine relative Angabe, wäre ein richtiger Weg gewesen. Was ist daran denn verkehrt?
Es ist leider kein "Seitenbild2.png" vorhanden.

Vielleicht erklärst Du Deine Schwierigkeiten noch einmal ausführlicher?


Make Seitenreport great again!



« zurück zu: HTML5 & CSS

Das Seitenreport Forum hat aktuell 5274 Themen und 36108 Beiträge.
Insgesamt sind 48348 Mitglieder registriert.