| « » |
|
HTML-Lehrreiches:
- das Attribut style="display: none;" in einem div-Element macht nachfolgende Ausgabe unsichtbar. Dieses Attribut kann dazu benutzt werden, situationsbedingt, - über Javascript gesteuert -, Webseiten auf- und zuzuklappen/sichtbar und unsichtbar zu machen.
- das Attribut style="display: block;" erzwingt eine neue Zeile, darin das Ausgabeobjekt (Text, Link, Bild, usw.) und anschließend einen Zeilenumbruch; dies wird hier manchmal zur Hervorhebung von Links mit Hilfe von A-Tags benutzt
- Herrenloser unsichtbarer Text: To turn text into a link, highlight the text, then click on a page or file from the list above.
- ein Anker name="ankername" darf nicht irgendwo ein zweites mal im HTML-Code als id="ankername" vorkommen;
- Ob der pbWorks-Programmierer von der Idee beseelt war, ein A-Tag mit Anker-Funktion würde im Programm immer separat als <a name=""></a> stehen? Er hat wie folgt deklariert:
... a[name]{background:none;border:none;padding-left:0}
Ein naiver unwissender Programmierer wie ich kann aber das name-Attribut auch problemlos in ein normales A-Tag einfügen und sich dann wundern, dass der zugehörige Ausgabetext hier linksseitig anschlägt. - falls mehrere hierarchisch untergeordnete HTML-Elemente (Bezeichner) über CSS-Style-Deklaration definiert werden sollen, dann z.B. so:
div p,div ul,div span {}
Schreibt man jedoch nur:
div p,ul,span {}
so ist das p-Element innerhalb des div-Elements gemeint; ul und span werden unabhängig vom div definiert.
Vorsicht ist geboten bei z.B.:
div * {}.
Sicherer ist z.B.:
div * p,div * ul,div * span{} - folgende Deklaration deutet darauf hin, dass der Programmmierer bereits den Überblick verloren hat:
td#side-content{width:300px}
td#side-content{width:300px;padding-left:12px;padding-top:64px;vertical-align:top}
Dies ist zwar keine falsche Angabe, jedoch führt der Browser nur die zuletzt gelesene Deklaration aus. So kann man die CSS-Datei auch zumüllen. - im body-Tag steht das Attribut class=" has-ws-nav wikipage", um die Style-Einstellungen von "has-ws-nav" und "wikipage" zu kombinieren. Eine Auflistung derart class="has-ws-nav" class="wikipage" würde als doppelte Spezifikation interpretiert und ist html-verboten. Jedoch findet man in der *.CSS-Datei direkt untereinander die Deklaration:
body.has-ws-nav{ background-color:#d5e7f0;}
body.wikipage{ background-color:#e9f2f5;}
..., so dass eine Umkehrung der Reihenfolge in der class-Auflistung einen anderen Hintergrund ergeben düfte. Es kann also auch auf die Reihenfolge der Class-Auflistung ankommen.
Weiter unten in der *.CSS-Datei findet man noch folgende unverstandene Angabe:
body.has-ws-nav.wikipage #page-footer{ border-top:none !important;}
Ob hier die Reihenfolge der Class-Bezeichner eine Rolle spielt?
Erstaunlicherweise bleibt die body-Hintergrundfarbe dez.{#233;#242;#245} = hex. #e9f2f5; erhalten,- falls man JAVASCRIPT deaktiviert
- falls man die Zuladung von Grafik deaktiviert
- egal, in welcher Reihenfolge die Class-Werte im body-Tag gelistet sind
- egal, ob body.has-ws-nav und body.wikipage auskommentiert wurden, d.h. überhaupt nicht wirken.
Ist es nicht so, dass man die Hintergrundfarbe für den Body-Tag nicht mit "background-color", sondern nur mit "background" deklarieren darf? Nach SELFHTML.org gilt bei css-Style: "Diese Angabe ist eine Zusammenfassung der folgenden möglichen Einzelangaben 'background-color', 'background-image', 'background-repeat', 'background-attachment', 'background-position'"
Unerwartete Ergebnisse ergaben sich beim Browserstresstest (Beitrag v.30.6.2010). - Unproblematischer als in vorangehendem Deklarationschaos ist die doppelte Deklaration von 'background-position' einmal in div.right und div.left unterhalb von div.corner4px bzw. unterhalb von div.top und div.bot, weil dort die background-position jeweils die gleichen Werte annimmt. Man könnte sie unter der div.corner4px weglassen, solange das Attribut lautet: class="corner4px top" bzw. "corner4px bot".
- Beachtet werden muss die Reihenfolge bei den Mehrfachdeklarationen vom Absatzelement "p",
- zuoberst die allgemeine Deklaration p{margin-bottom:1.5em;line-height:1.5em}
- zuunterst die spezielle Deklaration .wikistyle p{margin:0}
- werden alle Hintergrundbilder url(data ...) durch url(http://vs1.pbworks.com/shared/icons/layers-v26115652.png) ersetzt, dann befindet sich die Ausgabe im Grundzustand: sogar die Zeilenumbrüche nach den Grafiken und Listeneinrückungen sind abgeschaltet, wie folgende Hardcopy zeigt:
![[Hardcopy]](http://tb-archiv.drpagel.de/pic/pbworks_hcopy1.gif)
- falls man im Gegenzug alle ebengenannten url(data)-Ersetzungen vom Dateianfang beginnend rückgängig macht, dann bleiben die richtigen Icons solange sichtbar, bis div#page-side-toolbar{background:white url(data...)} restauriert ist. Wird auch div#page-side-toolbar ul{line-height:24px;list-style:none;padding:3px 0px 18px 8px;background:url(data ...)} restauriert, sind die Icons wieder da und die Überschriften FrontPage und Willkommen in ...sind wieder blass und unscheinbar. Sehr seltsam, was mit Hilfe von Javascript passiert.
- erst nach der Restauration (Wiedereinsetzung) von #what-can-see-tree .fileicon{background-image:url(data: ...)} wird das printicon nicht mehr in den Text Printable version hineingedruckt sondern erfährt eine Linksverschiebung, ebenfalls wie der Page history-Link samt zugehörigem historyicon respective fileicon (ungeklärt). Nun ist aber das usericon samt User-Namen linksbündig gesetzt, gefolgt von last edited by. Dafür ist der network bar und user bar verschwunden. Diese "geniale" Javascript-Programmier-Logik verstehe wer will, ich noch nicht. Vermutlich sind Kindelemente abgezählt worden und dann kann das Herauslöschen von unbenötigtem oder das Hinzufügen von neuem HTML-Code diese Arithmetik durcheinander bringen. (ungeklärt ??)
- unverstanden ist, dass das a-Tag zusammen mit dem linksseitigen PrintIcon genau dann richtig dargestellt wird, falls mit Hilfe von CSS wie folgt deklariert wird:
- 1.(allgemein): a{margin:0;padding:0;border:0;font-weight:inherit;font-style:inherit;font-size:100%;font-family:inherit;vertical-align:baseline;}
- 2.(speziell in einem div-Tag mit class="pbworks2" eingekapselt): .pbworks2 + a{margin:0;... wie vor ... }
- 3.(speziell in einem div-Tag mit class="pbworks2" eingekapselt): .pbworks2 > a{margin:0;... wie vor ... }
- 4.(speziell in einem div-Tag mit class="pbworks2" eingekapselt): .pbworks2 a{margin:0;... wie vor ... }
- 5.(speziell in einem div-Tag mit class="pbworks2" eingekapselt): .pbworks2 * a{margin:0;... wie vor ... }
- ein ähnliches Problem wie vor mit dem a-Tag gibt es beim div-Tag. Unverstanden ist, dass der Text "last edited by ..." und UserIcon und "... ago" sowie das HistoryIcon samt Link-Text "PageHistory" genau dann richtig dargestellt wird, falls mit Hilfe von CSS wie folgt deklariert wird:
- 1.(allgemein): div {margin:0;padding:0;border:0;font-weight:inherit;font-style:inherit;font-size:100%;font-family:inherit;vertical-align:baseline;}
- 2.(speziell): .pbworks2 + div{margin:0;... wie vor ... }
- 3.(speziell): .pbworks2 > div{margin:0;... wie vor ... }
- 4.(speziell): .pbworks2 div{margin:0;... wie vor ... }
- 5.(speziell): .pbworks2 * div{margin:0;... wie vor ... }
- das a-Tag mit id="expand-collapse-page-link" innerhalb des div-Elementes mit id="expand-collapse-page" benutzt ein Pfeilsymbol als Hintergrundbild. Dieser Pfeil kann unter noch unklaren javascript-Konditionen (B=$("page-content-"+B) oder ähnliche binäre Anweisung) seine Richtung umkehren (was hier noch nicht gelingt!),
so dass bei drpagel.pbworks.com (siehe oben) keine zwei Pfeilhintergrundbilder notwendig sind (siehe Beitrag v.8.7.2010). Es gilt:- der Wiederholungseffekt ist mit Hilfe von no-repeat ausgeschaltet
- 70% bezeichnet hier die x-Position der Hintergrundbild-Box (von links ab gezählt) innerhalb der durch span-Tag markierten Box für das erste Bild
- 0% bezeichnet hier die y-Position der Hintergrundbild-Box (von der Textunterkante ab gezählt) innerhalb der durch span-Tag markierten Box für das erste Bild
- width:26px bezeichnet hier vermutlich (??) die Breite der Hintergrundbild-Box
- wegen float:right soll das rechts-stehende Pfeil-Element linksseitig von nachfolgenden Elementen umflossen werden.
- Die Javascript-Handhabung des normalen CSS-Skriptes mit Hilfe von Data-URI des PNG-Pfeiles wird vom Internet Explorer 8 wegen seiner Sicherheitsphilosophie nicht unterstützt.
- etwas mehr programmtechnische Transparenz verspricht mir das Javascript-Debug-AddOn "Firebug" für Firefox (siehe Beitrag v.10.7.2010. Dort erkennt man, dass es in der Grundeinstellung ein body-Element mit Attribut class="nn" gibt und sein Attribut um die Größe "fullwidth" erweitert wird, falls man durch Klick auf den nach rechts weisenden expand-collapse-Pfeil die expandierte Frontpage aufschlägt. Der Eintrag fullwidth verschwindet wieder, falls man durch Klick auf den nach links weisenden expand-collapse-Pfeil wieder die kollabierte Grundeinstellung der FrontPage wählt. Dieses body-Element muss von Javascript manipuliert worden sein, da in meinem HTML-Quellcode nur <body> steht.
- die css-fehlerkorrigierte Einträge zu body.nn lauten:
- body.nn textarea.text{border:1px solid #ccc;border-top:1px solid #999;}
- body.nn textarea.text:hover, body.nn textarea.text:focus{border-color:#C5DAED;border-top-color:#5794BF}
- die css-fehlerkorrigierte Einträge zu body.fullwidth lauten:
- body.fullwidth #page {margin-right:12px}
- body.fullwidth #expand-collapse-page{background-position:70% 100%}
- body.fullwidth #side-content{display:none;width:0px}
- body.fullwidth.nologo #top-content{display:none}
- wie eine Test-HTML zeigte, funktioniert der Expand-Collapse-Mechanismus auch ohne Murren, falls mindestens die PBinfo-Daten "GetFeatures":{"sidebar_collapsed":false}, "CheckPermissions": ... und "CurrentPage": ... gesetzt sind. Sonst warnt ein Alert-Popup: "PBinfo.CheckPermissions is not defined" bzw. "PBinfo.CurrentPage is undefined".
- Im Element 'form' ist das Attribut `action` vorgeschrieben, welches aber fehlt.
- Im Element input ist das Attribut `ui:placeholder` nicht erlaubt.
- Im Element 'textarea' ist das Attribut `cols` vorgeschrieben, welches aber fehlt.
- Im Element 'img' ist das Attribut `alt` vorgeschrieben, welches aber fehlt.
- Im Element 'a' ist das Attribut `time` nicht erlaubt.
- Im Element 'a' ist das Attribut `forbidden` nicht erlaubt.
- Im Element 'a' ist das Attribut `ui:uid` nicht erlaubt.
- Im Element 'input' ist das Attribut `autocomplete` nicht erlaubt.
- Im Element 'div' ist ein leeres Attribut ' id="" ' nicht erlaubt; dies führt zur Fehlermeldung: Die Syntax eines Attributwerts entspricht nicht dem deklarierten Wert.
- Schließendes 'div'-Element wurde nicht gefunden, obwohl dies zwingend notwendig ist, z.B. bei: div id="sidebar" bzw. div id="page-side-toolbar"
- div-Tag zu id="page-side-toolbar" ist in ein span-Tag eingepackt, was nicht erlaubt ist. Dies führt zu folgender Fehlermeldung: Das Element 'div' ist an der Stelle id="page-side-toolbar" nicht erlaubt. Es befindet sich evtl. ein Block-Element innerhalb eines Inline-Elements. Auch verschachtelte Block-Elemente könnten diesen Fehler verursachen, da Block-Elemente nicht beliebig verschachtelt werden dürfen. Dies ist abhängig von den verwendeten [X]HTML.
- Endtag für unvollständiges Element ul , Fehlerstelle: '<ul id="main-tools" class="empty"></ul>'
(hier fehlt "<li></li>") - Vom Javascript wird z.B. "#view=edit" bzw. "#view=page" erzeugt, um es an die URL anzufügen und anschließend mit Hilfe von Javascript ein neues HTML-Document für den Adobe Flash-Player Editor zu erzeugen. Ob es bei der Programmierung Probleme mit der hierfür üblicheren Form "?view=edit" gegeben hat, ist unbekannt. Von HTML ist "#" für einen Anker vorgesehen und falls man diese Javascript-Abdresse auf solch einen Anker name="view=edit" umleitet, gibt es die Fehlermeldung:
character "=" is not allowed in the value of attribute "name" - Und über die Originalseite "http://drpagel.pbworks.com/FrontPage"
vermeldet validome.org:
- Schwerer Fehler: "Im Dokument befindet sich in Zeile 233 Spalte 21 ein ungültiges Zeichen. Dieses Zeichen ist in der verwendeten Zeichenkodierung (utf-8) nicht erlaubt."
- vermeldet w3.org ca. 262 css-Fehler. Darunter:
- Die Eigenschaft overflow-x existiert nicht in CSS level 2.1, aber in :
- auto auto
- hidden hidden
- Die Eigenschaft overflow-y existiert nicht in CSS level 2.1, aber in :
- scroll scroll
- auto auto
- hidden hidden
- Die Eigenschaft text-overflow existiert nicht in CSS level 2.1, aber in : ellipsis ellipsis
- Die Eigenschaft -o-text-overflow existiert nicht : ellipsis ellipsis
- Die Eigenschaft opacity existiert nicht in CSS level 2.1, aber in :
- 0 0
- 0.3 0.3
- 0.5 0.5
- 0.8 0.8
- 0.85 0.85
- 1.0 1.0
- Einlese-Fehler
- Opacity=0)
- opacity=30)
- opacity=50)
- opacity=80)
- opacity=100)
- Die Eigenschaft border-radius existiert nicht in CSS level 2.1, aber in :
- 2px 2px
- 3px 3px
- 4px 4px
- 5px 5px
- 6px 6px
- Die Eigenschaft -moz-border-radius existiert nicht (in CSS level 2.1, aber in) :
- 2px 2px
- 3px 3px
- 4px 4px
- 5px 5px
- 6px 6px
- 8px 8px
- Die Eigenschaft -webkit-border-radius existiert nicht, aber in :
- 2px 2px
- 3px 3px
- 4px 4px
- 5px 5px
- 6px 6px
- Die Eigenschaft text-shadow existiert nicht in CSS level 2.1, aber in :
- 0 0
- #fff 0px 1px
- #333 1px 1px 1px;
- Unbekanntes Pseudoelement oder Pseudoklasse: :last-child
- Die Eigenschaft zoom existiert nicht : 1 1
- Die Eigenschaft whitespace existiert nicht : no-wrap no-wrap
- Die Eigenschaft word-wrap existiert nicht : break-word break-word
- Die Eigenschaft -moz-outline existiert nicht : none none
- Die Eigenschaft -moz-user-select existiert nicht : none none
- Die Eigenschaft -khtml-user-select existiert nicht : none none
- Die Eigenschaft -moz-border-radius-bottomright existiert nicht : 0 0
- Die Eigenschaft -moz-border-radius-bottomleft existiert nicht : 0 0
- Die Eigenschaft -moz-border-radius-topleft existiert nicht : 0 0
- Die Eigenschaft -moz-border-radius-topright existiert nicht : 0 0
- Die Eigenschaft -webkit-border-radius-topleft existiert nicht : 2px 2px
- Die Eigenschaft -webkit-border-radius-topright existiert nicht : 2px 2px
- Die Eigenschaft -webkit-min-device-pixel-ratio existiert nicht für das Medium screen : 0 0
- Einlese-Fehler {*width:auto}
- Einlese-Fehler *border:1px solid #d5e7f0;
- Einlese-Fehler *border-width:40px 10px 10px 10px;
- Ungültige Nummer : cursor not-allowed ist kein cursor-Wert : not-allowed not-allowed
- Ungültige Nummer : display -moz-inline-block ist kein display-Wert : -moz-inline-block -moz-inline-block
- Ungültige Nummer : cursor row-resize ist kein cursor-Wert : row-resize row-resize
- Ungültige Nummer : padding Einlese-Fehler :
(dies ist eine unvollständige Zeichenkette) - Ungültige Nummer : height nur 0 kann ein length sein. Nach der Zahl muß eine Einheit stehen. : 36 36
- Unrecognized [6px;border:1px solid #ccc;border-top:1px solid #999} #proxy_wikiname]
(dies ist eine unvollständige Zeichenkette) - Ungültige Nummer : cursor hand ist kein cursor-Wert : hand hand
- Die Eigenschaft -moz-outline-style existiert nicht : none none
- Ungültige Nummer : border-bottom-width Lexical error at line 1253, column 102. Encountered: "e" (101), after : "!i" e}
(dies sollte evtl. ein Kommentar !ie sein) - Ungültige Nummer : border-bottom-width Lexical error at line 1277, column 94. Encountered: "e" (101), after : "!i" e}
(dies sollte ein evtl. Kommentar !ie sein) - Einlese-Fehler h1.wikilogo span.badge{ vertical-align:26px !important;}
Einlese-Fehler [empty string] - Die Eigenschaft -webkit-border-top-left-radius existiert nicht : 10px 10px
- Die Eigenschaft -webkit-border-top-right-radius existiert nicht : 10px 10px
- Ungültige Nummer : background Versuche ein Semikolon vor dem Eigenschaftsnamen zu finden. Füge es hinzu.
Ungültige Nummer : background Einlese-Fehler null
Die Eigenschaft data existiert nicht : image/gif image/gif
Einlese-Fehler base64,R0lGOD... - Einlese-Fehler *display:inline;
- Einlese-Fehler *display:inline;
Einlese-Fehler [:16px; padding-left:20px; background:url(//vs1.pbworks.com/shared/icons/accept-v64994336.png) no-repeat 0 0;}#user-roster span.user-info-detail a.user-group-link] - Die Eigenschaft border-radius-bottomright existiert nicht : 2px 2px
- Die Eigenschaft border-radius-bottomleft existiert nicht : 2px 2px
- Die Eigenschaft border-radius-topright existiert nicht : 2px 2px
- Die Eigenschaft border-radius-topleft existiert nicht : 2px 2px
- Die Eigenschaft -webkit-border-bottom-right-radius existiert nicht : 2px 2px
- Die Eigenschaft -webkit-border-bottom-left-radius existiert nicht : 2px 2px
- Die Eigenschaft box-shadow existiert nicht in CSS level 2.1, aber in : 0 2px 5px #999 0 2px 5px #999
- Die Eigenschaft -webkit-box-shadow existiert nicht : 0 2px 5px #999 0 2px 5px #999
- Die Eigenschaft -moz-box-shadow existiert nicht : 0 2px 5px #999 0 2px 5px #999
- Die Eigenschaft -ms-filter existiert nicht : "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)" "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)"
- Unbekanntes Pseudoelement oder Pseudoklasse: :not
als html:not([xmlns*=""]) - Die Eigenschaft -webkit-transition existiert nicht : opacity 0.25s linear opacity 0.25s linear
- Einlese-Fehler {.border:1px solid #ccc;
Einlese-Fehler {.border-top:1px solid #999 - Einlese-Fehler ;*position:relative}
- Die Eigenschaft overflow-x existiert nicht in CSS level 2.1, aber in :
- In der originalen packed-m-prod-v67573832.css-Datei wird mit Hilfe von */ ... */ auskommentiert, obwohl hierfür /* ... */ vorgeschrieben ist
- nachdem nur die notwendigsten Deklarationen von pbworks übernommen wurden, listet der jigsaw.w3.org/css-validator folgende Warnungen meiner ansonsten fehlerfreien *.css-Archivdatei auf:
- 1: Namen von Schriftfamilien, die Leerzeichen enthalten, sollten in (doppelte) Anführungszeichen eingeschlossen werden. Ohne Anführungszeichen werden alle Leerraumzeichen (Leerzeichen, Tabulatoren, etc.) vor und nach dem Namen ignoriert, und jede Sequenz von Leerraumzeichen innerhalb des Namens wird durch ein einzelnes Leerzeichen ersetzt
- siehe (Zeile 273): .wikistyle
- hier font-family:Segoe UI (siehe (Zeile 297): .wikistyle h4, .wikistyle h3, .wikistyle h2, .wikistyle h1; (Zeile 321): h1.pagetitle)
- 2: Gleiche Farbe für background-color und color
- hier Farbe #ccc; (siehe (Zeile 282): .wikistyle hr)
- 1: Namen von Schriftfamilien, die Leerzeichen enthalten, sollten in (doppelte) Anführungszeichen eingeschlossen werden. Ohne Anführungszeichen werden alle Leerraumzeichen (Leerzeichen, Tabulatoren, etc.) vor und nach dem Namen ignoriert, und jede Sequenz von Leerraumzeichen innerhalb des Namens wird durch ein einzelnes Leerzeichen ersetzt
- Das ist noch längst nicht alles:
- packed-v89047721.v3.js (expandiert ab Zeile 8170): der Benutzer wird nicht mit "User has already entered a page name; don't infer one based on filename ..." gewarnt, weil dort die Warnung mit der unbekannten javascript-Funktion "alet()" anstatt mit "alert()" (nicht)ausgeführt wird.
- editor-v1277402225.js (komprimiert ab Zeile 17): ab dem Code 'String.prototype.parseColor=function(){var A="#";' gleich im Anschluss ans Kommentarfeld zu den Autoren von http://script.aculo.us/ heisst der javascript-Fehler: Prototyp is not defined"
Regiehinweis: die zugehörige Javascriptdatei wurde noch nicht von unbenötigtem Skript-Ballast entmüllt, weil dies vermutlich ca. 14 Vollzeitarbeitstage benötigen dürfte. Daher können noch Cookies verwaltet werden und gebrochene Links existieren. Dieser Archivbeitrag ist nur für den Firefox optimiert worden.
(dp)(0,25h)(1h(25.6.2010))(4,25h(26.6.2010))(13h(27.6.2010))(8,5h(28.6.2010))(3h(29.6.2010))(6,7h(30.6.2010))(4h(01.7.2010))(6h(02.7.2010))(3h(03.7.2010))(6h(04.7.2010))(7h(05.7.2010))(10,75h(06.7.2010))(2,5h(08.7.2010))
archiviert (tbid1450.274): (dp) 24.06.2010 (+0,1h (+flagcounter +home.icon +w3c_LiCh +html-korr.))
Comments (0)
You don't have permission to comment on this page.
Hier im Tagebucharchiv sind Kommentarabgabe und andere pbworks-Funktionen ausser Betrieb