Optimierung - Senkrechte Trennlinie zwischen Sprungzielen mit :last-child

  1. Zum Inhalt springen

webdesign
klamonfra
Klaus Franz


Wie wird die senkrechte Trennlinie zwischen Sprungzielen erstellt?

01Feb2014

Senkrechte Trennlinie zwischen Sprungziele mit :last-child


Am Fuß jeder Seite sind noch Sprungziele zum Inhaltsverzeichnis, Disclaimer und Datenschutz notiert und für eine vernünftige Trennung zwischen den Linktexten sorgt eine senkrechte Linie. So eine Linie kann man einfach mit einem Rahmen auf der rechten Seite des Textes erzielen. Aber natürlich soll neben dem ganz rechten Verweis keine Linie erscheinen.
Wie wird das sinnvollerweise in HTML (HyperText Markup Language) und CSS (Cascading Style Sheet) notiert?
Früher hatte ich für die senkrechte Trennlinie eine separate Klasse benutzt:

<footer>
    <ul>
        <li>
            <a class="fussrand" href="sitemap.php" 
                title="Die Website im Überblick">
                Inhaltsverzeichnis
            </a>
        </li>
        <li>
            <a class="fussrand" href="nutzungsbedingungen.php"
                title="Nutzungsbedingungen/Terms of Use">
                Nutzungsbedingungen (Disclaimer)
            </a>
        </li>
        <li>
            <a href="datenschutz.php"
                title="Datenschutz - Privacy Policy">
                Datenschutz - (Privacy Policy)
            </a>
        </li>
    </ul>
</footer>

Und das dazugehörige CSS (Cascading Style Sheet).

footer {
    color: silver;
    font-size: .8em;
    text-align: center;
    height: 11.15em;
    clear: both;
    background: linear-gradient(#464646,#464646 75%,#282828);
    border-top: 1px solid #000;
    box-shadow: 0 -6px 8px -1px #111;
}

footer a {
    color: silver;
    letter-spacing: 1.1px;
    transition: 2s;
}

footer a:hover,
footer a:focus {
    color: #fff;
    text-decoration: underline;
}

footer li {
    display: inline;
    padding: 0 10px;
    list-style: none;
}

footer a.fussrand {
    border-right: 1px solid #000;
}

Durch die Klasse "fussrand" wurde die Trennlinie nur nach den ersten beiden Sprungzielen notiert und beim letzten Verweis fehlte die Klassenangabe und damit die Trennlinie.


01Nov2014

Aber es geht auch einfacher


Zuerst verzichten wir bei der Optimierung im HTML (HyperText Markup Language) und im CSS (Cascading Style Sheet) auf die Klasse "fussrand" und ordnen den Rand dem Listenelement zu. Im HTML (HyperText Markup Language) sind damit alle Verweise gleich aufgebaut:

<footer>
    <ul>
        <li>
            <a href="sitemap.php" 
                title="Die Website im Überblick">
                Inhaltsverzeichnis
            </a>
        </li>
        <li>
            <a href="nutzungsbedingungen.php"
                title="Nutzungsbedingungen/Terms of Use">
                Nutzungsbedingungen (Disclaimer)
            </a>
        </li>
        <li>
            <a href="datenschutz.php"
                title="Datenschutz - Privacy Policy">
                Datenschutz - (Privacy Policy)
            </a>
        </li>
    </ul>
</footer>

Und im dazugehörigen CSS (Cascading Style Sheet) bleiben alle anderen Angaben, bis auf die unten aufgeführten, bestehen.

footer li {
    display: inline;
    padding: 0 10px;
    list-style: none;
    border-right: 1px solid #000;
}

footer li:last-child {
    border-right: none;
}

Zunächst bekommt also jedes Listenelement auf der rechten Seite mit "border-right: 1px solid #000" einen schwarzen Rand. Das letzte Listenelement wird dann mit "li:last-child" angesprochen und für dieses Element der Rand wieder gelöscht.
Das war schon alles!


Erklärung der Universalattribute "class" und "id"

Die beiden Universalattribute "class" oder "id" unterscheiden sich darin, dass ein ID-Name auf einer Webseite nur einmal vorkommen darf, während eine Klasse eine Gruppe darstellen kann und damit auf einer Webseite öfter verwendet werden darf.

<div id="vor"> ... </div>

Um dieses Attribut im CSS (Cascading Style Sheet) zu gestalten benutzt man das Rautenzeichen (#) gefolgt von dem ID-Namen "#vor { ... }".

<div class="vor"> ... </div>

Um dieses Attribut im CSS (Cascading Style Sheet) zu gestalten benutzt man einen Punkt (.) gefolgt von dem Klassen-Namen ".vor { ... }".

Man kann ein HTML (HyperText Markup Language)-Element auch mit mehreren Klassennamen gestalten, die dabei jeweils durch eine Leerstelle getrennt werden. Zum Beispiel:
"<div class="vor zur"> ... </div>"
oder
"<div id="vor" class="zur"> ... </div>"

Erklärung der Pseudoklassen

Mit einer Pseudoklasse wird zwar wie mit einer Klasse "class" oder Identität "id" ein Element ausgewählt, aber es wird nicht ins HTML (HyperText Markup Language) notiert. Und besondere Pseudoklassen sind dabei ":first-child" und ":last-child", mit denen das erste beziehungsweise das letzte einer Reihe von Geschwistern ausgewählt werden.

Eine weitere und besondere Pseudoklasse besteht mit ":nth-child(n)", frei ins Deutsche übersetzt mit "das n-te Kind". Durch das Klammerpaar wählt man die verschiedensten Elemente einer Reihe aus, mit ":nth-child(4)" zum Beispiel das vierte Kind-Element.


Auch die Pfeile bei den Sprungzielen (vorheriger Artikel und nächster Artikel) am Ende dieses Artikels können durch zwei unterschiedliche Identitäten "id" zugewiesen werden.

<div id="men">
    <ul>
        <li id="vor">
            <a href="scrollbalken.php" title="Scrollbalken">
                vorheriger Artikel
            </a>
        </li>
        <li id="nae">
            <a href="css-dateien-zusammenfassen.php" title="Externe CSS">
                nächster Artikel
            </a>
        </li>
    </ul>
</div>
#vor a:link:before {
    content: '< ';
}

#nae a:link:after {
    content: ' >';
}

Besser und einfacher ist aber die folgende Variante, die auf diesen Seiten auch zur Anwendung kommt:

<ul id="men">
    <li>
        <a href="scrollbalken.php" title="Scrollbalken">
            vorheriger Artikel
        </a>
    </li>
    <li>
        <a href="css-dateien-zusammenfassen.php" title="Externe CSS">
            nächster Artikel
        </a>
    </li>
</ul>
#men li:first-child :before {
    content: '< ';
}

#men li:last-child :after {
    content: ' >';
}

Zum Seitenanfang springen Λ