nicht angemeldet
Hallo,
ich bastel gerade einen einem persönlichen Stylesheet für diese Forum und bin da auf eine harte Nuß gestoßen.
Ich habe folgende Struktur:
<li><img src="..." alt="..."> <a href="..."></li>
Der Kundige erkennt sofort, das ist einer der manchmal ziemlich nervigen Icons vor den Links hier im SELFHTML Layout, in meinem Fall der Link #link-neuenachricht oben im Seitenkopf, den ich stark modifiziere. In etwa blende ich massig von der dämlichen Layouttabelle im Seitenkopf aus und strukturiere die verbleibenden Elemente neu, ob mit einer CSS-Tabellenkonstruktion oder mit float ist noch nicht ganz neu. Ziel ist in etwa ein horizontales Menü.
Wegen eines visuellen Effektes möchte ich das Icon vor dem obigen Link verschwinden lassen, ich plane, den Verweis hinterher zu einem das (ebenfalls zum Blockelement mutierten) Listenelement ausfüllenden Blockelement zu machen, also display:block; zu verwenden. Das Icon lasse ich mit display:none; verschwinden - allerdings sorgt dann das vor dem zum Blockelement mutiertem Verweis für einen für mich nicht sonderlich praktischen Zeilenumbruch, eine sogenannte »anonymous block box« im CSS-Kontext.
Ich habe an verschiedene Lösungen gedacht, aber keine hat so wirklich funktioniert:
Die Hoffnung, man könne mit CSS nicht nur auf Elemente, sondern auch auf Textknoten zugreifen: Ich habe etwas mit :nth-child() rumprobiert, aber es klappte natürlich nicht. Kann natürlich auch daran liegen, daß Firefox das noch nicht beherrscht, daß CSS Selektoren nicht auf Textknoten wirken halte ich aber für wahrscheinlicher. Wieso habe ich früher eigentlich gegrinst, wenn die Leute XPath als Selektorensprache für CSS 3 vorgeschlagen haben?
Wishful Thinking: Wenn das Bild eh ausgeblendet ist, dann ist doch der erste Buchstabe des Elementes a, ließe sich also über ::first-letter ansprechen. Klappt natürlich nicht.
Die optische Variante (so groß wird ein schon nicht sein): CSS bietet ja schon in der Version 2 mehr Anzeigemöglichkeiten als nur Block- oder Inlineelemente an. Zum Beispiel Compact Boxes oder noch besser Run-In Boxen. Beides krankt daran, daß das dämliche keine eigenes Element zum selektieren hat. Experimente, ob die vom erzeugte Line Box die jeweiligen Eigenschaften vom Elternelement (li - schon vergessen? ;) erben und trotzdem mit dem a-Element zusammenspielen würde, obwohl letzteres auch ein Kindelement des Listenelementes ist, gingen nicht wirklich erfreulich aus.
molily schlug im Chat vor, eventuell mit dem position von a herumzuspielen, eine solch häßliche und eventuell Fehler erzeugende Lösung wollte ich aus falsch verstandenem Ehrgeiz eigentlich vermeiden, ebenso wie absolute Positionierung.
Ich habe das dann für mich jetzt gelöst, daß ich für das Listenelement die (natürlich relative) Schriftgröße verkleinere, im Verweis dann wieder auf die vorherige Größe raufschraube. Erstaunlicherweise hat schon eine relativ unradikale Änderung (font-size:10%; und font-size:1000%) geholfen.
Aber ich bin neugierig: Fällt hier jemanden noch eine elegantere Lösung ein, die nicht so eines krudes Hacks bedarf? Irgend etwas, das dem Sinn von CSS näher kommt?
Tim