nicht angemeldet
Identisches Aussehen für <a> und <button> per CSS
Leider ist der Artikel schon im Archiv und ich schaffe es nicht eine Antwort drauf zu schreiben...
@Sven:
<form action="linkzielseite"><button type="submit">whatever</button></form>
Diese Lösung ist für mich völlig unbrauchbar, denn ich suche nach einer Formatierung für die Links, damit sie das Aussehen eines Buttons haben. Zudem kann ich nicht für jeden Link ein Formular anlegen. Das würde dazu führen dass Formular verschachtelt wären, denn teilweise sollen diese Buttons unterhalb eines Formulars sitzen, um zum Beispiel auf eine Informationsseite zu verlinken. Rechts ist dann der Submit Button und links der Informationsbutton. Dafür wollte ich eine Lösung.
@Marc:
Genau das ist, was ich getan habe: Ich habe die Links mit CSS formatiert, jedoch sind auf der Button-Elementen (browserabhängig) unterschiedliche, teils mysteriöse Styleangaben verbrochen worden. Deswegen sehen meine Link-Buttons (die unterhalb von Formularen für Verweise zu weiteren Informationen genutzt werden) nicht so aus wie ihre entsprechenden Button-Elemente. Und das ist schade.
Ich bin mittlerweile aber soweit, dass ich eine Lösung habe, lediglich die Ausrichtung dreier Button-Elemente in einer Linie klappt noch nicht sauber, da der Firefox die Angabe margin-(left|right): auto; nicht sauber auf Button-Elemente anwenden kann. Er schiebt beim mittleren Button, der float: none hat, den button jeweils um die Breite des linken Buttons nach rechts. Das liegt daran, dass er scheinbar nicht die volle Breite der Zeile bekommt. Nur warum... *nerv ;-)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="de" xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">
<head>
<title>Buttons</title>
<style type="text/css">
a.myButton,
button.myButton {
background: transparent;
border: none;
color: #000000;
display: block;
font-size: 10px;
font-family: Verdana;
text-align: center;
text-decoration: none;
}
a.myButton {
margin: 1px 0;
padding: 1px 3px;
}
button.myButton {
margin: 0;
padding: 1px 0;
}
button.myButton span.shadow,
a.myButton span.shadow {
border: 1px solid #b1b1b1;
display: block;
}
button.myButton span.content,
a.myButton span.content {
background-color: #ededed;
border-bottom: 1px solid #8a8a8a;
border-left: 1px solid #fff;
border-right: 1px solid #8a8a8a;
border-top: 1px solid #fff;
display: block;
}
/* Button Positionierungen */
button.left,
a.left { float: left; }
button.right,
a.right { float: right; }
button.center,
a.center {
float: none;
margin-left: auto;
margin-right: auto;
}
/* Button Größen */
a.butwidth150 { width: 150px; }
button.butwidth150 { width: 156px; }
* html button.butwidth150 { width: 150px; }
</style>
</head>
<body>
<hr />
<button onclick="alert('but1');" type="button" name="" class="myButton butwidth150 left"><span class="shadow"><span class="content">kurz</span></span></button>
<button onclick="alert('but1');" type="button" name="" class="myButton butwidth150 right"><span class="shadow"><span class="content">mittellang</span></span></button>
<button onclick="alert('but1');" type="button" name="" class="myButton butwidth150 center"><span class="shadow"><span class="content">sehr langer Button</span></span></button>
<div class="clear"></div>
<hr />
<a href="#" class="myButton butwidth150 left"><span class="shadow"><span class="content">kurz</span></span></a>
<a href="#" class="myButton butwidth150 right"><span class="shadow"><span class="content">mittellang</span></span></a>
<a href="#" class="myButton butwidth150 center"><span class="shadow"><span class="content">sehr langer Button</span></span></a>
<div class="clear"></div>
<hr />
</body>
</html>
@Gunnar: Du hast mir nur Zeugs geschrieben, das ich auch schon in die Fragestellung geschrieben hab. Das findest Du ist eine Lösung? Schau mal das hier geschrieben Markup an. Beide Zeilen sollten Identisch sein, und zwar auch dann noch, wenn ein Button (links / rechts / mitte) weggenommen wird. Das kann ich aus Deiner Antwort nicht herauslesen. Vielleicht schreibst Du es nochmal um und ich verstehe es dann besser, was Du meinst. :-) Wäre super. Belohnung wird dann per Email festgelegt. :-)
Grüße und Danke,
Bechte
-
Moin!
@Sven:
<form action="linkzielseite"><button type="submit">whatever</button></form>
Diese Lösung ist für mich völlig unbrauchbar, denn ich suche nach einer Formatierung für die Links, damit sie das Aussehen eines Buttons haben. Zudem kann ich nicht für jeden Link ein Formular anlegen. Das würde dazu führen dass Formular verschachtelt wären, denn teilweise sollen diese Buttons unterhalb eines Formulars sitzen, um zum Beispiel auf eine Informationsseite zu verlinken. Rechts ist dann der Submit Button und links der Informationsbutton. Dafür wollte ich eine Lösung.
Die _optische_ Anordnung der Buttons muß doch mit der _syntaktischen_ Anordnung im Quelltext nichts zu tun haben. position:absolute und position:relative funktionieren.
Abgesehen davon halte ich es für ausgeschlossen, mit heutigen Browsern die beiden Elemente wirklich absolut identisch zu formatieren.
Alleine schon <button> ist ein Element, welches man dank des IE eigentlich meiden sollte.
Und ansonsten ist einfach zu befürchten, dass Browser die Buttons mindestens teilweise mit den Mitteln des genutzten Betriebssystems darstellen, von denen einige das Aussehen des Buttons so beeinflussen, dass das mit CSS nicht nachstellbar ist.
Aus diesem Grund halte ich es für den einfacheren Weg, Dinge, die identisch aussehen sollen, auch identisch herzustellen.
Die Alternative für den <button></button> und <a></a> wäre <input type="image"> und <a><img/></a>.
- Sven Rautenberg
--
My sssignature, my preciousssss!-
Hi Sven,
danke für Deine Antwort. Hier meine Meinungen dazu.
Die _optische_ Anordnung der Buttons muß doch mit der _syntaktischen_ Anordnung im Quelltext nichts zu tun haben. position:absolute und position:relative funktionieren.
Okay, noch ein Hinweis, der das dann wiederum unmöglich macht: Das ganze wird auf Seiten benötigt, die per CMS gepflegt werden. Wir wissen nicht, wie viel Text dazwischen kommt, und wann das Formular geschlossen wird, um eine Positionierung über position/top/left/etc. sauber zu realisieren.
Abgesehen davon halte ich es für ausgeschlossen, mit heutigen Browsern die beiden Elemente wirklich absolut identisch zu formatieren.
Schau Dir das Beispiel mal an. Sieht auf den aktuellen Browsern für Windows sauber aus, Linux und Mac teste ich heute abend noch nach, denke aber es passt dort auch... We'll see :-)
Alleine schon <button> ist ein Element, welches man dank des IE eigentlich meiden sollte.
Gründe?
Und ansonsten ist einfach zu befürchten, dass Browser die Buttons mindestens teilweise mit den Mitteln des genutzten Betriebssystems darstellen, von denen einige das Aussehen des Buttons so beeinflussen, dass das mit CSS nicht nachstellbar ist.
Tun sie solange, wie du keine Angaben zu Border/Background etc. machst, ja. background: transparent; border: none; hebelt das aber aus und das Padding Problem im IE wird durch das display: block; und der festen Breitenangabe eliminiert (Nachteil: Breite ist nicht an den Text angepasst, aber kann ich drauf verzichten ;-)).
Aus diesem Grund halte ich es für den einfacheren Weg, Dinge, die identisch aussehen sollen, auch identisch herzustellen.
Die Alternative für den <button></button> und <a></a> wäre <input type="image"> und <a><img/></a>.
Interesssant für eine schnelle Lösung (quick & dirty), für mich aber keine wirkliche Alternative (auch nicht prof.), da wir den Markup für verschiedene Bereiche nutzen die unterschiedliche Farben benötigen. Dementsprechend ist es sauberer die Buttons über CSS zu formatieren und nein ich möchte nicht jedem Button eine ID geben. ;-)
Die Suche geht weiter :-)
-
-
was spricht gegen diese Lösung:
<a href='http://forum.de.selfhtml.org/'><button>Selfforum</button></a>
Sieht nicht nur aus wie ein Button. Ist auch einer.
Kalle
-
Hallo Kalle,
ich habe gerade vielleicht ein ähnliches Problem. Muss morgen mal unbedingt Deinen Vorschlag ausprobieren.
So hatte ich noch garnicht gedacht.
Danke.
Liebe Grüße,
Bernd
-