CSS: <li> automatisch gleich Breit

skelle · 13.11.2010, 15:37

Hallo,
ich designe gerade an einem Dropdownmenü in CSS.
Das Hauptmenüt wird über eine "ul" realisiert genauso wie das Submenü.
Beim Hovern über ein Submenüelement soll bei dem wo sich gerade der Mauszeiger befindet ein kl. Pfeil rechtts aussen eingeblendet werden (siehe Bild).

Ich habe es bereits geschafft den Pfeil recht einblenden zu lassen sobald ich mit der Maus über das Menü fahre.

Problem: Da die Menütexte unterschiedlich lang sind, ist auch die Breite der einzelnen <li> Elemente unterschiedlich. Wird dann der Pfeil eingeblendet ist er natürlich immer an einer anderen Stelle.

Wie kann ich per CSS definieren das alle <li> Elemente die gl Breite haben - also so breit sind wie das Element mit dem längsten Text?

Bild: http://www.bild.me/bild.php?file=1303256menu.png

greetz skelle

Heiko R · 13.11.2010, 16:07

Du solltest den relevanten Code CSS/HTML hier posten oder, besser noch, eine Beispielseite verlinken anstatt eines Bildes.

Die Listenelemente wirst du nicht generisch alle gleich breit bekommen.
Du könntest aber eventuell den Pfeil absolut zum RECHTEN Rand des Elements positionieren

skelle · 13.11.2010, 16:25

http://psy-coding.com/sample/sample.html

Die <li> elemente sollten halt automatisch gleich breit sein ohne eine bestimmte Breite zu definieren

das mit dem rechts positionieren bringt aber auch nicht viel... da Pfeil horizontal immer an der gl stelle sein soll

Asipak · 13.11.2010, 16:34

Lass mal das floating und display:block; weg.

skelle · 13.11.2010, 16:46

ok wenn ich das float weglasse und width auf auto stelle funktioniert es in meiner sample.html

in das design wo es sich später einfügen soll, ist es aber nicht so leicht

dann muss ich wohl doch über die fixe breite gehen

Manko10 · 13.11.2010, 16:59

display: block für die LIs und fixe Breite für das UL.

Nicole · 19.11.2010, 16:32

Ja, ich hätte nun auch gesagt: ul eine Breite geben und bei den lis "display:block; overflow:hidden; width:100%"...

Aber da man ja nicht weiß, wie breit die ul letztendlich wird... Vielleicht reicht ja auch der li-Code aus?

Grüße
Nicole

Edit: Oder man gibt dem ul statt einer Breitenangabe ein padding von 5 px (oder so) links und rechts - wenn dann die lis 100% breit sind, dann sind doch alle gleich lang, oder?

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Thema bewerten
Thema bewerten:

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Menü mittels php automatisch an Inhalt von text-Datenbank anpassen - Lösung	UdoDirk	PHP Tipps 2010	0	15.07.2010 14:31
Text in Grafik automatisch skallieren...	Hawk	PHP Tipps 2010	3	28.01.2010 22:12
Nach Datenbankeintrag automatisch zur Website zurück?	Blade	PHP Tipps 2010	3	28.01.2010 15:29
Datenbank automatisch abrufen	djsky	PHP Tipps 2009	4	04.10.2009 21:54
Termine nach Ablauf automatisch aus der DB löschen oder ausblenden	Teela	PHP Tipps 2008	4	24.03.2008 12:29
Formulare automatisch ausfüllen lassen?	Marlboro	PHP Tipps 2008	4	23.08.2007 20:30
deckkraft mit php automatisch ändern	TaStEn	PHP Tipps 2006	3	25.03.2006 20:46
radio button automatisch setzen		HTML, Usability und Barrierefreiheit	2	11.10.2005 07:12
XML Tags automatisch schließen?	tekknotrip	PHP Tipps 2005-2	4	14.09.2005 11:51
Automatisch E-Mail Adressen erstellen lassen?		Beitragsarchiv	5	24.08.2005 15:36
Datum automatisch erhöht eingeben?!?		Datenbanken	3	02.06.2005 12:49
bildgröße automatisch anpassen		PHP Tipps 2004-2	9	10.12.2004 13:39
array auch automatisch erzeugt wenn..		PHP Tipps 2004-2	4	04.12.2004 12:33
[Erledigt] Zeilenumbrüche aus textarea automatisch ausgeben		PHP Tipps 2004	7	22.08.2004 12:39

13.11.2010, 15:37
skelle Benutzer Registriert seit: 29.09.2008 Beiträge: 40 PHP-Kenntnisse: Fortgeschritten	CSS: <li> automatisch gleich Breit Hallo, ich designe gerade an einem Dropdownmenü in CSS. Das Hauptmenüt wird über eine "ul" realisiert genauso wie das Submenü. Beim Hovern über ein Submenüelement soll bei dem wo sich gerade der Mauszeiger befindet ein kl. Pfeil rechtts aussen eingeblendet werden (siehe Bild). Ich habe es bereits geschafft den Pfeil recht einblenden zu lassen sobald ich mit der Maus über das Menü fahre. Problem: Da die Menütexte unterschiedlich lang sind, ist auch die Breite der einzelnen <li> Elemente unterschiedlich. Wird dann der Pfeil eingeblendet ist er natürlich immer an einer anderen Stelle. Wie kann ich per CSS definieren das alle <li> Elemente die gl Breite haben - also so breit sind wie das Element mit dem längsten Text? Bild: http://www.bild.me/bild.php?file=1303256menu.png greetz skelle


Mister Ad PHP Code Flüsterer Registriert seit: 21.08.2005 Beiträge: 4682 PHP-Kenntnisse: Fortgeschritten

13.11.2010, 16:25
skelle Benutzer Registriert seit: 29.09.2008 Beiträge: 40 PHP-Kenntnisse: Fortgeschritten	http://psy-coding.com/sample/sample.html Die <li> elemente sollten halt automatisch gleich breit sein ohne eine bestimmte Breite zu definieren das mit dem rechts positionieren bringt aber auch nicht viel... da Pfeil horizontal immer an der gl stelle sein soll

13.11.2010, 16:34
Asipak Moderator Registriert seit: 18.07.2005 Beiträge: 4.072	Lass mal das floating und display:block; weg.

13.11.2010, 16:46
skelle Benutzer Registriert seit: 29.09.2008 Beiträge: 40 PHP-Kenntnisse: Fortgeschritten	ok wenn ich das float weglasse und width auf auto stelle funktioniert es in meiner sample.html in das design wo es sich später einfügen soll, ist es aber nicht so leicht dann muss ich wohl doch über die fixe breite gehen

13.11.2010, 16:59
Manko10 Supermoderator HD Registriert seit: 16.03.2008 Beiträge: 8.706 PHP-Kenntnisse: Fortgeschritten	display: block für die LIs und fixe Breite für das UL. __________________ Refining Linux Advent Calendar series “24 Outstanding ZSH Gems”

19.11.2010, 16:32
Nicole Neuer Benutzer Registriert seit: 30.06.2010 Beiträge: 25 PHP-Kenntnisse: Anfänger	Ja, ich hätte nun auch gesagt: ul eine Breite geben und bei den lis "display:block; overflow:hidden; width:100%"... Aber da man ja nicht weiß, wie breit die ul letztendlich wird... Vielleicht reicht ja auch der li-Code aus? Grüße Nicole Edit: Oder man gibt dem ul statt einer Breitenangabe ein padding von 5 px (oder so) links und rechts - wenn dann die lis 100% breit sind, dann sind doch alle gleich lang, oder?