Seitenname in <span></span> reinsetzen

Hallo zusammen

Meine Contao-Version: 2.11.3

Also: ich möchte in der Menüleiste bei einem Link statt des Seitennamens ein Hintergrundbild haben und den Seitennamen-Text (nicht den Seitentitel) verschwinden lassen. Die einfachste Lösung wäre, wenn man das Hintergrundbild per css über den a-Tag legt, den Seitennamen in einen <span>-Tag setzt und dann den Seitennamen-Text (den span-Tag) per css verschwinden lässt. Nur: manche Browser (IE, Opera) akzeptieren (wohl aus Sicherheitsgründen) kein style="color: transparent;" und in der Seitenstruktur kann man als Seitennamen keinen HTML-Tag + Text einfügen.

Ich hab mir bereits das Problem mit &reg; angesehen und im Wiki auch die Sache mit dem nicht anzuzeigenden Seitentitel gefunden. So wirklich fündig bin ich aber nicht geworden, wie ich mein Problem lösen könnte.

Wer hat eine Idee?

Vielen Dank und schöne Grüße, Sharky

lass den span doch per display: none; verschwinden. musst dann nur dem a-tag eine feste größe geben.

Handelt es sich um den Home-Link?

Wenn ja, könntest du das navigations-Template anpassen:

PHP-Code:

---

<ul class="<?php echo $this->level; ?>">
<?php foreach ($this->items as $item): ?>
    
    <?php if ($item['class'] == 'first' && $this->level == 'level_1' ): ?>
            <li <?php if ($item['class']): ?> class="<?php echo $item['class']; ?>"<?php endif; ?> id="homelink"><a href="/"><img src="/tl_files/pfad/zum/bild.gif" alt="Home" id="homelink"/></a></li>

     <?php elseif ($item['isActive']): ?>
<li class="active<?php if ($item['class']): ?> ...

---

hab's nicht getestet...

Macht man sowas üblicherweise nicht mit text-indent:;? Man verschiebt so den Text aus dem sichtbaren Bereich und gibt, wie schon vermutet, dem Link eine Hintergrundgrafik.
Das ist eigentlich die Technik, die auch bei Sprite-Navigationen angewendet wird, siehe: http://de.contaowiki.org/Navigation_...fiken_-_Sprite

Wenn das nur bei einem Punkt so sein soll, dann eben nur bei einem. Grundsätzlich reicht es dafür aus, der jeweiligen Seite in der Seitenstruktur eine CSS Klasse mitzugeben - die wird dann auch an den entsprechenden Navigationspunkten zu finden sein. Damit läßt sich alles regeln.

Gruß
Thomas

wenn mit text-indent, dann die ie hacks nicht vergessen:
http://stackoverflow.com/questions/2...working-in-ie7

Hmm, also ich hab jetzt mal meine Projekte kurz überflogen, wo ich mit negativem text-indent arbeite... da gibts nirgends Probleme mit IE7. Und spezielle Hacks habe ich nicht verwendet.
Für alle Browser davor passe ich nichts mehr an.

Gruß
Thomas

habs auch grad auch nochmal getestet. hast teilweise recht ;) bei inputs vom typ submit oder button funktionierts nur nicht

Hallo zusammen,

vielen Dank für Eure interessanten Antworten!

Ahhhh..... "text-indent" ist das Zauberwort + die feste Größe für den a-Tag :)

Wieder was gelernt!

Vielen Dank für Eure Hilfe und schöne Grüße, Sharky

Bitte noch eine kurze Frage: können IE 7 und niedriger den z-index-Befehl nicht lesen?

Danke schon mal und Grüße, Sharky

Gem. dieser etwas älteren Seite: http://www.css4you.de/z-index.html kann der IE das seit Version 5. Aber eine Contaoseite mit dem IE <=7 wird eh schon hakeln vermute ich.

Zitat:

---

Zitat von RainerG

Gem. dieser etwas älteren Seite: http://www.css4you.de/z-index.html kann der IE das seit Version 5. Aber eine Contaoseite mit dem IE <=7 wird eh schon hakeln vermute ich.

---

Danke für den Link, den kenne ich. Dachte nur, dass ja nicht alles zu 100% stimmen muß, was im Netz steht.

Der IE 8 (unter Win Vista) hat eine Funktion, mit der man "ältere IE-Versionen" simulieren kann. Keine Ahnung, welche Version da zugrunde gelegt wird. Auf alle Fälle wird hier bei meinem schönen, css-formatierten ausklappbaren Menü der ul.level_2 zwar angezeigt, aber der Untergrund scheint durch, obwohl ich dem ul- und dem li-Tag eine Hintergrundfarbe zugewiesen habe. Die Zuweisung von entsprechendem z-index hat keinen Erfolg und ist vermutlich das eigentliche Problem. Bei der "normalen" IE 8-Version sieht der level_2-Hintergrund aus wie er aussehen soll. (eine IE 6-Simulation kann es wohl nicht sein, denn der kann hover nicht interpretieren; sollte demnach eher eine IE 7-Simulation sein).

Ansonsten sieht meine Seite auch mit dieser "IE-7-Simulation" recht vernüftig aus (bis auf ein inline-block-Problem, das der IE 7 auch nicht interpretieren kann), obwohl ich fast keine IE 7-angepassten css-Definitionen verwendet habe. Allerdings halte ich mich mit width- und height-Angaben, so gut es geht, zurück, damit genug "Luft" bleibt. Das ist echt zum Haareraufen mit dem IE.... Noch zu Zeiten von IE 6 war's aber deutlich schlimmer... Microsoft scheint so langsam dazu zu lernen...

Wenn niemand eine Idee dazu hat, ist's auch nicht schlimm... Sollen sich die Leute doch einen vernünftigen und aktuellen Browser installieren, z. B. Firefox.

Vielen Dank und Grüße, Sharky