wie Referenzieren ?

[petro74]

Hallo all,

möchte mein offline [Intranet] Projekt Zug um Zug auf CSS umstellen. Und da ich noch ein ziemlicher Frischling in CSS bin hier mal zwei Fragen: Zum einen, wie Referenziere ich die unten stehende Zeile richtig dass nur der erste Text in blau erscheint?

<li><p style="color: #0033FF;" ><span style="font-size:1.55em">Schiffsreisen</span>&nbsp;&nbsp;<span style="font-size:1.6em">&nbsp;&nbsp;&#x27A2;&nbsp;&nbsp;</span>&nbsp;&nbsp;<a class="list-1" href="reisen_a.html#ausfluege">Ausflüge</a></p></li>

Desweiteren würde ich gerne die Syntax, wenn möglich mit den Leerzeichen,

  ➢  

für den Pfeil der zwischen den beiden Worten steht in die Auslagerungsdatei eintragen, da ich den Pfeil tausendfach benötige. Bitte gebt mir den genauen Syntax sowohl für die Auslagerungsdatei als auch für die Seite selbst.

[Der Martin]

Hi,

Zum einen, wie Referenziere ich die unten stehende Zeile richtig dass nur der erste Text in blau erscheint?

um zu verstehen, was du meinst, erlaube ich mir mal, deinen Code etwas lesbarer zurechtzurücken. Warum ist der überhaupt so konfus?

<li>
 <p style="color: #0033FF;">
  <span style="font-size:1.55em">Schiffsreisen</span>
  &nbsp;&nbsp;
  <span style="font-size:1.6em">&nbsp;&nbsp;&#x27A2;&nbsp;&nbsp;</span>
  &nbsp;&nbsp;
  <a class="list-1" href="reisen_a.html#ausfluege">Ausflüge</a>
 </p>
</li>

Als erstes würde ich mal die vielen   entsorgen und die Abstände mit dem dafür vorgesehenen Mittel regeln - mit CSS (margin und/oder padding).

<ul id="reisen">
 <li>
  <span>Schiffsreisen</span>
  <a class="list-1" href="reisen_a.html#ausfluege">Ausflüge</a>
 </li>
 ...
</ul>

Sieht doch schon viel übersichtlicher aus. Den Pfeil habe ich nicht vergessen; aber da der in gewisser Weise dem nachfolgenden Link zugeordnet ist, würde ich den auch da ranhängen. Und zwar als Pseudoelement ::before. Das rudimentäre Stylesheet-Beispiel enthält mal nur die Angaben, die auch deinem Beispiel entsprechen.

#reisen li
 { color: #03F;
 }
#reisen span
 { font-size: 1.55em;
 }
#reisen a.list-1
 { padding-left: 1.0em;
 }
#reisen a.list-1::before
 { padding-left:  0.5em;
   padding-right: 0.5em;
   content: "\u27A2;";
   font-size: 1.6em;
 }

Mit den Werten für padding und font-size kann man noch etwas spielen, aber im Wesentlichen sollte das schon dein ursprüngliches Beispiel widerspiegeln.

Bitte gebt mir den genauen Syntax ...

DIE Syntax.

So long,
 Martin

[Tabellenkalk]

Hallo,

Bitte gebt mir den genauen Syntax ...

DIE Syntax.

@Petro: Bitte schön. Ich weiß, dass du damit nix anfangen können wirst. Aber genau danach hast du halt gefragt...

Gruß
Kalk

[petro74]

Hallo Martin,

leider hat deine Hilfe nicht den vollen Erfolg gehabt. Zum einen habe ich mich nicht deutlich genug ausgedrückt und zum anderen funktioniert das mit dem Pfeil gar nicht. Auch nach langem Experimentieren hatte ich kein Erfolg.

Zuerst einmal noch zur Frage "warum ist der überhaupt so konfus". Ich bastle schon seit Jahren an diesem Projekt. Und hatte das Problem durch die vielen Einträge und damit auch den vielen Zeilen dass wenn ich eine Korrektur/Erweiterung ausführen wollte unter Umständen tausende von Zeilen scrollen musste. Dadurch dass ich die jeweilige Bildschirmzeile in eine Programmzeile gewandelt habe wurde die Gesamtzahl der Zeilen erheblich weniger. Außerdem sieht es im HTML Editor nur halb so konfus aus, nur hier durch den Umbruch sieht es so unmöglich aus.

Etwas grundsätzliches was ich vergessen habe zu sagen ist: Die (konfuse) Zeile ist für mich dreiteilig und zwar aus folgendem Grund,diese Teile werden immer und immer wieder gebraucht. Sie bestehen in diesem Fall aus dem Bereich mit der blauen Schrift erster Teil, der Pfeil ist der zweite Teil und der Rest ist der dritte Teil. Alle drei Teile werden wiederholt in diesem Projekt mit verändertem Text bzw. Hyperlink verwand. So dass ich sie alle einzeln in der Auslagerungsdatei mit projektübergreifenden Namen referenzieren möchte.

Der erste Teil mit der blauen Schrift funktioniert einwandfrei!

Der nachfolgende Freiraum ( padding-left: 1.0em; ) wird gar nicht so gebraucht bzw. stört sogar weil er mit dem dann folgenden Link zusammen fällt und die Hintergrundfarbe des Links annimmt beim überfahren mit der Maus. Es reicht der Freiraum den du dem Pfeil jeweils links und rechts zugewiesen hast, nur der, bzw. die Freiräume werden eben nicht angezeigt.

Der Link zu den Ausflügen wird ansonsten ganz normal wie gewünscht angezeigt.

Jetzt die Frage - was für Lösungen gibt es noch?

[Matthias Apsel]

Hallo petro74,

leider hat deine Hilfe nicht den vollen Erfolg gehabt. Zum einen habe ich mich nicht deutlich genug ausgedrückt und zum anderen funktioniert das mit dem Pfeil gar nicht. Auch nach langem Experimentieren hatte ich kein Erfolg.

Jetzt die Frage - was für Lösungen gibt es noch?

Ohne die konkrete Seite zu sehen, wahrscheinlich keine.

Bis demnächst
Matthias

[petro74]

Hallo Matthias,

es handelt sich eben um ein offline Projekt das nicht öffentlich ist. Offensichtlich konnte man mir mit meinen Angaben auch schon ein Stück weiter helfen.

Bis dahin

petro74

[quincunx]

Hallo petro

auf codePen gibts was zu schaun.

gr qx

[petro74]

hallo quincunx,

soll es ein Scherz sein oder übernehme ich hier die falschen Daten? Bekomme das Fragezeichen anstatt dem Pfeil und wenn ich dann den Unicode eingebe gibt dieser als Klartext. Alles andere als der Pfeil - mmh bin soweit wie vorher.

bis dann

petro74

[petro74]

Hallo quincunx,

war mein Fehler, habe die Daten falsch übernommen. Kannte diese Seite und damit die Vorgehensweise bislang nicht - Entschuldigung.

Bis dannn

petro

[petro74]

hallo nochmal all,

ich bin einen Schritt weiter gekommen mit quincunx's Hilfe. Aber diese Referenzierung hat noch einen Schönheitsfehler. Die Notierung des Pfeils kann nicht unabhängig vom ganzen genutzt werden. Zur besseren Erklärung hier mal zwei Schemabilder:

Gruppenüberschrift | Pfeil | Link | Pfeil | Link | usw.

oder

nur Link | Pfeil | Link | Pfeil | Link | usw.

Jeder, sagen wir mal Baustein, in den Feldern ist eigenständig. Wobei ich jetzt für die Gruppenüberschrift in Blau und Fett sowie für den schwarzen Pfeil die richtige Referenzierung bräuchte. Für die Link's habe ich es schon geschafft mit CSS zu referenzieren.

Sinn der ganzen Aufdrösselei ist es die einzelnen Bausteine nach Bedarf zusammen kopieren zu können, da das Projekt aus Link-Gruppen oder einzelnen Link's mit Verweisen zu weiteren Stichworten besteht.