Zum Inhalt springen
ThreadHTML5 & CSS

CSS Fehlermeldungen

Kategorie
HTML5 & CSS
Antworten
13
Verfasst von: ehemaliges Mitglied Datum: 09.01.2015, 17:46 Uhr
Archiv-KommentarArchiviert, nicht priorisiertHTML5 & CSS

Redaktionelle Einordnung

Diese archivierte Diskussion behandelt CSS Fehlermeldungen aus Sicht der Rubrik HTML5 & CSS.

Die Diskussion bleibt als Archiv nutzbar. Für die aktuelle Bewertung empfehlen sich ergänzend neuere Artikel, Tools oder eine konkrete Analyse.

Sinnvoll nutzbar bleibt der Thread vor allem als historischer Kontext, für typische Fragestellungen und zur Einordnung älterer Empfehlungen.

Einige im historischen Thread genannte Tools, Dienste oder externe Links könnten heute nicht mehr verfügbar oder inhaltlich überholt sein. Nutzen Sie sie bitte nur mit zusätzlicher Prüfung.

Startbeitrag

Archivierter Thread aus dem Seitenreport-Forum.

Zur Kategorie
ehemaliges Mitglied
Threadstart · HTML5 & CSS · 09.01.2015, 17:46 Uhr

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

Antworten

10 Beiträge
gelöschter Benutzer · 09.01.2015, 17:47 Uhr
Antwort

Hier kommen weitere Bilder:

gelöschter Benutzer · 09.01.2015, 17:48 Uhr
Antwort

I3lackI2eborn schrieb:

Hier kommen weitere Bilder:

gelöschter Benutzer · 09.01.2015, 17:48 Uhr
Antwort

I3lackI2eborn schrieb:

I3lackI2eborn schrieb:

Hier kommen weitere Bilder:


gelöschter Benutzer · 09.01.2015, 17:49 Uhr
Antwort

I3lackI2eborn schrieb:

I3lackI2eborn schrieb:

I3lackI2eborn schrieb:

Hier kommen weitere Bilder:



gelöschter Benutzer · 09.01.2015, 17:51 Uhr
Antwort

I3lackI2eborn schrieb:

I3lackI2eborn schrieb:

I3lackI2eborn schrieb:

I3lackI2eborn schrieb:

Die Fehlermeldungen:




matthes
Foren Moderator · Evil Genius · Content Halbgott (973 Beiträge) · 09.01.2015, 17:52 Uhr
Antwort

Wir machen hier sicher keine Hausaufgaben für andere.


Make Seitenreport great again!
gelöschter Benutzer · 09.01.2015, 17:52 Uhr
Antwort

Zu Problem 2:
Bilder:

gelöschter Benutzer · 09.01.2015, 17:53 Uhr
Antwort

Zu Problem 2:
Bilder:

gelöschter Benutzer · 09.01.2015, 17:56 Uhr
Antwort

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
Foren Moderator · Evil Genius · Content Halbgott (973 Beiträge) · 09.01.2015, 19:26 Uhr
Antwort

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!