Gestaltung mit Submit-Buttons

[mv_alex]

Hallo zusammen,

für die Module Auto Completer Suchmodul und Quicklink habe ich die Templates so angepasst, dass der Submit-Button durch eine Grafik ersetzt wird.

Leider habe ich dadurch das Problem, dass die Buttons zu hoch rutschen oder aber das Input-/Select-Feld zu tief, also beide nie auf einer Höhe liegen:

quicklink_ie8.gif ac_search_ie8.gif

Das Stylesheet:

.mod_quicklink{width:200px;height:50px;left:201px;top:0;position:absolute;overflow:hidden;}
.mod_quicklink form{padding-top:25px;padding-left:25px;}
.mod_quicklink input.submit{margin-top:5px;}

.mod_auto_completer{width:200px;height:20px;right:25px;top:10px;position:absolute;}
.mod_auto_completer input.text{width:125px;height:18px;margin:0;padding-top:2px;padding-left:25px;background:url("tl_files/layout/images/ac_background.jpg") left top no-repeat;border:1px solid #666666;font-size:12px;color:#ffffff;}
.mod_auto_completer input.submit{width:20px;height:20px;display:inline-block;margin-left:5px;border:0;}

Ich habe schon mit den unterschiedlichsten Höhenangaben und Abständen rumprobiert, aber nie das gewünschte Ergebnis erzielt.

Kann man das via CSS in den Griff kriegen oder muss ich vielleicht die Templates noch weiter modifizieren?

Würde mich sehr über Eure Anregungen freuen!

Danke & Gruß
Alex

[Elvador]

schonmal "float" versucht?

also eins der beiden floaten (float:left; oder float:right

[BugBuster]

dem ersten input ein float:left; und es sieht gut aus.

[mv_alex]

Hallo,

vielen Dank für Eure Antworten!

Mit float:left komme ich der Sache schon näher.

float:right auf den Buttons zog die Elemente dagegen unschön auseinander. left beim Input scheint zumindest das Suchformular etwas besser darzustellen, aber beim Quicklink greift es nicht wirklich.

Habe auch noch versucht, den Buttons je ein clear:both zuzuweisen, aber das ergibt nicht wirklich einen sichtbaren Unterschied.

Viele Grüße
Alex

[Piste77]

Hallo,

füge in das Template eine Tabelle ein, so dass jedes Element (input, button, label etc.) in einer eigenen Zelle erscheint. Im Anschluss alle Elemente vertikal mittig ausrichten ... nat. per CSS

Alternativ kannst Du aber auch mit float, der richtigen Bildgröße und der passenden Line-height ähnliche Ergebnisse erzielen ... allerdings mit viel Gefummel. Da ist die Tabellenlösung schon "produktiver".

Viele Grüße aus Berlin
Alex

[mv_alex]

Ja, früher hätte ich das wohl auch so gelöst.

Inzwischen hab ich aber den Ehrgeiz entwickelt, keine Blindtabellen mehr fürs Layout zu benutzen.

Aber die Idee, mit line-height zu experimentieren, ist gut. Das werd ich jetzt mal probieren ...

Gruß Alex

[solades]

Hallo Alex,

versuch mal den Input-Button "submit" durch einen "Button" zu ersetzen.
Ich mach das mittlerweile bei jedem Formular, da sich "Buttons" viel besser stylen lassen als Input-Buttons.

Also

<input type="submit" value="text" />

durch

<button type="submit">text</button>

ersetzen.

Gruß
Heiko

[mv_alex]

Hallo Heiko,

habe es jetzt mal hiermit probiert:

<button name="submit" type="button" class="submit" value="<?php echo $this->buton; ?>"><img src="tl_files/layout/icons/resultset_next_2_sw.png" width="10" height="10" alt="Los" /></button>

Leider ist der Button jetzt ohne Funktion. Ich seh aber nicht, welchen Parameter ich vergessen habe.

Gruß Alex

[Piste77]

Fuhhh ... aber 30 Zeilen Code gegen so eine kleine süsse Tabelle. Ich weiß nicht. Man verteufelt die Dinger viel zu oft. Aber Du hast ja Zeit Konntest Du das Problem denn jetzt lösen?

[solades]

Hallo Alex,

du musst dem Button den type="submit" geben und nicht button.

Ich mach das bspw. immer so:

<button id="meinbutton" type="submit" class="submit"><span><?php echo $this->buton; ?></span></button>

Das Bild für den Button fügst du dann per CSS als Background-Image ein und den Button-Text blendest du per Text-indent aus.

Ich weiß nicht wie deine Grafik aussieht, aber hier ein Beispiel für einen Button mit einer quadratischen Grafik:

#meinbutton {
background: url(/tl_files/layout/images/buttongrafik.png) no-repeat center;
border: none;
padding: 0;
margin: 0;
height: 25px;
width: 25px;
display: block;
float: left;
}

#meinbutton span {
text-indent: -9000px;
}

Float und Margin musst du natürlich entsprechend deiner Wünsche anpassen.
Ich hoffe das hilft.

Wenn du noch Fragen hast, schreib einfach.

Gruß
Heiko

[solades]

Fuhhh ... aber 30 Zeilen Code gegen so eine kleine süsse Tabelle. Ich weiß nicht. Man verteufelt die Dinger viel zu oft. Aber Du hast ja Zeit Konntest Du das Problem denn jetzt lösen?

30 Zeilen Code ist ja wohl ein bisschen aus der Luft gegriffen. ;-) Die 30 Zeilen, die man mit ner Tabelle bei den CSS spart, hast du hinterher im Quelltext durch die Tabelle.

Ich versteh nicht, warum nach so vielen Jahren "Webstandards" Tabellen immer noch von manchen Leuten als Layout-Knecht in Erwägung gezogen werden. Liegt es an zu wenig Zeit, ist es Faulheit oder liegt es an mangelnden Kenntnissen in HTML und CSS?

Aber egal, diese Diskussion sollte nicht wieder aufgegriffen werden. ;-)

[mv_alex]

Hi zusammen,

zumindest für mich persönlich versuche ich in jedem Fall, mir die Blindtabellen grundlegend abzugewöhnen - gibt ja nichts Hartnäckigeres als schlechte Gewohnheiten.

@solades: "submit" war also das Zauberwort.

Deine button-Lösung ist echt super! Habe das jetzt erstmal für das Quicklink-Modul ausprobiert und es hat gut hingehauen. Mal schauen, ob das mit dem Suchfeld auch einigermaßen klappt.

Ist eigentlich etwas dagegen einzuwenden, für das span ein display:none anzuwenden statt des text-indent? Ich befürchte da spontan Probleme mit Screenreadern bzw. der Barrierearmut.

Gruß Alex

[Piste77]

Na ja - ich bin kein ausgewiesener Verfechter von Layouttabellen. Aber wenn ich in 2min mit einer Tabelle zum Ziel komme oder mehrere Tage benötige um mit allen möglichen Verrenkungen eine Lösung zu entwickeln - dann finde ich die Tabelle nicht ganz verkehrt.

Aber zurück zur ursprünglichen Thematik. Man könnte z.B. auch um jedes der Elemente ein div rumzimmern. Diese dann floaten, auf display:table-cell setzen, eine ausreichende Höhe mitgeben und wieder vertikal zentrieren.

Und seht das nicht alles so verbissen.

Grüße aus Berlin
Alex

[mv_alex]

Mit den Display-Arten hatte ich auch schon rumprobiert, sah aber alles nicht wie gewünscht aus.

Mir ist gerade aufgefallen, dass text-indent: -9000px; alleine nicht reicht, um den Text auszublenden. Oder ich habe das Element falsch adressiert.

Beim Suchfeld habe ich immer noch etwas Höhenversatz, was ich mir nicht erklären kann. Denn eigentlich ist alles bis auf den Pixel ausgerichtet:

#header .mod_auto_completer{width:200px;height:20px;right:25px;top:10px;position:absolute;}
#header .mod_auto_completer input.text{width:125px;height:18px;float:left;margin:0;padding-left:25px;background:url("tl_files/layout/images/ac_background.jpg") left top no-repeat;border:1px solid #666666;font-size:12px;color:#ffffff;line-height:20px;}
#header .mod_auto_completer button{width:20px;height:20px;clear:both;margin-left:5px;text-align:center;vertical-align:middle;background:url("tl_files/layout/icons/search_button.png") left top no-repeat;border:0;}
#header .mod_auto_completer span{text-indent: -9000px;}

Gruß Alex

[solades]

Hi zusammen,

zumindest für mich persönlich versuche ich in jedem Fall, mir die Blindtabellen grundlegend abzugewöhnen - gibt ja nichts Hartnäckigeres als schlechte Gewohnheiten.

@solades: "submit" war also das Zauberwort.

Deine button-Lösung ist echt super! Habe das jetzt erstmal für das Quicklink-Modul ausprobiert und es hat gut hingehauen. Mal schauen, ob das mit dem Suchfeld auch einigermaßen klappt.

Ist eigentlich etwas dagegen einzuwenden, für das span ein display:none anzuwenden statt des text-indent? Ich befürchte da spontan Probleme mit Screenreadern bzw. der Barrierearmut.

Gruß Alex

Hey Alex,

schön, dass es funzt.
Display: none wäre natürlich auch möglich. Aber du hast recht, es könnte Probleme mit Screenreadern geben. Außerdem gibt es einige Diskussionen über display: none; im Zusammenhang mit Suchmaschinen-cloaking. Text-Indent ist meiner Meinung nach hierfür eine akzeptable Lösung.
Du kannst es natürlich auch gern anders machen. Vorher aber einfach mal ein bisschen zum Thema dislplay: none googeln.

Na ja - ich bin kein ausgewiesener Verfechter von Layouttabellen. Aber wenn ich in 2min mit einer Tabelle zum Ziel komme oder mehrere Tage benötige um mit allen möglichen Verrenkungen eine Lösung zu entwickeln - dann finde ich die Tabelle nicht ganz verkehrt.

Aber zurück zur ursprünglichen Thematik. Man könnte z.B. auch um jedes der Elemente ein div rumzimmern. Diese dann floaten, auf display:table-cell setzen, eine ausreichende Höhe mitgeben und wieder vertikal zentrieren.

Und seht das nicht alles so verbissen.

Grüße aus Berlin
Alex

Ich seh' das nicht verbissen, bin nur der Meinung, dass man sich an Webstandards halten sollte. Denn nicht um sonst heißen sie "Standards".

Ist "nicht ganz verkehrt" denn wirklich eine Alternative zu "richtig machen"?

Und mal ehrlich Alex, die Geschichte mit den Buttons hat ja nun nicht mehrere Tage gedauert. ;-)
Man muss doch einfach nur wissen wo man die Informationen findet.

[solades]

Mit den Display-Arten hatte ich auch schon rumprobiert, sah aber alles nicht wie gewünscht aus.

Mir ist gerade aufgefallen, dass text-indent: -9000px; alleine nicht reicht, um den Text auszublenden. Oder ich habe das Element falsch adressiert.

Beim Suchfeld habe ich immer noch etwas Höhenversatz, was ich mir nicht erklären kann. Denn eigentlich ist alles bis auf den Pixel ausgerichtet:

#header .mod_auto_completer{width:200px;height:20px;right:25px;top:10px;position:absolute;}
#header .mod_auto_completer input.text{width:125px;height:18px;float:left;margin:0;padding-left:25px;background:url("tl_files/layout/images/ac_background.jpg") left top no-repeat;border:1px solid #666666;font-size:12px;color:#ffffff;line-height:20px;}
#header .mod_auto_completer button{width:20px;height:20px;clear:both;margin-left:5px;text-align:center;vertical-align:middle;background:url("tl_files/layout/icons/search_button.png") left top no-repeat;border:0;}
#header .mod_auto_completer span{text-indent: -9000px;}

Gruß Alex

Als erstes fiel mir gerade auf, dass deine beiden Buttons die gleiche ID haben.
Das könnte schon der Fehler sein.

Probier' mal das hier:

.mod_auto_completer {
	width:200px;
	height:20px;
	right:25px;
	top:10px;
	position:absolute;
}

#header .mod_auto_completer input.text {
	width:125px;
	height:18px;
	float:left;
	margin:0;
	padding: 0 0 0 25px;
	background:url("tl_files/layout/images/ac_background.jpg") left top no-repeat;
	border:1px solid #666;
	font-size:12px;
	color:#ffffff;
	line-height:20px;
}

#header .mod_auto_completer button {
	width:20px;
	height:20px;
	margin: 0 0 0 5px;
	padding: 0;
	background:url("tl_files/layout/icons/search_button.png") left top no-repeat;
	border: 0;
}

#header .mod_auto_completer button span {
	text-indent: -9000px;
}

[solades]

Probier' auch noch mal dem Button selbst text-indent: -9000px; zu geben.

[mv_alex]

Jau, jetzt sieht's richtig gut aus!

Hab nur eine Sorge: Da nun das float:left nicht mehr gecleart wird, bekomm ich dann mit folgenden Elementen (vor allem dem noch fehlenden Menü) nicht noch Ärger?

Gruß Alex

[solades]

Du solltest eigentlich kein Ärger mit dem Menü bekommen.
Schließlich floatest du ja nur ein Inputfeld innerhalb von .mod_auto_completer, während .mod_auto_completer selbst nicht gefloatet und vorallem absolut positioniert ist.

Das sollte also keine Probleme machen.

[mv_alex]

Hoffen wir's - ansonsten weiß ich ja, wo ich mit der Fehlersuche anfangen kann.

Herzlichen Dank für Deine / Eure Hilfe!

Gruß Alex