Klickbarer Bereich beim "I" vergrößern

[TZP]

Moinz.
Ich hab ne UL und jedes LI beinhaltet einen Buchstaben, und alles ohne Tabelle. Das sieht recht nice aus und alles klappt auch prima. Was mich interessiert: Der Buchstabe "I" ist ja relativ schmal. Dementsprechend ist auch der klickbare HREF-Bereich nix für Choleriker mit zittrigen Fingern. Gibt es ne Möglichkeit diesen Bereich zu verbreitern?

-bedank-
TZP

 

[Gilles]

Erst einmal eine andere Frage. Ist "I" wirklich aussagekräftig genug für den Benutzer?
Aber um deine frage zu beantworten. Denke, wenn du mit CSS die Breite angibst, ist der klickbare Bereich auch größer. Ansonsten ein Leerzeichen hinzufügen mit   (seeeehr unschön)
Würde einfach sagen du hast folgende Möglichkeiten:
- Anderen Text anstatt I
- Schrift vergrößern
- Link breiter machen mit CSS

 

[Efchen]

Erweitere den Anchor (<a>) einfach auf die Größe des <li>. Dazu musst Du aus dem <a> aber auch noch ein Block-Element machen. Dann kann man in das gesamte Listenelement klicken, also auch neben den Buchstaben.

Aber in jedem Fall ist das natürlich keine HTML-Frage, denn es geht ja nicht um die Semantik, sondern das Aussehen und das macht man ausschließlich mit CSS.

 

[Gilles]

Erweitere den Anchor (<a>) einfach auf die Größe des <li>. Dazu musst Du aus dem <a> aber auch noch ein Block-Element machen. Dann kann man in das gesamte Listenelement klicken, also auch neben den Buchstaben.

Eine sehr schöne Methode. :grin:

Ziehe meine Methoden zurück. Diese ist dafür wohl am besten geeignet ^^

 

[Efchen]

Das ist eine Methode, die man eigentlich immer bei Menüs benutzen sollte, die Schaltflächen bieten, also eine feste Breite und so. Man ist als Nutzer immer versucht, irgendwo auf die Schaltfläche zu klicken, nicht nur genau auf den Text. Das erleichtert es ungemein. Und immer genau auf Text zielen zu müssen, ist ungeheuer nervig.

Ich gehöre selber zu der Gruppe "Choleriker mit zittrigen Fingern" :-)

 

[TZP]

Ah, ich danke euch. Ich hab es mit dem breiteren A-Tag gemacht.

.testliste a{
    width: 20px;
    display: inline-block;
}

Fertig und gut. :)
TZP

 

[Efchen]

display:block wäre insofern besser, als dass das dann auch ältere Browser verstehen. Meines Wissens kann der IE6 kein inline-block.

 

[Silar]

display: inline-block;

Widerspricht sich das nicht?

TZP:
Ich hätte das anders gelöst, indem ich die <ul> eine ID gegeben hätte, und den Anchor(<a>) mit CSS angesprochen hätte, ohne eine neue Klasse definieren zu müssen:

ul#navi a {
...
}

 

[TZP]

Das inline-block wird benötigt, da ich die Buchstaben -fast- als Quadrat angeordnet habe. Nehme ich nur block, funzt es im FF nich mehr. Der IE6 macht, zu meiner Überraschung, zur Abwechslung mal keine Zicken. ^^

Die Klasse gab es schon vorher und wird noch für anderes Zeugs innerhalb der UL gebraucht. Deine Anmerkung is nich verkehrt aber so kann ich es besser zuordnen. :)

 

[Efchen]

Ich hätte das anders gelöst, indem ich die <ul> eine ID gegeben hätte, und den Anchor(<a>) mit CSS angesprochen hätte, ohne eine neue Klasse definieren zu müssen:

Der Unterschied zwischen seiner und Deiner Lösung ist, dass er eine Klasse statt einer ID benutzt hat.

Nehme ich nur block, funzt es im FF nich mehr.

Ich benutze das regelmäßig und habe damit keine Probleme.