wie richtig referenzieren?

[petro74]

Hallo all,

muss mich nochmal an das Forum wenden.

Zunächst der Hinweis auf Grund gemachter Erfahrungen der Hinweis, es handelt sich hier um ein reines offline Projekt. Die Gesamtsyntax ist zu umfangreich um sie im Rahmen des Forums vollständig anzuzeigen.

Mein Problem als echter CSS-Frischling ist das selektive Referenzieren. D.h. den richtigen Selektor zu finden bzw. den/die entsprechenden Tags um dann gezielt zu referenzieren. Folgende HTML-Ausgangssituationen bereiten mir Probleme in der Referenzierung:

<ul style="list-style-image:url('gif/balls/b_blue.gif')">
 <li>
  <p>
   <b>
   <font color="#0033FF" size="+1">Altmühltal</font>
   </b>
   <font size="4">&nbsp;&nbsp;&#x27A2&nbsp;&nbsp;</font>
   <font size="-1"><a href="DE-BY/DE-BY_a.html#DE-BY_a17">Detailinfo</a></font>
   <font size="4">&nbsp;&nbsp;&#x27A2&nbsp;&nbsp;</font>
   <font size="-1"><a title="Staat" href="DE/DE.html">Deutschland</a></font>
   <font size="4">&nbsp;&nbsp;&#x27A2&nbsp;&nbsp;</font>
   <font size="-1"><a title="Bundesland" href="DE-BY/DE-BY.html">Bayern</a></font>
  </p>
 </li>
</ul>

<div style="position:relative; left:25px; width:100%">
<ul class="kreis">
 <li>
  <b>
  <font size="+1" id="int_vz_a31"><a href="http://www.naturpark-altmuehltal.de/">Naturpark Altmühltal</a></font>
  </b>
  <font size="4">&nbsp;&nbsp;&#x27A2&nbsp;&nbsp;</font> 
  <font size="-1"><a href="DE-BY/DE-BY_l.html">Landschaft</a></font>
 </li>
</ul>
</div>

Auf Grund von Unterstützung hier aus dem Forum und in Eigenstudium bzw. experimentieren habe ich bis jetzt die reine HTML-Syntax so auf Trennung von Text und Layout umgesetzt:

<ul class="bluball">
 <li>
  <span>Altmühltal</span>
  <a class="list-1" href="DE-BY/DE-BY_a.html#DE-BY_a17">Detailinfo</a>
  <span></span>
  <a class="list-1" title="Staat" href="DE/DE.html">Deutschland</a>
  <span></span>
  <a class="list-1" title="Bundesland" href="DE-BY/DE-BY.html">Bayern</a>
 </li>
</ul>

<div style="position:relative; left:25px; width:100%">
<ul class="kreis">
  <li>
    <a class="list1b" id="int_vz_a31" href="http://www.naturpark-altmuehltal.de/">Naturpark        Altmühltal</a>
    <span></span>
    <a class="list-1" href="DE-BY/DE-BY_l.html">Landschaft</a>
  </li>
</ul>
</div>

In der externen CSS-Datei für das Layout habe ich dazu folgendes reverenziert:

 a.list1b {
   font-size: 1.6em; font-weight: bold;
   } 

 a.list-1 {
   font-size: 1.2em; font-weight: normal;
   }

 li span {
   color: #03F;
   font-size: 1.55em;
   font-weight: bold;
   }

 li span::after {
   padding-right: 0.5em;
   padding-left: 0.5em;
   font-size: 1.1em;
   color:#000;
   content: '➢';
   vertical-align:middle;
   }

Es ist für mich klar dass dies nicht die korrekte Umsetzung ist, erst recht ein leerer <span>-Tag, aber die Frage ist wie ist es richtig! Und wie bekomme ich es hin wenn <span>Altmühltal</span> alleine steht so dass nachfolgend kein Pfeil mehr angezeigt werden darf? Oder wenn hinter einem <a>-Tag, zweiter Teil meiner Notierung, ein Pfeil erscheinen soll? Ich komme einfach noch nicht klar mit den Zusammenhängen beim referenzieren in CSS.

Freue mich auf eure Hilfe

Pedro

[Gunnar Bittersmann]

@@petro74

Mein Problem als echter CSS-Frischling ist das selektive Referenzieren.

Selektieren wäre der richtige Begriff. Referenzieren meint auf eine Ressource zu verweisen: href.

<ul class="bluball">
 <li>
  <span>Altmühltal</span>
  <a class="list-1" href="DE-BY/DE-BY_a.html#DE-BY_a17">Detailinfo</a>
  <span></span>
  <a class="list-1" title="Staat" href="DE/DE.html">Deutschland</a>
  <span></span>
  <a class="list-1" title="Bundesland" href="DE-BY/DE-BY.html">Bayern</a>
 </li>
</ul>

Wenn alle Geschwisterkinder gleichen Typs (hier a) derselben Klasse angehören, ist das ein sicheres Indiz, dass die Klasse überflüssig ist (weil eben nichts klassifiziert wird).

Statt '.list-1' kannst du auch '.bluball a' selektieren.

Und eine Liste mit einem Item macht auch keinen Sinn. Das sollte eher so aussehen:

<div id="bluball">
  Altmühltal
  <a href="DE-BY/DE-BY_a.html#DE-BY_a17">Detailinfo</a>
  <a title="Staat" href="DE/DE.html">Deutschland</a>
  <a title="Bundesland" href="DE-BY/DE-BY.html">Bayern</a>
</div>

oder mit Liste

<div id="bluball">
  Altmühltal
  <ul>
    <li><a href="DE-BY/DE-BY_a.html#DE-BY_a17">Detailinfo</a></li>
    <li><a title="Staat" href="DE/DE.html">Deutschland</a></li>
    <li><a title="Bundesland" href="DE-BY/DE-BY.html">Bayern</a></li>
  </ul>
</div>

bzw.

<div id="bluball">
  <ul>
    <li>Altmühltal</li>
    <li><a href="DE-BY/DE-BY_a.html#DE-BY_a17">Detailinfo</a></li>
    <li><a title="Staat" href="DE/DE.html">Deutschland</a></li>
    <li><a title="Bundesland" href="DE-BY/DE-BY.html">Bayern</a></li>
  </ul>
</div>

wobei für bluball natürlich ein sinnvoller Name zu vergeben wäre und das div vielleicht lieber ein nav-Element wäre (hängt vom Inhalt ab, das geht aus deiner Beschreibung nicht hervor; ebensowenig ob Variante 2 oder 3 richtig wäre).

erst recht ein leerer <span>-Tag,

span-Element.

Und wie bekomme ich es hin wenn <span>Altmühltal</span> alleine steht so dass nachfolgend kein Pfeil mehr angezeigt werden darf?

Der Pfeil soll nur zwischen den Links erscheinen?

Bei Variante 1:

.bluball a:not(:first-of-type)::before { content: … }

oder

.bluball a:not(:last-of-type)::after { content: … }

(Das hätte den unerwünschten Effekt, dass der Pfeil auch verlinkt wäre anstatt ein Trenner zu sein. Aber das solte man mit 'pointer-events: none' wegbekommen.)

Bei Varianten 2 und 3 entsprechend für li.

LLAP 🖖

[marctrix]

Hej petro74,

muss mich nochmal an das Forum wenden.

Du musst nicht, du darfst - und zwar auch, wenn du nicht selber ein Problem hast, sondern einfach nur mal so ;-)

Zunächst der Hinweis auf Grund gemachter Erfahrungen der Hinweis, es handelt sich hier um ein reines offline Projekt. Die Gesamtsyntax ist zu umfangreich um sie im Rahmen des Forums vollständig anzuzeigen.

Danke dafür, aber mit dem hier geposteten Ausschnitten muss ich viel erraten. Ich hoffe, ich kann trotzdem helfen. Los geht's!

Es ist für mich klar dass dies nicht die korrekte Umsetzung ist, erst recht ein leerer <span>-Tag,

Das stimmt, aber was für ein Fortschritt im Vergleich zu deinem ursprünglichen Code! Herzlichen Glückwunsch, du hast schon sehr viel richtig gemacht!

aber die Frage ist wie ist es richtig! Und wie bekomme ich es hin wenn <span>Altmühltal</span> alleine steht so dass nachfolgend kein Pfeil mehr angezeigt werden darf?

Man kann Elemente abhängig von Ihrer Reihenfolge selektieren. So ist es zum Beispiel möglich das erste oder letzte Kind auszuwählen.

Du möchtest - falls ich es richtig verstehe - den Pfeil hinzufügen, wenn Altmühltal NICHT das letzte Element ist. Dafür gibt es auch einen Selektor.

Eine Liste mit Selektoren, die dir helfen könnten, findest du hier:

http://www.w3schools.com/css/css_pseudo_elements.asp

Und hier wird erklärt, wie du Elemente auswählst, auf die eine bestimmte Bedingung nicht zutrifft.

http://www.w3schools.com/cssref/sel_not.asp

Ich persönlich bevorzuge aber noch eine andere Möglichkeit.

Dazu muss man anders rum denken. Nämlich nicht: ich möchte einen Pfeil hinter einem Element, wenn danach noch ein Link kommt.

Sondern: wenn es einen Link gibt, soll der einen Pfeil vorangestellt bekommen. Dann wird es viel einfacher, weil du den Pfeil einfach dem Link mitgeben kannst.

Immer vorausgesetzt, dass ich dein Problem überhaupt richtig verstanden habe...

Oder wenn hinter einem <a>-Tag, zweiter Teil meiner Notierung, ein Pfeil erscheinen soll?

Dazu muss man wissen, unter welchen Umständen soll da ein Pfeil hinter dem Link erscheinen? Immer? Oder nur wenn eine bestimmte Bedingung zutrifft?

Ich komme einfach noch nicht klar mit den Zusammenhängen beim referenzieren in CSS. Freue mich auf eure Hilfe

Hoffe, dass das hilfreich war,

Marc