zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Verschachteltes Menu - CSS aufräumen und bündige Links

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 21.09.2009, 15:44
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 16.11.2007
Beiträge: 381
ChOpSueY! befindet sich auf einem aufstrebenden Ast
Standard 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.
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 21.09.2009, 19:59
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 16.11.2007
Beiträge: 381
ChOpSueY! befindet sich auf einem aufstrebenden Ast
Standard

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ß
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 21.09.2009, 20:02
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.775
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

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.

Geändert von fricca (21.09.2009 um 20:05 Uhr)
Mit Zitat antworten
  #4 (permalink)  
Alt 21.09.2009, 20:09
Neuer Benutzer
neuer user
 
Registriert seit: 20.09.2009
Beiträge: 25
niemand befindet sich auf einem aufstrebenden Ast
Standard

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)
Mit Zitat antworten
  #5 (permalink)  
Alt 21.09.2009, 20:12
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.775
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

Zitat:
Wenn du text-indent einfach zu padding-left umbenennst, dann überschreibst du damit eine andere padding-Vorgabe oder wirst von ihr überschrieben. Du musst daher herausfinden, welches padding davon überschrieben wird und dessen Wert dazuaddieren bzw. umgekehrt sicherstellen, dass keine anderen Paddings diesen neuen Wert überschreiben.


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.
Mit Zitat antworten
  #6 (permalink)  
Alt 21.09.2009, 20:14
Neuer Benutzer
neuer user
 
Registriert seit: 20.09.2009
Beiträge: 25
niemand befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von fricca Beitrag anzeigen
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.
Das bezog sich nicht auf deinen Hinweis, sondern war ein Rat an den Threadersteller.
Mit Zitat antworten
  #7 (permalink)  
Alt 21.09.2009, 20:44
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 16.11.2007
Beiträge: 381
ChOpSueY! befindet sich auf einem aufstrebenden Ast
Standard

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ß
Mit Zitat antworten
  #8 (permalink)  
Alt 21.09.2009, 20:47
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.775
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

Deine Links brauchen keine Breite, auch keine verkürzte.
#contentleft braucht eine Breite.
Mit Zitat antworten
  #9 (permalink)  
Alt 21.09.2009, 20:55
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 16.11.2007
Beiträge: 381
ChOpSueY! befindet sich auf einem aufstrebenden Ast
Standard

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
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 21.09.2009, 20:59
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.775
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

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!

Geändert von fricca (21.09.2009 um 21:21 Uhr)
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ä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


Alle Zeitangaben in WEZ +2. Es ist jetzt 12:42 Uhr.