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