nicht angemeldet
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