|
|||
Verschachteltes Menu - CSS aufräumen und bündige Links
Hallo an alle,
Ich habe hier ein Menü, welches eine ziemliche CSS-Suppe beinhaltet. Einige CSS-Eigenschaften sind doppelt und dreifach. Außerdem geht es darum die Textlinks bündig zu gestalten. Wie man sieht brechen die zwei Textlinks mit dem langen Text um, und schließen nicht bündig mit dem kurzen Textlink ab. Nun tue ich mich leider ziemlich schwer mit dem Ansprechen von verschachtelten <UL> und <LI>, sodass ich noch nicht auf des Rätsels Lösung gekommen bin. Herausgefunden habe ich, dass es am text-indent liegt. Wenn ich nun allerdings mit "padding-left" hantiere rutschen die Hintergrundbilder aus dem Linkbereich raus, was natürlich nicht sein soll. Ich habe hier mal ein Testcase gebastelt um alles nachvollziehen zu können. Vielleicht kann mir wer auf die Sprünge helfen. |
Sponsored Links |
|
|||
hm, scheint wohl noch zu kompliziert zu sein. Also ich habe nun nochmal viel überflüssiges weggekürzt. Wie ich das Problem mit den bündigen Textlinks in den Griff bekommen kann weiss ich allerdings nicht wirklich.
Ich müsste auf jeden fall auf das text-indent:20px; in "#contentleft ul li a:link,#contentleft ul li a:visited" verzichten. Allerdings wenn ich dann ein padding-left verwende rutscht der Link "Erste Ebene" bei dem ich ein Hintergrundbild + Hover-Hintergrundbild verwendet ebenfalls nach rechts und das Hintergrundbild stößt über den Rand. Wäre klasse wenn mir wer zumindest eine Richtung zeigen könnte. Lieben Gruß |
Sponsored Links |
|
|||
Richtung: Entferne alle überflüssigen Breitenangaben -- davon hast du jede Menge.
edit: Und nochwas: Schreib in die Regel für :hover nur das rein, was sich ändert. Du wiederholst den ganzen Sums, der sowieso schon für die Links gilt. Überflüssig, fehlerträchtig, schlecht zu warten.
__________________
Corina Rudel Online-Einsteigerkurs HTML/CSS | Buch: Fortgeschrittene CSS-Techniken Geändert von fricca (21.09.2009 um 20:05 Uhr) |
|
|||
Wenn du text-indent einfach zu padding-left umbenennst, dann überschreibst du damit eine andere padding-Vorgabe oder wirst von ihr überschrieben. Außerdem hilft vielleicht background-position: left center; statt background-position: right center;
Geändert von niemand (21.09.2009 um 20:11 Uhr) |
|
|||
Zitat:
Mein Hinweis zielte darauf ab, dass Padding in Verbindung mit einer Breitenangabe die Gesamtbreite erhöht, was sich am besten dadurch unterbinden lässt, dass man eben gar keine Breite angibt.
__________________
Corina Rudel Online-Einsteigerkurs HTML/CSS | Buch: Fortgeschrittene CSS-Techniken |
|
|||
Das bezog sich nicht auf deinen Hinweis, sondern war ein Rat an den Threadersteller.
|
|
|||
ok vielen Dank erstmal für die Tipps. Habe das überflüssige aus den :hover rausgenommen, dann das text-indent in ein padding-left umgewandelt und bei
#contentleft ul li ul li a:link,#contentleft ul li ul li a:visited habe ich die breite verkürzt und ebenfalls das text-indent in eine padding-left umgewandelt und dann die Breitenangabe verkürzt. background-postion: right center hat auch gut was gebracht, nun sieht es eigentlich so aus wie ich es haben will.... ....wenn da nicht der IE6 wäre, der nun verrückt spielt. Warum wird das nun so übern Haufen geschmissen? Gruß |
|
|||
Deine Links brauchen keine Breite, auch keine verkürzte.
#contentleft braucht eine Breite.
__________________
Corina Rudel Online-Einsteigerkurs HTML/CSS | Buch: Fortgeschrittene CSS-Techniken |
|
|||
huch logisch, weiss auch net wieso das with da ausm contentleft rausgeflogen is... Aber ohne Breitenangabe in dem
#contentleft ul li ul li a:link,#contentleft ul li ul li a:visited geht border-bottom über den Rand hinaus, jedenfalls im FF |
Sponsored Links |
|
|||
Dann mach die Breite halt kleiner.
edit: *seufz*, jetzt haben alle Links wieder Breiten. Nein, nicht die kleiner machen. Die eine einzige Breite, die nötig ist. Die von #contentleft!
__________________
Corina Rudel Online-Einsteigerkurs HTML/CSS | Buch: Fortgeschrittene CSS-Techniken Geändert von fricca (21.09.2009 um 21:21 Uhr) |
Sponsored Links |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Bräuchte Hilfestellung weil meine Seite nicht richtig angezeigt wird. | Picasso | CSS | 36 | 03.01.2011 20:41 |
Hilfe css Menu center | xXcyberXx | CSS | 5 | 28.11.2010 20:51 |
CSS Spry Menu Problem mit Hintergrund bei Mouseover | myron | CSS | 9 | 12.07.2009 14:34 |
Wege zum guten CSS - Ausgewählte Links | Sp33dy G0nz4l3s | Ressourcen | 1 | 27.05.2008 12:09 |
Formularbuttons und Links mit CSS gleich gestalten | Jürgen | CSS | 1 | 18.09.2003 19:33 |