zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden li:before mit Iconfont - Text springt

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 10.06.2016, 11:50
Benutzerbild von mimii
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 15.08.2005
Beiträge: 181
mimii befindet sich auf einem aufstrebenden Ast
Standard li:before mit Iconfont - Text springt

Hallo ins Forum,

ich habe ein Dropdownmenü bei dem die Menüpunkte, die ein Untermenühaben mit einem Pfeil nach rechts dargestellt werden
HTML-Code:
nav ul li.hasSub:before {
	font-family: FontAwesome;
	content: "\f0da";
	color:#666; 
	font-size:1em;
}
Beim hover klappt das Menü auf und der Pfeil nach rechts wird durch einen Pfeil nach unten ausgetauscht
HTML-Code:
nav ul li.hasSub:hover:before {
	font-family: FontAwesome;
	content: "\f0d7";
	color:#666; 
	font-size:1em;
 }
Funktioniert auch wunderbar, nur der Text hinter dem Pfeil springt nach rechts wenn der Pfeil nach unten angezeigt wird. Das passiert vermutlich deshalb, weil beide Pfeile nicht identisch breit sind. Der Pfeil nach rechts ist schmäler, der nach unten breiter. Ich habe mit widht, padding und text-indent gespielt, klappt aber alles nicht.

Der Pfeil nach rechts ist dieser hier, der nach unten ist dieser

Wie kriegt man das in den Griff?

Danke für n Tipp und Gruß
mimii
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 10.06.2016, 12:03
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 02.01.2012
Beiträge: 487
dazzle89 wird schon bald berühmt werden
Standard

Der Code reicht nicht aus um dir helfen zu können.

Hast du nen Link zur Seite oder den gesamten Code?
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 10.06.2016, 13:11
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 10.01.2010
Beiträge: 1.123
MrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer Mensch
Standard

Hallo

Zitat:
Das passiert vermutlich deshalb, weil beide Pfeile nicht identisch breit sind. Der Pfeil nach rechts ist schmäler, der nach unten breiter.
Richtig.

Zitat:
Ich habe mit widht, padding und text-indent gespielt, klappt aber alles nicht.
Weil Text, zu denen auch die Pfeile gehören, Inline-Elemente sind. Die reagieren nicht auf Größenangaben.

Helfen sollten folgende CSS-Angaben:

Code:
nav ul li.hasSub::before {
   font-family: FontAwesome;
   content: "\f0da";
   color:#666; 
   font-size:1em;
   display: inline-block;
   width: 1em;
   margin-right: 0.5em;
}
width musst du so breit wählen dass der breitere Pfeil abgedeckt ist. Mit margin-right kannst du den Abstand zum folgenden Text wählen. Die Größe kannst du natürlich noch anpassen.

Gruss

MrMurphy
Mit Zitat antworten
  #4 (permalink)  
Alt 10.06.2016, 13:24
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 2.247
cloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblick
Standard

Auch wenn mit MrMurphys Post das Problem wohl gelöst ist, ein weiterer Denkansatz: Wieso nicht einfach den Pfeil mit Transformations drehen? Dann könnte man auch eine Animation dafür vergeben und der Pfeil müsste nicht ausgetauscht werden. Ist aber nur eine Idee, muss natürlich nicht so gemacht werden.
Mit Zitat antworten
  #5 (permalink)  
Alt 10.06.2016, 13:38
Benutzerbild von mimii
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 15.08.2005
Beiträge: 181
mimii befindet sich auf einem aufstrebenden Ast
Standard

Vielen Dank für eure rasche Hilfe

Mit diesen Angaben ist das Problem gelöst
HTML-Code:
   display: inline-block;
   width: 1em;
   margin-right: 0.5em;
Grüße
mimii
Mit Zitat antworten
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
Wrapper wächst nicht mit, keine Floats maclady CSS 11 10.02.2010 18:30
Wachsende Container Andy CD CSS 13 10.02.2010 14:08
DIV bis GANZ unten burnZ CSS 5 27.07.2008 14:14
Helft mir. Ich habe voll die Leseschwäche nick CSS 12 15.01.2008 21:52
Problem mit div und Höhe deep4 CSS 2 13.11.2007 21:03


Alle Zeitangaben in WEZ +2. Es ist jetzt 09:18 Uhr.