Link fett darstellen

[Jnnbo]

Guten Morgen,

ich baue meine Taps wie folgt zusammen

<ul class="rtabs">
	<li><span>1</span><a href="#wk1" style="margin-left:10px;">Übersicht</a></li>
	<li><span>2</span><a href="#wk2" style="margin-left:10px;">Kundendaten</a></li>
	<li><span>3</span><a href="#wk3" style="margin-left:10px;">Übersicht</a></li>
</ul>        

Die einzelnen Bereich werden so aufgerufen

/warenkorb#wk1
/warenkorb#wk2
/warenkorb#wk3

<div id="wk1">
  <h3>Artikel</h3> 
</div>

<div id="wk2"> 
  <h3>Kundendaten</h3> 
</div>

<div id="wk3"> 
  <h3>Übersicht</h3> 
</div>

Jetzt möchte ich gerne, wie im Titel schon geschrieben das aktive Tab Fett (<strong></strong>) darstellen. Allein mit CSS komme ich hier wohl nicht weiter? Müsste ich also mit PHP prüfen was oben in der URL steht?

PS: Das Inline CSS oben in den Links wird später wieder entfernt nur ich möchte in der Entwicklung nicht ständig von Datei zu Datei wechseln.

[Der Martin]

Hallo,

/warenkorb#wk1
/warenkorb#wk2
/warenkorb#wk3

<div id="wk1">
  <h3>Artikel</h3> 
</div>

<div id="wk2"> 
  <h3>Kundendaten</h3> 
</div>

<div id="wk3"> 
  <h3>Übersicht</h3> 
</div>

Jetzt möchte ich gerne, wie im Titel schon geschrieben das aktive Tab Fett (<strong></strong>) darstellen. Allein mit CSS komme ich hier wohl nicht weiter?

doch, das ist ein Fall für die Pseudoklasse :target. Damit kannst du das Element selektieren, das durch den Fragment Identifier (Anker) adressiert wird. Und dann brauchst du auch das HTML-Element strong nicht mehr, sondern kannst das ausschließlich mit CSS abfrühstücken.

So long,
 Martin

[Jnnbo]

Hallo Martin,

doch, das ist ein Fall für die Pseudoklasse :target. Damit kannst du das Element selektieren, das durch den Fragment Identifier (Anker) adressiert wird. Und dann brauchst du auch das HTML-Element strong nicht mehr, sondern kannst das ausschließlich mit CSS abfrühstücken.

danke für den Vorschlag, hab mir diese Seite angesehen. Leider verstehe ich :target nicht richtig, wollt es so umsetzten:

<ul class="rtabs">
	<li><span>1</span><a href="#wk1" style="margin-left:10px;">Übersicht</a></li>
	<li><span>2</span><a href="#wk2" style="margin-left:10px;">Kundendaten</a></li>
	<li><span>3</span><a href="#wk3" style="margin-left:10px;">Übersicht</a></li>
 </ul>        

.rtabs u li a:target {
	font-weight:bold;
}

leider ohne Erfolg.

[Tabellenkalk]

Hallo,

.rtabs u li a:target {
	font-weight:bold;
}

leider ohne Erfolg.

Wieviele u-Elemente hast du denn zwischen .rtabs und li?

Gruß
Kalk

[Jnnbo]

Hallo Tabellenkalk,

Wieviele u-Elemente hast du denn zwischen .rtabs und li?

<ul class="rtabs">
	<li><span>1</span><a href="#wk1" style="margin-left:10px;">Übersicht</a></li>
	<li><span>2</span><a href="#wk2" style="margin-left:10px;">Kundendaten</a></li>
	<li><span>3</span><a href="#wk3" style="margin-left:10px;">Übersicht</a></li>
 </ul>     

gar keines? Da ich ja mein ul mit .rtabs anspreche.

[Auge]

Hallo

Wieviele u-Elemente hast du denn zwischen .rtabs und li?

gar keines? Da ich ja mein ul mit .rtabs anspreche.

.rtabs u li a:target {
	font-weight:bold;
}

Soso (dein Code).

Sei's drum. Die SelfHTML-Seite zu :target macht es natürlich einfach und spricht in seinem Beispiel nur :target an. Mit .rtabs li a:target solltest du an deine Elemente herankommen, :target sollte es aber auch tun, denn angesprochen wird es nur dann, wenn das Fragment der URL mit dem Inhalt einer der IDs übereinstimmt.

Tschö, Auge

[Jnnbo]

Hallo Auge,

Soso (dein Code).

was willst du mir mit dieser Bemerkung sagen? Das ist mein Code, wie er derzeit auf meiner Seite vorhanden ist.

[Auge]

Hallo

Das ist jetzt nicht dein Ernst!?

Soso (dein Code).

was willst du mir mit dieser Bemerkung sagen? Das ist mein Code, wie er derzeit auf meiner Seite vorhanden ist.

Lesen musst du schon selbst.

Du gibst Code an, …

.rtabs u li a:target

… der wegen eines Fehlers zu Fragen …

Wieviele u-Elemente hast du denn zwischen .rtabs und li?

… führt und schreibst als Antwort etwas …

gar keines? Da ich ja mein ul mit .rtabs anspreche.

… , das total an der Frage vorbei geht.

Was will ich dir nun wohl mit dem Zeigen deines Codes und der Verlinkung deines Postings, um dies zu beweisen, sagen?

1. Die Nachfrage seitens Tabellenkalk ist berechtigt, weil zwischen der ul mit der Klasse „rtabs“ und deren li keine u sind und im Übrigen auch nicht sein dürfen.
2. Mir ist nach Jux und Dallerei, weil der Freitag naht.

Tschö, Auge

[Matthias Apsel]

Hallo Auge,

.rtabs u li a:target

1. Die Nachfrage seitens Tabellenkalk ist berechtigt, weil zwischen der ul mit der Klasse „rtabs“ und deren li keine u sind und im Übrigen auch nicht sein dürfen.

Aus dem Selektor geht nicht hervor, dass die genannten li deren li sind ;-p

Bis demnächst
Matthias

[Auge]

Hallo

.rtabs u li a:target

1. Die Nachfrage seitens Tabellenkalk ist berechtigt, weil zwischen der ul mit der Klasse „rtabs“ und deren li keine u sind und im Übrigen auch nicht sein dürfen.

Aus dem Selektor geht nicht hervor, dass die genannten li deren li sind ;-p

<ningel /> Jaja, hast ja recht. Zumindest war gewünscht, die li der nämlichen ul zu selektieren.

Tschö, Auge

[Gunnar Bittersmann]

@@Jnnbo

Wieviele u-Elemente hast du denn zwischen .rtabs und li?
gar keines?

Eben. Was also soll .rtabs u li a:target selektieren?

Und li gehört da ebenfalls nicht in den Selektor rein.

LLAP

[Jnnbo]

Hallo Gunnar,

Eben. Was also soll .rtabs u li a:target selektieren? Und li gehört da ebenfalls nicht in den Selektor rein.

aber auch dieses funktioniert nicht

.rtabs a:target {
	font-weight:bold;
}

[Gunnar Bittersmann]

@@Jnnbo

aber auch dieses funktioniert nicht

.rtabs a:target {
	font-weight:bold;
}

Selektorspezifität? Wird die Angabe überschrieben? Was sagt denn das Entwicklerwerkzeug deines Browsers?

Was ist das eigentlich für eine Schriftart? Webfont? Hast du vielleicht dafür gesorgt, dass normale und fette Schrift dieselbe Schriftdatei verwenden?

</Glaskugel>

LLAP

[Tabellenkalk]

Hallo,

Hast du vielleicht dafür gesorgt, dass normale und fette Schrift dieselbe Schriftdatei verwenden?

Nö, er hat dafür gesorgt, dass die Schrift sowieso schon fett ist.

Gruß
Kalk

[Jnnbo]

Hallo Tabellenkalk,

Nö, er hat dafür gesorgt, dass die Schrift sowieso schon fett ist.

die Schrift ist nicht fett, rede doch bitte kein scheiß.

[Tabellenkalk]

Hallo,

die Schrift ist nicht fett, rede doch bitte kein scheiß.

H3 wird normalerweise fett formatiert.

Gruß
Kalk

[Jnnbo]

Hallo Tabellenkalk,

H3 wird normalerweise fett formartiert.

sorry, ich verstehe jetzt nicht den Zusammenhang zu H3? H3 kommt in meinem Text vor aber NICHT in den ul li

<ul class="rtabs">
	<li><span>1</span><a href="warenkorb#wk1" style="margin-left:10px;">Übersicht</a></li>
	<li><span>2</span><a href="warenkorb#wk2" style="margin-left:10px;">Kundendaten</a></li>
	<li><span>3</span><a href="warenkorb#wk3" style="margin-left:10px;">Übersicht</a></li>
</ul>

[Tabellenkalk]

Hallo,

sorry, ich verstehe jetzt nicht den Zusammenhang zu H3? H3 kommt in meinem Text vor aber NICHT in den ul li

<ul class="rtabs">
	<li><span>1</span><a href="warenkorb#wk1" style="margin-left:10px;">Übersicht</a></li>
	<li><span>2</span><a href="warenkorb#wk2" style="margin-left:10px;">Kundendaten</a></li>
	<li><span>3</span><a href="warenkorb#wk3" style="margin-left:10px;">Übersicht</a></li>
</ul>

Mit dem css-Target-Attribut kannst du Elemente stylen, auf die dein Link zielt. d.h. du hast hier drei Links, die auf deine drei divs mit den IDs wk1-3 zielen. In diesen hast du H3-elemente die du stylen kannst. Da sie bereits fett sind, durch Browser-Vorgaben, kann ein font-weight:bold natürlich nix mehr ausrichten.

Du willst aber eigentlich die Links selber stylen. Dann müsstest du das Konstrukt so umbauen, dass sie selber zum target werden.

Gruß
Kalk

[Jnnbo]

Hallo Tabellenkalk,

Du willst aber eigentlich die Links selber stylen. Dann müsstest du das Konstrukt so umbauen, dass sie selber zum target werden.

so jetzt habe ich es auch verstanden, danke für die Erklärung. Das heißt also, ich müsste den Links selber eine ID mitgeben?

[Tabellenkalk]

Hallo,

Das heißt also, ich müsste den Links selber eine ID mitgeben?

Genau, nur dass du sie ja nicht mehrfach vergeben kannst. Jedoch könntest du mit dem Nachbarselektor arbeiten, nachdem die divs in die Linkliste gewandert und standardmäßig ausgeblendet sind.

Gruß
Kalk

[Gunnar Bittersmann]

@@Jnnbo

Das heißt also, ich müsste den Links selber eine ID mitgeben?

Nein, ich glaube eher, du müsstest das lesen und dir das anschauen.

LLAP

[Tabellenkalk]

Hallo,

gar keines?

Falls das eine Antwort sein soll: richtig. Warum behauptest du in deinem css dann etwas anderes?

Gruß
Kalk

[Tabellenkalk]

Hallo,

danke für den Vorschlag, hab mir diese Seite angesehen. Leider verstehe ich :target nicht richtig, wollt es so umsetzten:

Schau doch auch mal ins Wiki!

Gruß
Kalk

[Jnnbo]

Hallo Tabellenkalk,

Schau doch auch mal ins Wiki!

ich setzt das einfach mit PHP um wie ich es eigentlich machen wollte.

[Gunnar Bittersmann]

@@Jnnbo

Warum bleibst du eigentlich nicht in deinem Thread, wo es schon um dieses Ding geht? Auch um Styling.

LLAP

[Jnnbo]

Hallo Gunnar,

Warum bleibst du eigentlich nicht in deinem Thread, wo es schon um dieses Ding geht? Auch um Styling.

weil ich dachte, das eine hat mit dem anderen nichts mehr zu tun. Ich merke aber auch, dass ich mit den Tabs einfach nicht weiter komme. Die bereiten mir viel zu viel Probleme, die ich mit einzelnen Seiten nicht habe.