CSS Navigationsliste schneidet Icons ab

F

Furtano

Gast

• 22. Januar 2012

• #1

Hallo,

ich programmiere zum ersten mal eine Navigationsleiste mit Liste und Icon in CSS.

Das Problem:

Er zeigt das Icon (Pokerchips) nicht komplett an.
Ich habe schon versucht die height in der Liste zu ändern aber das bringt nichts.
Wenn ich die Schriftgröße groß genug mache, werden die Icons komplett angezeigt,
ich will die Schriftgröße aber nicht für Blinde machen.

Code:
http://furtano.de/poker/

Danke

 

Anhänge

• 
  chips.png

  5,4 KB · Aufrufe: 196

Zuletzt bearbeitet von einem Moderator: 22. Januar 2012

Tumbleweed

Captain

Registriert

März 2008

Beiträge

3.600

• 22. Januar 2012

• #2

Gib den li-Elementen mal float:left und ungefähr height:51px.

 

Zuletzt bearbeitet: 22. Januar 2012

NoXPhasma

Lieutenant

Registriert

Jan. 2010

Beiträge

840

• 22. Januar 2012

• #3

Entweder die Grafiken verkleinern, oder aber das div in der höhe vergrössern. Weiterhin mit background-position die position der Grafik anpassen:

Code:

background-position: 0px 0px;
Der erste Wert bestimmt die waagerechte Positionierung, der 2. die vertikale

 

F

Furtano

Gast

• 22. Januar 2012

• #4

Danke euch beiden, hat funktioniert.
Warum is float left so wichtig? Wenn ich es weglasse ist es wieder so sch...

 

NoXPhasma

Lieutenant

Registriert

Jan. 2010

Beiträge

840

• 22. Januar 2012

• #5

Weil ein LI element standard die Eigenschaft Display:block hat, mit display:inline änderst du diese Eigenschaft. Bei float-left bleibt die display Eigenschaft unberührt.

Es gibt allerdings die Möglichkeit dem Element die Eigenschaft display: inline block; oder display:inline-block; zu geben, dies wird aber nur von neuen Browsern akzeptiert.

*edit*

Im übrigen solltest du mal deinen Code Validieren, da sind jetzt schon einige Fehler drin, zb gehört der a tag dem li tag untergeordnet und nicht anders rum!

 

Zuletzt bearbeitet: 22. Januar 2012

Tumbleweed

Captain

Registriert

März 2008

Beiträge

3.600

• 22. Januar 2012

• #6

Ja, mit dem inline hast du das Übel erst heraufbeschworen. Lässt du es weg und setzt eine Höhe, dann wird das Bild schon vollständig angezeigt, allerdings sind dann die Elemente untereinander. Dafür das float.

 

NoXPhasma

Lieutenant

Registriert

Jan. 2010

Beiträge

840

• 22. Januar 2012

• #7

Und noch etwas, das background attribut im body ist schon sehr lange obsolet, verwende dafür lieber css. Das selbe gilt für die Hintergrundfarbe.

 

F

Furtano

Gast

• 22. Januar 2012

• #8

Danke für eure Hinweise.
Habe ich entsprechend geändert .

 

Zuletzt bearbeitet von einem Moderator: 22. Januar 2012