<img .. > Frage

von **neandr** » 10.11.2009, 13:27

Ich versuche einen Button mit einem Icon zu erstellen. Dazu verwende ich folgenden html code:
<img align="left" class="selection" alt="" />

Als CSS habe ich:

Code: Alles auswählen: .selection{ background: url(icon.png) no-repeat; width: 24px; height: 29px; border: 2px solid #eee; padding: 1px 4px 2px 4px; margin: 0 5px 0 0; -moz-border-radius: 5px; } .selection:hover { cursor:pointer; border: 2px solid grey; }

Mein Problem: ich kann das png nicht mittig (horizontal und vertikal) positionieren.

Einige Anmerkungen:

-moz-border-radius: sagt ja bereits, dies wird im wesentlichen auf Firefox verwendet werden
das png hat eine Größe von 24x29
<img align="left" .. wenn ich align="left" weglasse wird nur ein kleiner Teil des Icons in dem Boarder Bereich angezeigt. Andererseits finde ich eigentlich keine Angabe, dass align ein gültiges Attribute ist.
verändere in margin-left/right wird die 'box' nur nach rechts größer

Kann mir jemand auf die Sprünge helfen??
TIA

von **sejuma** » 10.11.2009, 14:12

align ist veraltet. Man nimmt dafür die float-Angabe im CSS-Teil.

Ein Link wäre hilfreicher. Bis dahin sagt meine Glaskugel:
Das Problem tritt vermutlich nur im IE auf.
Falls ja, fehlt deiner Seite vermutlich ein qualifizierter Doctype unter Angabe der DTD-URL.
Aber wie gesagt, sind das nur abstrakte Vermutungen.

Du kannst es auch mal noch mit "line-height: 29px;" versuchen.

Falls dass alles nichts nützt, dann poste bitte einen Link zur Problemseite.

von **neandr** » 10.11.2009, 16:38

Vielen Dank.
Float statt align ist Ok .. ist mir auch lieber es im CSS zu haben.

Bzgl.
IE: nein, und ja. Anderes gesagt, ich arbeite mit Firefox (siehe -moz Attribut), habe es aber auch mit IE getestet. Kein Unterschied.

DocTyp: eigentlich nicht, denn die erste Zeile definiert:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

line-height: bringt nix, bzw. dann verschwindet aller Inhalt und der 'Button' ist nur ein paar PX hoch/breit.

Leider ist die Seite noch nicht veröffentlicht, sodass ich einen Link im Moment nicht posten kann.

Nochmal wiederholt: das Problem ist, dass das PNG links bzw oben hängt, die Box kann ich vergrößern, aber das ändert nix an der Positionierung der PNG innerhalb der Box.
Ich wäre der Meinung gewesen, das mit 'margin' recht und links was zu bewirken ist, denn das definiert ja eigentlich den Abstand zur 'border'.

Andere Vorschläge??

von **neandr** » 10.11.2009, 16:59

Ich denk ich hab's!

background-position:center;
löst wohl das Problem. Ich hab mal paddings satt erhöht um es deutlich zu sehen, es geht!

Code: Alles auswählen: .topSelection { background: url(icon.png) no-repeat; width: 24px; height: 29px; float: left; border: 2px solid #eee; padding: 15px 18px 15px 18px; margin: 0 5px 0 0; -moz-border-radius: 5px; background-position:center; }

<img .. > Frage

<img .. > Frage

Re: <img .. > Frage

Re: <img .. > Frage

[gelöst]: <img .. > Frage

Ähnliche Beiträge zu "<img .. > Frage"

Wer ist online?