nicht angemeldet
class element für mehrere hrefs verwenden
0 0 0 0 0 
Gunnar Bittersmann
0 
Matthias Apsel
0
class element für mehrere hrefs verwenden
Hallo zusammen,
kurze Frage:
Ich möchte gern eine class für mehrere hrefs verwenden, damit ich nicht das class-Attribut an jeden href einzeln eintragen muss. Damit es nicht zu einfach wird, möchte ich gern einer Gruppe von hrefs eine class zuweisen, einer anderen Gruppe von hrefs eine andere class.
Gibt es hierfür eine Möglichkeit? (Hab schon Google bemüht, leider wohl mit den falschen Such-Versuchen.)
Danke schon mal!
Ciao
-
Hallo
Ja, es gibt mehrere Möglichkeiten. Welche sinnvoll ist und funktioniert hängt von deinem Quelltext ab und in wie fern du auch Änderungen am Quelltext durchführen kannst.
Hast du einen Link zu deinen bisherigen Bemühungen?
Gruss
MrMurphy
-
Hast du einen Link zu deinen bisherigen Bemühungen?
Hi zusammen,
vielen Dank für eure Antworten. Link hab ich leider keinen, aber ein bisschen Code (s.u.). 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?
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" :) )? Oder gibt es da Besseres? Die Seite ist nur für Monitore und Laptops vorgesehen, nicht für mobilere Endgeräte wie Tablets und Smartphones.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <HTML> <HEAD> <TITLE></TITLE> <style type="text/css"> body { color: grey; font-family: arial, sans-serif; width: 30em; } .buttongrey, .buttonblue, .buttongreen, .buttonorange { border-bottom: 1px solid rgba(255, 255, 255, 0.2); border-radius: 5px 5px 5px 5px; box-shadow: 0 5px 5px #313131, 0 9px 0 #393939, 0 9px 10px rgba(0, 0, 0, 0.4), 0 2px 9px rgba(255, 255, 255, 0.2) inset, 0 -2px 9px rgba(0, 0, 0, 0.2) inset; color: #FFFFFF; display: inline-block; font-size: 14px; font-weight: bold; margin-bottom: 10px; padding: 6px 20px; position: relative; text-decoration: none; text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.2); width: 450px; left: 30px; } .buttongrey { background-color: #666666; } .buttonblue { background-color: MidnightBlue; } .buttongreen { background-color: DarkGreen; } .buttonorange { background-color: DarkOrange; } </style> </HEAD> <BODY> <H3>Linksammlung</H3> <nobr><H4> Thema1</H4></nobr> <a href="..." class="buttongrey">Punkt 1</a> <a href="..." class="buttongrey">Punkt 2</a> <a href="..." class="buttongrey">Punkt 3</a> <H4> Thema 2</H4> <a href="..." class="buttonblue">Punkt 1</a> <a href="..." class="buttonblue">Punkt 2</a> <a href="..." class="buttonblue">Punkt 3</a> <H4> Thema 3</H4> <a href="..." class="buttongreen">Punkt 1</a> <a href="..." class="buttongreen">Punkt 2</a> <a href="..." class="buttongreen">Punkt 3</a> ...-
Ok, eine Möglichkeit hab ich gefunden: IDs für das a-element vergeben und dementsprechende div-Tags nutzen (s.u.). Oder wären da Strukturteile wie <section> besser?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <HTML> <HEAD> <TITLE></TITLE> <style type="text/css"> body { color: grey; font-family: arial, sans-serif; width: 30em; } #buttongrey a, #buttonblue a, #buttongreen a, #buttonorange a { border-bottom: 1px solid rgba(255, 255, 255, 0.2); border-radius: 5px 5px 5px 5px; box-shadow: 0 5px 5px #313131, 0 9px 0 #393939, 0 9px 10px rgba(0, 0, 0, 0.4), 0 2px 9px rgba(255, 255, 255, 0.2) inset, 0 -2px 9px rgba(0, 0, 0, 0.2) inset; color: #FFFFFF; display: inline-block; font-size: 14px; font-weight: bold; margin-bottom: 10px; padding: 6px 20px; position: relative; text-decoration: none; text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.2); width: 450px; left: 30px; } #buttongrey a { background-color: #666666; } #buttonblue a { background-color: MidnightBlue; } #buttongreen a{ background-color: DarkGreen; } #buttonorange a{ background-color: DarkOrange; } </style> </HEAD> <BODY> <H3>Linksammlung</H3> <nobr><H4> Thema1</H4></nobr> <div id="buttongrey"> <a href="...">Punkt 1</a> <a href="...">Punkt 2</a> <a href="...">Punkt 3</a> </div> ...-
Hallo
Ok, eine Möglichkeit hab ich gefunden: IDs für das a-element vergeben und dementsprechende div-Tags nutzen (s.u.).
Das ist eine Möglichkeit, wobei class statt id mir sinnvoller erscheint.
Oder wären da Strukturteile wie <section> besser?
Für die Semantik wäre section besser geeignet. Wobei div hier keine grobe Fehler sind.
Über die korrekte Verwendung (ob überhaupt und wann) von nobr und solltest du dich noch mal informieren.
Gruss
MrMurphy
-
@@Reth
Ok, eine Möglichkeit hab ich gefunden: IDs für das a-element vergeben und dementsprechende div-Tags nutzen (s.u.). Oder wären da Strukturteile wie <section> besser?
Daumenregel: Wenn ein Bereich eine Überschrift hat:
section. Wenn nicht:div.Deine Bereiche haben Überschriften – die in die Bereiche rein gehören, nicht außerhalb.
Und IDs (und Klassen) niemal nach der gegenwärtig(!) gewünschten Darstellung bezeichnen (
buttongrey), sondern nach ihrer Funktion (thema1).Nicht
<nobr><H4> Thema1</H4></nobr> <div id="buttongrey"> <a href="...">Punkt 1</a> <a href="...">Punkt 2</a> <a href="...">Punkt 3</a> </div>sondern
<section id="thema1"> <h2>Thema 1</h2> <a href="…">Punkt 1</a> <a href="…">Punkt 2</a> </section>LLAP 🖖
--
„Wir haben deinen numidischen Schreiber aufgegriffen, o Syndicus.“
„Hat auf dem Forum herumgelungert …“
(Wachen in Asterix 36: Der Papyrus des Cäsar)-
Das stimmt, meine Kenntnisse sind leider mehr als veraltet - muss ich mich zu und <nobr> mal wieder updaten. Habe nun umformatiert und 2 sections gemacht (um ein Spaltenlayout zu bekommen - dabei hat jede section leider mehrere Überschriften). Innerhalb der sections übernehmen nun articles die Formatierung.
Wenn hierbei die sections nun (immer noch) missbräuchlich verwendet werden - wie bekäme ich denn dann 2 Spalten mit jeweils eigenen Linkbutton-Reihen unterbrochen von Themenüberschriften hin (bsp. source folgt noch)?
-
@@Reth
Habe nun umformatiert und 2 sections gemacht (um ein Spaltenlayout zu bekommen - dabei hat jede section leider mehrere Überschriften). Innerhalb der sections übernehmen nun articles die Formatierung.
Das hört sich nicht richtig an. Genaueres, wenn du zeigst, was du gemacht hast.
Wenn hierbei die sections nun (immer noch) missbräuchlich verwendet werden - wie bekäme ich denn dann 2 Spalten mit jeweils eigenen Linkbutton-Reihen unterbrochen von Themenüberschriften hin
Dazu müsstest du die Fragen beantworten, wie es denn aussehen soll. Vermutlich ist die Antwort Flexbox. Vielleicht aber auch Multiple column layout.
(bsp. source folgt noch)?
Na dann warten wir mal …
LLAP 🖖
--
„Wir haben deinen numidischen Schreiber aufgegriffen, o Syndicus.“
„Hat auf dem Forum herumgelungert …“
(Wachen in Asterix 36: Der Papyrus des Cäsar)
-
-
-
-
Hallo
Ohne zumindest den HTML-Quelltext deiner Navigation zu kennen können wir dir nicht helfen.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">HTML4 ist veraltet, neue oder überarbeitete Seiten sollten mit HTML5 erstellt werden.
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" :) )? Oder gibt es da Besseres?
Keine Ahnung wie alt du bist. Tabellen zum Layouten sind bereits seit dem Jahr 2000 (Einführung von CSS2) veraltet.
Für ein "Spaltenlayout" gibt es mehrere Möglichkeiten. Aktuell und speziell dafür erdacht ist das Flexbox-Modell ( display: flex; )
Die Seite ist nur für Monitore und Laptops vorgesehen, nicht für mobilere Endgeräte wie Tablets und Smartphones.
Für korrektes HTML und CSS spielt das Endgerät keine Rolle.
Gruss
MrMurphy
-
@@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 isth1, die Überschriften der 2. Hierarchie-Ebeneh2usw. Das hat nichts mit der gewünschten Schriftgröße zu tun; die bestimmst du mit CSS.<nobr><H4> 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. ? 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
ulbzw.olauszeichnen:<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)-
Vielen Dank.
Uff, nun hab ich oben schon geantwortet. Hatte bereits auf sections und articles umgestellt, bevor ich das hier gelesen hatte. Aber wohl auch nicht ganz im Sinne des Erfinders. Tja, bin nicht mehr der Jüngste und meine Kenntnisse stammen noch von Anfang der 2000er (zwar bis ca. 2008, aber durch veraltete Technologien, waren wir das begrenzt, was die Verwendung von CSS, AJAX und Co. anging).
-
-
-
-
Hallo Reth,
kurze Frage:
Gibt es hierfür eine Möglichkeit?
kurze Antwort:
Ja.
längere Antwort:
Wenn du genauer beschreibst, was du eigentlich vorhast, kann man dir zielgerichteter helfen.
Bis demnächst
Matthias--
Wenn eine Idee nicht zuerst absurd erscheint, taugt sie nichts. (Albert Einstein) -
Tach,
Ich möchte gern eine class für mehrere hrefs verwenden, damit ich nicht das class-Attribut an jeden href einzeln eintragen muss.
meinst du mit „href“ ein a-Element in HTML?
Damit es nicht zu einfach wird, möchte ich gern einer Gruppe von hrefs eine class zuweisen, einer anderen Gruppe von hrefs eine andere class.
Falls die Antwort auf meine vorstehende Frage ja lautet, dann ist die Antwort hier vielleicht eine der vorhandenen Formen des Attributselektors: https://wiki.selfhtml.org/wiki/CSS/Selektoren/Attributselektor/Wert, https://wiki.selfhtml.org/wiki/CSS/Selektoren/Attributselektor/Teilübereinstimmung. Damit könntest du auf ähnliche Links (z.B. alle Links, die mit https:// beginnen oder die auf den Server example.org zeigen) mit CSS reagieren, ohne eine Klasse setzen zu müssen.
mfg
Woodfighter