Mit diesem kleinen Kursus werden die Grundlagen erklärt, wie eine Liste in eine chicke Navigation umgewandelt werden kann. CSS für Listen.
Archiv für Kategorie
CSS-float in den Griff bekommen
Noch ein kleiner Lehrgang, der sich mit dem Verhalten von der CSS-Eigenschaft float beschäftigt, für umflossene Bilder und mit einem Beispiel für tabellenfreie Formulare.
Kurz und knapp: eine barrierefreie Struktur für einfache Internetseiten
Um eine barrierefreie Seite zu erstellen braucht es nicht viel. Wer ein paar Grundregeln einhält, der schafft es auch. Folgender Aufbau soll verdeutlichen, wie einfach das eigendlich ist. Und wer so eine Seite mal mit seinem Handy aufgerufen hat, der weiß, dass nicht nur Blinde was davon haben.
Seitentitel am Anfang
Damit die Besucher wissen, auf welcher Seite sie sich befinden, kommt als erster Textinhalt ein Seitentitel in einen H1-Tag. Das kann auch ein Bild sein mit einem entsprechenden ALT-Text.
Sprungmarken
Sinnvoll sind Sprungmarken zum Inhalt, zur Navigation und zur Suche. Folgt nach dem Sprungmarken kein zusätzlicher Text mehr, genügt die Sprungmarke zum Seiteninhalt.
Suche
Soweit sie vorhanden ist, folgt sie am besten nach den Sprungmarken.
Navigation
Eine ein- oder mehrteilige Navigation. Mehrteilige Navigationselemente können mit Überschriften voneinander getrennt werden (H2 bis H6, da H1 nur für den Titel verwendet wird).
Zusätzlicher Text vor dem Inhalt
Steht zwischen Navigation und Inhalt weiterer Text (auch ALT-Texte für Bilder), muss er mit Strukturelementen wie Überschriften deutlich von der Navigation getrennt werden.
Inhalt
Der Inhalt ist der zweite Hauptabschnitt nach der Navigation, er beginnt also mit H2.
Weiterer Text, Fußzeile
Dieser dritte Abschnitt, soweit vorhanden, sollte ebenfalls von Inhalt mit einer H2-Überschrift getrennt werden. Wenn in dem Abschnitt Zusatzinfos für den Inhalt stehen, wird er mit h3 dem Inhalt zugeordnet.
Struktur als HTML-Code
Die folgende Struktur kann natürlich noch ergänzt werden mit DIV-Containern für die Gestaltung.
<h1>Titel</h1> <ul> <li><a href="#inhalt">Zum Inhalt</a></li> <li>(Suchformular)</li> </ul> <h2>Navigation</h2> <ul>(Liste(n) mit den Links innerhalb der Seite)</ul> <h2>Weiterer Text</h2> <p>... Text ...</p> <h2>Inhalt</h2> <p>... Text ...</p> <ul>(Liste(n))</ul> <h2>Infos</h2> <p>... Text ...</p> <ul>(Liste(n))</ul> <p>Fußzeile</p> <ul>(Liste(n) in der Fußzeile)</ul>
CSS: Seiteninhalte zentrieren
Ergänzend zu den vorangegangenen Dokumenten gibt es jetzt nochmal Seiteninhalt zentieren.
CSS: umflossene Elemente überlappen? Muss nicht sein
Nachdem in unserem Forum die Frage gestellt wurde, wie überlappende Elemente vermieden werden, die mit float ausgerichtet sind, kam von mir erstmal die lapidare Antwort, dass es sich dabei wohl um eine Anfängerfrage handelt. Die Antwort ließ jedoch auf sich warten – ich musste feststellen, dass von uns bisher nur wenige diese CSS-Eigenschaft wirklich im Griff haben.
Darum habe ich nochmal die Methoden zusammengefasst, die ich verwende. Für eine besser Übersicht habe ich ein HTML-Dokument draus gemacht: Umflossene Elemente und ihr Verhalten.
Weitere Infos
- SelfHTML: Positionierung, Dokumentation
- Floatutorial – Step by step CSS float tutorial, ausführliche Anleitung für den Umgang mit
float. - Einschließen von Floats ohne zusätzliches Markup, eine alternative Methode.
PHP: Sicherheit bei globalen Variablen
Die Verwendung von $GLOBALS ist eine gängige Methode, Einstellungen an Funktionen weiterzugeben, ohne sie als Funktionsparameter zu laden. Während bei Strings ud Zahlen noch auf define() zurückgegriffen werden kann, ist das bei Arrays ohne zusätzliche Funktion nicht mehr möglich.
<php
$GLOBALS['moin'] = 'Hallo Welt';
function hallo_welt() {
echo $GLOBALS['moin'];
}
hallo_welt();
?>
Da in $GLOBALS auch alle Werte aus $_GET oder $_POST stehen, können sie eventuell von außen verändert werden. Darum sollte eine Globale immer vorher leer gesetzt werden.
Kann verändert werden:
<php
$GLOBALS['moin'][] = 'Hallo Welt';
$GLOBALS['moin'][] = 'Hallo Emden';
$GLOBALS['tschüß'] .= 'Tschüß';
?>
Kann nicht verändert werden:
<php
$GLOBALS['moin'] = array();
$GLOBALS['moin'][] = 'Hallo Welt';
$GLOBALS['moin'][] = 'Hallo Emden';
$GLOBALS['tschüß'] = '';
$GLOBALS['tschüß'] .= 'Tschüß';
?>
