smokxz: Suchfeld unter Submit

SELF-Forum

Suchfeld unter Submit

smokxz
– Informationen zu den Bewertungsregeln

Servus,
ich soll für eine Website eine Suchfeld realisieren,
welches solange versteckt bleibt bis man auf den dazugehörigen
Submit-Button drückt.

Ich habe nun das Problem dass das Suchfeld im Safari sowie Internet-Explorer
den Submit-Button teilweise überdeckt und nicht wie gewünscht hinter dem
Submit-Botton einblendet.

Hat jemand einen Tipp?

Mit besten Grüßen
smoxkz

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. Suchfeld unter Submit

    smokxz
    – Informationen zu den Bewertungsregeln

    z-index ist gesetzt.

    Submitbutton:
    z-index: 10

    Searchfield
    z-index: 0

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

  2. Suchfeld unter Submit

    Matthias Apsel Homepage des Autors
    – Informationen zu den Bewertungsregeln

    Om nah hoo pez nyeetz, smokxz!

    ich soll für eine Website eine Suchfeld realisieren,
    welches solange versteckt bleibt bis man auf den dazugehörigen
    Submit-Button drückt.

    meinst du in etwa so wie in diesem Forum oben rechts?

    Nimm dir ein beliebiges Entwicklertool und schau dir den Quelltext an. Das Einblenden selbst geschieht mithilfe der Pseudoklasse :focus.

    Matthias

    --
    Der Unterschied zwischen Java und JavaScript ist größer als der zwischen Waffe und Waffeleisen.

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. Suchfeld unter Submit

      smokxz
      – Informationen zu den Bewertungsregeln 
      <style>  
  
  
  
input[type="text"] {  
background-color: 		#F0F0F0;  
height: 				15px;  
left: 					-30px;  
position: 				absolute;  
width: 					170px;  
z-index: 				1;}  
  
  
input[type="submit"] {  
background-color: 		#f7f7f7;  
cursor: 				pointer;  
height: 				29px;  
margin-top: 			-7px;  
text-indent: 			-9999px;  
text-transform: 		capitalize;  
width: 					29px;  
z-index: 				10;}  
  
</style>  
</head><body>  
  
  
<input type='submit' name='text' />  
<input type='text' name='text' />

      Hier das Beispiel, funktioniert leider nur im Firefox.
      Input-Type Text soll unter Input-Type Submit stehen.

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. Suchfeld unter Submit

        Felix Riesterer Homepage des Autors
        – Informationen zu den Bewertungsregeln

        Liebe(r) smokxz,

        funktioniert leider nur im Firefox.

        das bedeutet genauer gesagt was?

        "Darstellung wie gewünscht bei folgenden Browsern:
         [ ] IE 6.0
         [ ] IE 7.0
         [ ] IE 8.0
         [ ] IE 9.0
         [ ] IE 10.0
         [ ] FF 2.0
         [ ] FF 3.0
         [ ] FF 4.0
         [ ] FF 11.0
         [ ] FF 17 ESR
         [ ] FF 18.0
         [ ] FF 23.0
         [ ] Safari ... (jeweilige Version einfügen)
         [ ] Opera ...
         [ ] Chrome ...
         [ ] Chromium ...
         [ ] Konqueror ..."

        Kreuze doch mal an! Einfach nur "IE" zu schimpfen, ist zu wenig. Ebenso ist die Behauptung "im Firefox" reichlich ungenau.

        Liebe Grüße,

        Felix Riesterer.

        --
        ie:% br:> fl:| va:) ls:[ fo:) rl:| n4:? de:> ss:| ch:? js:) mo:} zu:)
        Beitrag melden
        –
        Informationen zu den Bewertungsregeln

      2. Suchfeld unter Submit

        Matthias Apsel Homepage des Autors
        – Informationen zu den Bewertungsregeln

        Om nah hoo pez nyeetz, smokxz!

        Je nach doctype ist das ungültiges HTML. z-index wirkt nur auf Elemente, deren position-Wert nicht static ist.

        Du meinst also, man soll auf einen Button klicken, und an der Stelle, wo sich der Button befand, befindet sich dann das Eingabefeld?

        Das ist imho mit reinen HTML/CSS-Mitteln in ein und derselben Seite nicht umsetzbar. Außerdem halte ich es auch konzeptionell für falsch.

        Ein submit-Button soll ein Formular absenden. Wenn er nur zum Einblenden des Suchfeldes verwendet werden soll, ist es kein submit-Button.

        Du könntest es so umsetzen, wie wir hier, mithilfe von :focus.

        Falls es wirklich nicht so sein soll, sehe ich drei Lösungsvarianten.
        #1# Du stylst das Eingabefeld, dass es so aussieht, als wäre es ein Button. Das hat aber den Nachteil, dass der Button nicht in jedem Browser wie ein gewohntes Bedienelement aussieht.

        #2# Du schickst das Formular ab und öffnest eine neue Seite mit dem Eingabefeld statt des Buttons. Das bedeutet, dass du unnötigerweise Daten durch die Gegend schickst.

        #3# Du setzt beim Klick auf den Button bei einem übergeordneten Element (vielleicht form) eine Klasse z.B. "suchen" und im CSS

        #myform input[type = "text"] {display: none;}  
  
#myform.suchen input[type = "text"] {display: inline;}  
#myform.suchen input[type = "submit"] {display: none;}

        Matthias

        --
        Der Unterschied zwischen Java und JavaScript ist größer als der zwischen Dom und Domina.

        Beitrag melden
        –
        Informationen zu den Bewertungsregeln