[ERLEDIGT] Schöne Formularbuttons

[=Max=]

Hallo,

meine Buttons für Formulare waren bislang nie so, wie ich sie haben wollte. Meine Buttons haben alle eine verschiedene Länge, sodass eine einzelne Hintergrundgrafik nie ausreichend war. Das Problem ist, dass ich keine Ahnung und Idee habe, wie ich jeweils bei einem Button drei Grafiken unterbringe!? (Links vom Button, hinter dem Text und rechts vom Button).

Irgendwie müsste das doch möglich sein, hoffe jemand hat einen Tipp für mich!

Grüße,
Max

 

[Freuler]

Ich kann mir nicht ganz vorstellen wie du das möchtest. Aber es gibt immer eine Lösung. Auch wenn es zuletzt Absolut positionierte Div's sind oder mit Javascript ausgeführt wurde.

 

[=Max=]

Hab das mal skizziert:


Gehen wir davon aus, dass ist mein Button. Das linke Dreieck ist eine Grafik, das Rechte dreieck ist eine Grafik und die Mitte ist eine Grafik, die sich immer dem Text nach wiederholt.

Mein Button ist aktuell standardmäßig:

<input type="submit" name="send" value="Text">

Nun könnte ich freilich lauter DIVs oder so um den Button rummachen, allerdings ist das auf die Dauer, bei vielen Buttons sehr umständlich!

Deshalb suche ich eine Möglichkeit, um das eventuell einfacher hinzubekommen (bestenfalls, dass ich meine Buttons sogar in dem HTML-Stil lassen kann)

Grüße,
Max

 

[vitus37]

Wie wäre es per CSS dem Button eine feste Höhe und Breite zu geben und dann deine Grafiken (zu einem zusammengefügt) als Hintergrund einzubinden.

<input type="submit" class="submitbutton" ...>

CSS:

.submitbutton{
  width: 120px;
  height: 20px;
  background-image: url(button.png);
}

So brauchst du nur noch eine Grafik.

Oder was meinst du?

 

[=Max=]

Das Problem ist, dass mancher Button "Irgendein langer Text mit was zu tun" hat und der andere nur "Ok". Dann ist das Problem immer, dass die Grafik entweder zu lang oder zu kurz ist. Und das will ich umgehen! ;) Die Buttons sollen wunderbar passen!

 

[=Max=]

Funktionierender Workaround, ein wenig unübersichtlich, geht aber:

div.button 
{ 
	height:24px; 
	background:url(../img/buttons/norm_right.png) right no-repeat; 
	width:auto; 
	float:left;
	cursor: pointer;
	margin: 3px;
}

div.button input {
	height:24px; 
	background:url(../img/buttons/norm_left.png) left  no-repeat; 
	color:#ffffff; 
	font-weight:bold; 
	border:none; 
	overflow:visible; 
	display:inline; 
	margin:0px; 
	padding:0px 4px 1px 4px; 
	font-size:11px; 
	font-family:Verdana, Arial, Helvetica, sans-serif;
	cursor: pointer;
}

<div class="button"><input id="admin_submit" name="admin_submit" type="submit" value="Anmelden"/></div>

norm_left.png ist einfach nur die kleine linke Grafik und norm_right.png ist ein überlanger button wo der linke Teil fehlt, aber die rechte Ecke gleich dabei ist ;)

Vielleicht brauch das ja mal jemand ;)

Grüße,
Max

 

[Efchen]

Nun könnte ich freilich lauter DIVs oder so um den Button rummachen, allerdings ist das auf die Dauer, bei vielen Buttons sehr umständlich!

Das könntest Du mit einer Funktion lösen, die Du in einer serverseitigen Scriptsprache schreibst, die Dir die notwendigen Tags ausgibt.