submit-Button mit stylesheet generiertem Bild

[Eydamos]

Hallo liebe Community,

ich habe auf meiner Homepage für das Menü einen Standard Button ohne jegliche Schrift. Das Menü hat Einträge die wie folgt aussehen:

<h4><a href="mainpage.php?section=news">News</a></h4>

(Zu sehen ist dann die Grafik als Hintergrund des h4 und News als Beschriftung des Buttons. So ist der ganze Button ein Link und ich muss nicht für jeden Menü Punkt einen extra Button erstellen, welcher die Schrift fest drin hat. Ist mir so auch lieber als eine Tabelle mit Button als Hintergrund des td.)

Das dazugehörige Stylesheet sieht so aus:

  
#navi h4  
{  
 background: url(../pics/navi_button.jpg);  
 background-repeat: no-repeat;  
 width: 122px;  
 height: 18px;  
 margin: 2 0 2 10;  
 padding: 5 0 0 5;  
 font-size: 1em;  
}  
  
#navi h4 a  
{  
 text-decoration: none;  
 color: #223F65;  
 height: 18px;  
}  

Nun habe ich mich dazu entschieden, einen Login in meine Seite einzubauen. Und nun kommen wir zu dem Problem, ich möchte nicht den standard Submit Button, sondern meinen Button mit dem Text "Login" als Beschriftung wie bei meinem Menü.

<input type="image"> geht nicht weil ich dann keinen Text darauf habe und ich weiß nicht wie ich im stylesheet diesen dummen submit-Button (type="submit") richtig anspreche um ihm mein Bild zuzuweisen falls dies überhaupt machbar ist.

MfG Eydamos

[ChrisB]

Hi,

Das Menü hat Einträge die wie folgt aussehen:

<h4><a href="mainpage.php?section=news">News</a></h4>

(Zu sehen ist dann die Grafik als Hintergrund des h4 und News als Beschriftung des Buttons.

Unguenstig.
Eine Ueberschrift sollte sich auf nachfolgenden *Inhalt* beziehen.
In einem Menue folgt aber kein Inhalt, sondern der naechste Link.

Weg mit Ueberschriften, Links rein in eine Liste.

<input type="image"> geht nicht weil ich dann keinen Text darauf habe und ich weiß nicht wie ich im stylesheet diesen dummen submit-Button (type="submit") richtig anspreche

Wenn es dir um einen passenden Selektor geht - so, wei jedes andere beliebige Element auch.

um ihm mein Bild zuzuweisen falls dies überhaupt machbar ist.

Formularelemente sind zwar etwas wiederspenstig in der Formatierung, aber ihnen ein Hintergrundbild zu verpassen, sollte in den meisten aktuellen Browser funktionieren (manche erfordern die generelle Zustimmung des Benutzers zu sowas, und Safari macht's glaub ich gar nicht, weil da die Apple-Eitelkeit vor ist. So what.)

MfG ChrisB

[Eydamos]

Unguenstig.
Eine Ueberschrift sollte sich auf nachfolgenden *Inhalt* beziehen.
In einem Menue folgt aber kein Inhalt, sondern der naechste Link.

Weg mit Ueberschriften, Links rein in eine Liste.

Eine Liste ist mir wieder zu umständlich dann muss ich mir erst noch Befehle raussuchen, dass der die nicht einrückt, und dass er kein Zeichen davor macht. Überschriften kleiner als h3 nutz sowieso keine Sau und der User sieht doch garnicht, das das eine Überschrift ist, da ich den Text auf normale schriftgröße skaliert habe.

Wenn es dir um einen passenden Selektor geht - so, wei jedes andere beliebige Element auch.

Ich kenne mich mit css gerade so gut aus, das ich es in 90% aller Fälle hinbekomme, das ich zufällig das Objekt richtig anspreche und auch die Änderungen an der Formatierung gemacht werden die ich haben will.

um ihm mein Bild zuzuweisen falls dies überhaupt machbar ist.

Formularelemente sind zwar etwas wiederspenstig in der Formatierung, aber ihnen ein Hintergrundbild zu verpassen, sollte in den meisten aktuellen Browser funktionieren (manche erfordern die generelle Zustimmung des Benutzers zu sowas, und Safari macht's glaub ich gar nicht, weil da die Apple-Eitelkeit vor ist. So what.)

Soll auch nur unter Firefox, Opera sowie dem ollen IE laufen. Die Anzahl der Safari nutzer ist vernachlässigbar, da die Seite für deutsche Kunden ist und Mac hierzulande doch eher verpönt ist.

Könnte mir also jemand bitte sagen wie ich den submit und auch einen reset button anspreche, wenn sich dieser in folgender div Klasse befindet:

<div class="content">
Alles was halt Inhalt ist unter anderem auch submit, sowie reset Button.
</div>

[ChrisB]

Hi,

Weg mit Ueberschriften, Links rein in eine Liste.

Eine Liste ist mir wieder zu umständlich

Das ist kein Argument.

dann muss ich mir erst noch Befehle raussuchen, dass der die nicht einrückt, und dass er kein Zeichen davor macht.

Dann mach das gefaelligst.

Überschriften kleiner als h3 nutz sowieso keine Sau

Uberschriften zur Kennzeichnung von nicht-uerbschriftartigen Inhalten nutzen nur "HTML-Saeue".

und der User sieht doch garnicht, das das eine Überschrift ist, da ich den Text auf normale schriftgröße skaliert habe.

Auch kein Argument.

Wenn du an hier gegebenen Tipps, wie du vernuenftige HTML-Dokumente erstellst nicht interessiert bist - dann bin ich's an deinem Problem auch nicht weiter.

MfG ChrisB

[Eydamos]

Wenn du an hier gegebenen Tipps, wie du vernuenftige HTML-Dokumente erstellst nicht interessiert bist - dann bin ich's an deinem Problem auch nicht weiter.

Ich bin durchaus an Tipps interessiert, allerdings ist es mir überlassen, welche Tipps und in welchem Umfang ich diese nutze. Mir erscheint es am sinnvollsten das Menü über den h4 Tag zu organisieren, also mache ich das auch, denn dein Vorschlag mag zwar eher zu diversen Standards passen ist mir persönlich aber zu umständlich. Zumal ich außerdem der Meinung bin, das ein Menü keine Auflistung ist und somit auch nicht in einen <ul>/<li> Tag gehört.

Mir weitere Hilfe deinerseits zu verwehren, nur weil ich einen einzigen Tipp von dir nicht annehme, finde ich zudem recht kindisch.

MfG Eydamos

[ChrisB]

Hi,

Mir weitere Hilfe deinerseits zu verwehren, nur weil ich einen einzigen Tipp von dir nicht annehme, finde ich zudem recht kindisch.

Die Daten mit einer sinnvollen HTML-Struktur auszuzeichnen "ist mir zu umstaendlich" - das finde ich kindisch.

Ausserdem hast du von mir bereits einen Tipp zu deinem Problem bekommen.

MfG ChrisB

[Eydamos]

Ausserdem hast du von mir bereits einen Tipp zu deinem Problem bekommen.

Wenn du folgendes meinst:

Wenn es dir um einen passenden Selektor geht - so, wei jedes andere beliebige Element auch.

So habe ich bereits folgende Antwort gegeben:

Ich kenne mich mit css gerade so gut aus, das ich es in 90% aller Fälle hinbekomme, das ich zufällig das Objekt richtig anspreche und auch die Änderungen an der Formatierung gemacht werden die ich haben will.

Ich bitte dich daher mit den passenden selektor als beispiel zu geben so wie z.B.

  
#content form.submit  
{  
    //formatierung  
}  

reicht es dann aus den befehl:

  
background: url(../pics/navi_button.jpg);  

zu nehmen?

[ChrisB]

Hi,

So habe ich bereits folgende Antwort gegeben:

Ich kenne mich mit css gerade so gut aus, das ich es in 90% aller Fälle hinbekomme, das ich zufällig das Objekt richtig anspreche und auch die Änderungen an der Formatierung gemacht werden die ich haben will.

Dann eliminiere den Zufall, in dem du dich mit den Grundlagen von CSS vertraut machst.

Ich bitte dich daher mit den passenden selektor als beispiel zu geben so wie z.B.
#content form.submit

Dieser Selektor wuerde auf ein form-Element, welches Nachfahre eines Elements mit der ID #content ist, und selber die Klasse submit besitzt, zutreffen.

MfG ChrisB

[Eydamos]

Nach einigem rumbasteln hab ich es nun endlich hinbekommen:

  
#content input.submitbutton  
{  
 background: url(../pics/navi_button.jpg);  
 background-repeat: no-repeat;  
 border: 0;  
 width: 122px;  
 height: 23px;  
 color: #223F65;  
}  

Der Button sieht dann so aus:

  
<input type="submit" value="Login" class="submitbutton">  

Ich werde mir nächste Woche definitv mal ein Buch ausleihen, um mich in CSS reinzulesen, da ich es einfach zu oft brauche. Eines würde mich aber jetzt schon interessieren. Muss ich diese Klasse als Nachfahre von content definieren, oder reicht auch #input.submitbutton (k.a. ob der Syntax richtig ist)? Hab das mal in nem Beispiel gesehen und mache es seit dem so.

[ChrisB]

Hi,

#content input.submitbutton

Eines würde mich aber jetzt schon interessieren. Muss ich diese Klasse als Nachfahre von content definieren,

Wenn du nur die input-Felder mit der Klasse submitbutton, die innerhalb von #content liegen, damit ansprechen willst, ja. Wenn's stattdessen alle solchen sein sollen - dann kann #content im Selektor entfallen.

oder reicht auch #input.submitbutton (k.a. ob der Syntax richtig ist)?

Das wiederum wuerde ein Element jedes beliebigen(!) Typs selektieren, welches die ID #input und Klasse submitbutton hat.

MfG ChrisB