Test Seite für Cascading Stylesheets

Listen Formatierung

Überschrift

Je nach Browser werden die List-Bullets entweder im linken "margin" (außerhalb des roten Rahmens [IE]) oder im linken "padding" (innerhalb des roten Rahmens [Gecko]) Bereich der ul-Box dargestellt.

Eine 4.Liste mit padding 1em für ul und 1ex für li

Um eine einheitliche Darstellung in allen Browsern zu erreichen, muss also sowohl margin-left als auch padding-left per Stylesheet Regel angegeben werden, damit nicht die Defaults greifen, die in den Browsern unterschiedlich sind:

ul {
  margin-left: 2em;
  padding-left: 0;
}

Und das ist Text im normalen Absatz. Der Abstand nach oben zur Überschrift sollte etwas größer sein als der Abstand nach unten zum nächsen Absatz.

A list with specific class names and a separate new counter for each level. It needs style rules for each level class, but allows to have final periods only on the main level. It uses only the counter() function for displaying and their counterparts counter-reset, counter-increment to modify the counter variables which are available in Firefox at least since Version 19 from 2013 and also in IE since version 9. It uses li::before for setting the list numbers. With ::before you create a separate additional element between the numbering marker and the list item itself. The browser's internal default marker element is still there and you have to turn it off with list-style-type:none otherwise you will have two nunber markers for the same list item. The very new CSS-3 ::marker pseudo element goes a step further and actually modifies the internal browser element. We will see this later on ... 

ol.level-1      { counter-reset: count1; }
ol.level-1 > li { counter-increment: count1; }
ol.level-2      { counter-reset: count2; }
ol.level-2 > li { counter-increment: count2; }
ol.level-3      { counter-reset: count3; }
ol.level-3 > li { counter-increment: count3; }
ol.level-2 > li::before {
  content: counter(count1) "." counter(count2);
}
ol.level-3 > li::before {
  content: counter(count1) "." counter(count2) "." counter(count3);
}
  1. This is normal text without any fancy formatting. At least it tries to include as much text as possible to hopefully force a line break.
  2. This is the line directly before the nested list:
    1. First item in level-2
      1. First item of level-3
      2. Second item of level-3
    2. Second item in level-2
  3. This is the third item of the main list.
  4. ... and a final forth one.

counters() is an extension to the normal counter function and it has access not only to one counter but to the complete hierarchy of counters in a nested list. At least if it is used with the built-in list-item counter. It has the advantage that the specific class for each level are not needed and that it automatically supports nesting of any depth. But it is not as widely supported by the browsers as counter, Firefox 60 does not support it. The advantage is that you get it all with a single CSS rule: 

ol li::before { content: counters(list-item,"."); }
  
  1. This is normal text without any fancy formatting. At least it tries to include as much text as possible to hopefully force a line break.
  2. This is the line directly before the nested list:
    1. First item in level-2
      1. First item of level-3
      2. Second item of level-3
    2. Second item in level-2
  3. This is the third item of the main list.
  4. ... and a final forth one.

List that uses counters() with the default list-item counter and only a single rule for ::marker of numbered list items. In contrary to characters like parantheses, colons or periods spaces as they are used below after the counter are ignored. li::before which is between ::marker and the list item itself has to be used for setting padding. ::marker has a nicer fallback mechanism then ::before when the content rule uses too complicated concatenation with counter(s) functions. The rule will be ignored and the default behaviour for the marker of the item is (re-)activated: The default numbering is shown. If the numbering is built with ::before and the counter(s) construct fails the list-style-type:none will win and there will be no markers at all. 

ol > li::marker { content: counters(list-item, ".") " "; }
ol > li::before {
    content: ""; /* content: is needed otherwise paddding can not be applied */
    padding-right: 1ex;
}
  1. This is normal text without any fancy formatting. At least it tries to include as much text as possible to hopefully force a line break.
  2. This is the line directly before the nested list:
    1. First item in level-2
      1. First item of level-3
      2. Second item of level-3
    2. Second item in level-2
  3. This is the third item of the main list.
  4. ... and a final forth one.

This paragraph is used to demonstrate the visibility style attribute compared to the display style attribute.

Visibility should simply change the visible state of an element (in our case a block level element), but it should not effect the positioning of the other elements. In short, the visible or unvisible element is still rendered, but it is either visible or not.

And this is a third paragraph that is in no way affected by the visibility style changes of the second one.

This is just a filler paragraph, because we only toggle the style of the second paragraph in this table cell.

This paragraph should completely vanish and excluded from rendering. Consequently the surrounding <div> should shrink to a smaller height.

Inherit Hidden Visible Display: block none

Das sind die ersten Worte in diesem Absatz. Wenn man den nachfolgenden Button anklickt, wird das noch ein bisschen mehr.

Dynamische Tabellen

Wenn vom dynamischen Anlegen von Tabellen die Rede ist, dann sollte das genau genommen als dynamisches Erweitern on-the-fly bezeichnet werden, denn ein <tbody> Tag braucht es als Startpunkt schon.

Checking the HTML source code of dynamic content

Auf einer Seite, die ziemlich weitreichend Gebrauch macht von dynamischen HTML und Javascript wird der reine Source-Code View, wie ihn jeder Browser anbietet, oft nicht viel nutzen, weil man gerade an dem Teil interessiert ist, der vom Script Code generiert wird. Und im Browser Source-View wird man da nur document.writeln() oder document.appendChild() sehen, aber eben nicht das Ergebnis davon.

Das Javascript und DHTML Cookbook von Danny Goodmann hat für solche Situationen einen sehr hilfreichen Trick parat. Direkt in die URL-Zeile des Browsers tippt man folgenden etwas länglichen Javascript Link:

javascript: void window.open("","","").document.write("<pre>" + document.body.parentNode.innerHTML + "</pre>")

Das wäre zumindest der erste Versuch, der aber noch nicht klappt, da auch innerhalb des preformatted Tags der Content und damit auch etwaige Tags dabei gerendert werden. Als Gegenmittel sämtliche Tags mit den entsprechenden Entities zu escapen, ist keine gute Idee. Einfacher ist es, anstatt <pre> <textarea> zu benutzen:

javascript: void window.open("","","").document.write('<textarea cols="80" rows="20">' + document.body.parentNode.innerHTML + "</textarea>")

Allerdings wird in diesem Fall der Browser nie fertig mit laden, weil ihm nach dem document.write() noch das obligatorische document.close() fehlt. Das ist aber als Einzeiler für die URL nicht zu bewerkstelligen.

1.Image    2.Image

S0-Bus intern

TK-Anlage

Fritz-Box

Ethernet-Switch

USB-Kabel

Splitter

NTBA

Amt

S0+Ethernet

Hide Lables