Gunnar Bittersmann: class element für mehrere hrefs verwenden

Beitrag lesen

SELF-Forum

class element für mehrere hrefs verwenden

Gunnar Bittersmann Homepage des Autors
– Informationen zu den Bewertungsregeln

@@Reth

Zudem möchte ich das Seitenlayout zweispaltig machen. Ist da immer noch der Weg über eine Tabelle die erste Wahl (wie früher, "vorm Krieg" :) )?

Nein.

Um zu sagen, wie es geht, müsste man aber erstmal wissen, wie die Themen denn zweispaltig angeordnet sein sollten:

| Thema 1 | Thema 2 | | Thema 3 | Thema 4 | | Thema 5 | |

oder

| Thema 1 | Thema 4 | | Thema 2 | Thema 5 | | Thema 3 | |

Und wenn sie unterschiedlich viele Punkte auflisten?

┌────┬────┐
│    │    │
│    │    │
├────┼────┤
│    │    │
├────┼────┘
│    │
│    │
└────┘

oder

┌────┬────┐
│    │    │
├────┤    │
│    ├────┤
├────┤    │
│    ├────┘
│    │
└────┘

Die Seite ist nur für Monitore und Laptops vorgesehen, nicht für mobilere Endgeräte wie Tablets und Smartphones.

?? Mit welchen Geräten Nutzer deine Seite aufrufen, liegt nicht in deiner Hand. Es sei denn, du bist der einzige Nutzer dieser Seite.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

Das ist von „vorm Krieg“. Verwende HTML5: <!DOCTYPE html>

<HTML>

Es ist gute Praxis, Bezeichener von Elemente und Attributen durchgängig kleinzuschreiben. Im html-Element sollte auch die Sprache des Seiteninhalts angegeben werden. Für eine deutschsprachige Seite: <html lang="de">

<TITLE></TITLE>

Das title-Element sollte nicht nur einfach da sein, sondern auch sinnvollen Inhalt haben. Der erscheint schließlich in der Beschriftung von Browsertabs, von Lesezeichen, … <title>Linksammlung</title>

<style type="text/css">

BTW, style"text/css" kannst du in HTML5 weglassen.

<H3>Linksammlung</H3>

Die h1…h6-Elemente müssen der Reihe nach vergeben werden: die Hauptüberschrift der Seite ist h1, die Überschriften der 2. Hierarchie-Ebene h2 usw. Das hat nichts mit der gewünschten Schriftgröße zu tun; die bestimmst du mit CSS.

<nobr><H4>&nbsp;&nbsp;&nbsp;Thema1</H4></nobr>

Die Überschrift ist einfach nur <h2>Thema 1</h2>

<nobr>? Weg damit. Umbrüche bestimmst du mit CSS. Brauchst du hier aber ga nicht.

&nbsp;? Weg damit. Abstände bestimmst du mit CSS: h2 { margin-left: 2em } bzw. h2 { padding-left: 2em }.

Hier bietet es sich an, zur Strukturierung des Seiteninhalts section-Elemente zu verwenden – mit jeweils ihrer eigenen ID:

<section id="thema1">
  <h2>Thema 1</h2>
  <a href="…">Punkt 1</a>
  <a href="…">Punkt 2</a>
</section>
<section id="thema2">
  <h2>Thema 2</h2>
  <a href="…">Punkt 1</a>
  <a href="…">Punkt 2</a>
</section>

Oder die Auflistungen auch als Listen ul bzw. ol auszeichnen:

<section id="thema1">
  <h2>Thema 1</h2>
  <ul>
    <li><a href="…">Punkt 1</a></li>
    <li><a href="…">Punkt 2</a></li>
  </ul>
</section>
<section id="thema2">
  <h2>Thema 2</h2>
  <ul>
    <li><a href="…">Punkt 1</a></li>
    <li><a href="…">Punkt 2</a></li>
  </ul>
</section>

Ich möchte gern alle "a hrefs" für Thema1 mit buttongrey formatieren, die für Thema2 mit buttonblue usw. usf., ohne dass ich wie im Bsp. unten jeweils die class an jeden "a href" einzeln schreiben muss. Gibt es da ne Möglichkeit?

Wie du siehst, habe ich die Klassen bereits weggelassen. Die IDs des section-Elemente machen es möglich, die jeweils darin enthaltenen Links als Nachfahren zu stylen:

#thema1 a { color: #666666 }
#thema2 a { color: midnightblue }

LLAP 🖖

--
„Wir haben deinen numidischen Schreiber aufgegriffen, o Syndicus.“
„Hat auf dem Forum herumgelungert …“
(Wachen in Asterix 36: Der Papyrus des Cäsar)
Beitrag melden
–
Informationen zu den Bewertungsregeln