nicht angemeldet
Button-Tag mit eigenem Bild (image.jpg)
Hallo,
ich versuche einen button tag für eine touchscreen so zu gestalten, dass ein bild angezeigt wird. momentan zeigt es nur den standart-button(graue grafik) an. kann der standart-button(grau) mit css durch eine eigene grafik ersetzt werden?
mein versuch 1:
<button type="test" name="button1" value="clicked">
<img src="../grafik/test.gif" width="300" height="300" alt="submit" border="0">
</button>
leider sehe ich dabei noch ränder! ;-(
freue mich auf ein feedback.
gruß janosch
-
hi
<input type="image" src="../grafik/test.gif" width="300" height="300"/>
Grüße aus Bleckede
Kai
-
sehr nett, danke.
ich darf bei der touchscreen leider nur button-tags nehmen. somit ist das also hier mit submit nicht machbar. was gibts da sonst noch? css?
-
Hallo Janosch,
css?
siehe mein Tipp in [pref:t=31631&m=171128] und hier gleich mein Versuch:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>test</title>
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<style type="text/css">
<!--
button,img {
border: none;
height: 32px;
margin: 0;
padding: 0;
width: 32px;
}
-->
</style>
</head>
<body>
<form>
<button><img src="http://www.favicon.de/favicon.png" alt="submit"></button>
</form>
</body>
</html>Kann mir jemand verraten, warum Mozilla 1.2.1 das Bild nicht ganz
links oben auf den Button setzt?
Im MSIE 6.0 SP1 und Opera 7.0 PR1 funktioniert es wie gewünscht.Viele Grüße,
Stefan-
danke für die superschnelle Hilfe. Werde mOzilla noch testen.
Janosch
-
Habe mal Mozilla getestet:
wenn der HG des buttons mit css definiert wird (bild oder farbe) sieht man bei mozilla oben auch nichts mehr. Wozu wird margin: 0; gebraucht?
der Quellcode sieht so aus:<style type="text/css">
<!--
button,img {
border: none;
height: 34px;
padding-top: 0;
padding-bottom: 0;
padding-left: 0;
padding-right: 0;
width: 70px;
background-image:url(hintergrund.gif);
}
-->
</style>
-
-
Hallo, Stefan,
Kann mir jemand verraten, warum Mozilla 1.2.1 das Bild nicht ganz
links oben auf den Button setzt?Ich kann es nicht erklären, aber mehr oder weniger ist es sinnvoll, ein Button immer wie ein Button aussehen zu lassen. Das Sichtbare ist übrigens die Hintergrundfarbe des Buttons, mit background-color:transparent könnte man sie schon einmal durchsichtig machen, dennoch nimmt dieser Rand Raum ein.
Im Beispiel hast du img und button dieselbe Größe gegeben, dadurch konntest du das Problem nur links und oben beobachten, da der Rand rechts und unten abgeschnitten wurde und damit auch das Bild. Wenn man die Größe des Buttons automatisch durch die Bildgröße bestimmen lässt, zeigt sich das Problem an allen vier Seiten und scheinbar links und rechts stärker.
Das Zuschneiden beziehungsweise Gleichsetzen der Größen geht wie du sagtest MSIE und Opera problemlos, ohne das würden auch Opera und MSIE die zusätzlich Ränder anzeigen, welche weder margin, padding noch border des button-Elements sind. Alleinig Mozilla schneidet »falsch« ab, wobei dies für mich das einzig Logische ist, womöglich ist es auch W3C-konform, sofern überhaupt ein eindeutiger Standard (=Recommendation) diesbezüglich existiert. Denn mit MSIEs und Operas Verhalten wäre nämlich dem einzigen mir erdenklichen Sinn, ein Button immer wie ein Button anzuzeigen, unabhängig davon, was der Autor als border definiert hat, auch nicht Genüge getan.Ich dachte daran, negative Ränder für die Grafik anzugeben und diese nur Mozilla vorzusetzen:
button, button img {
border:none;
margin:0; padding:0;
background-color:green; /* Nur zur Verdeutlichung, kann man transparent setzen oder gar nicht. */
height:100px; width:100px; /* Die Bildgröße. */
}
html:root button img { /* Selektor verwenden, den nur Mozilla versteht. */
vertical-align:bottom; /* Wichtig, siehe http://www.dodabo.de/html%2Bcss/img-table/ */
margin:-3px 0 0 -3px; /* Negative Ränder, die Pixelanzahl variiert komischerweise, manchmal reicht auch margin-top:2px :-| */
}Abgesehen, dass es hilfreich wäre, ein Button immer wie ein Button anzuzeigen, ist dieser Innenabstand scheinbar nötig, damit beim Auswählen zwischen dem Inhalt des button-Elements und dem padding ein gestrichelter Auswahlrahmen angezeigt werden kann .Im Mozilla ist es nämlich nicht mehr ersichtlich (das heißt, es wird nicht mehr visuell angezeigt), dass das Feld angewählt ist, wenn dieser zusätzliche Innenrahmen deaktiviert ist.
Die Aufteilung von links wäre ungefähr:
margin-border-padding-[optionaler gestrichelter Auswahlrahmen]-[mysteriöser und nerviger Platz zwischen dem Auswahlrahmen bzw. padding und dem Inhalt]-{...Inhalt...}
Beim Anwählen des Buttons wird das »Shiften«, das heißt, der Eindrückeffekt, im Mozilla über das padding gelöst, im MSIE aber über diesen zusätzlichen Innenabstand, weshalb trotz padding:0 im IE dennoch dieser Abstand beim Klicken auf den Button vergrößert wird. Angenommen, die linke obere Ecke eines Buttons sieht in zehnfacher Vergrößerung folgendermaßen aus:
<img src="http://home.t-online.de/home/dj5nu/fanhost/button.png" border="0" alt="">
Alles Sichtbare ist Teil der Grafik, und zwar ist diese eine rote Fläche mit einpixligem blauen Rand, das heißt mit oben genannten Tricks wird ausschließlich die Grafik als Button angezeigt.
Wenn dieses Button nun fokussiert wird (mit der Tabulator-Taste), sieht er im MSIE so aus:
<img src="http://home.t-online.de/home/dj5nu/fanhost/button-focus-ie.png" border="0" alt="">
Im Mozilla jedoch weiterhin:
<img src="http://home.t-online.de/home/dj5nu/fanhost/button-focus-moz.png" border="0" alt="">
Beim Klicken auf den Button sieht er im MSIE folgendermaßen aus:
<img src="http://home.t-online.de/home/dj5nu/fanhost/button-clicked-ie.png" border="0" alt="">
Im Mozilla jedoch weiterhin (ja, man ahnt es):
<img src="http://home.t-online.de/home/dj5nu/fanhost/button-clicked-moz.png" border="0" alt="">
Lustigerweise malt der Internet Explorer im Inhalt des button-Elements herum, der zusätzlichen Innenrahmen wird wie gesagt vergrößert beim Klicken, der Auswahlrahmen wird über dem Inhalt gezeichnet.
Ich habe nur eine Erklärung, nämlich keine allgemeingültige, da es keine zu geben scheint. Formularelemente und speziell Buttons sind generated content, das heißt sie müssen nicht mit dem CSS-Boxmodell »erklärbar« im Sinne von optisch eins zu eins nachbildbar und voll formatierbar sein.
Im MSIE 6.0 SP1 und Opera 7.0 PR1 funktioniert es wie gewünscht.
Ja. Zudem kann Opera 7 den Selektor nicht, womit der »Hack« vorerst weiterhin nutzbar ist, um IE, Opera und Mozilla unterschiedliche Styles zu liefern.
Grüße,
Mathias--
Geschwisterzwist zwischen Slivovic schlürfenden, spitzen, twistenden und schwitzenden Zwitscherschwestern.
Zwanzig Zwerge zeigen Handstand, zehn im Wandschrank, zehn am Sandstrand.
Kalle Kahlekatzenglatzenkratzer kratzt kahle Katzenglatzen.
Bietet Brunhilde berauschende Brüste, buhlt Bodo brünstig beim Balle.
-
-
hi
ich darf bei der touchscreen leider nur button-tags nehmen. somit ist das also hier mit submit nicht machbar. was gibts da sonst noch? css?
wieso "darfst" du das nur? Darf es in alten Browsern nicht laufen oder wieso..?
Grüße aus Bleckede
Kai
-
-
-
Hallo Janosch,
leider sehe ich dabei noch ränder! ;-(
einfach das button-Element wie gewünscht mit CSS anpassen, außerdem
vielleicht den Zeilenumbruch vor/hinter dem img-Element weglassen.Viele Grüße,
Stefan