Ankündigung

Einklappen
Keine Ankündigung bisher.

[Erledigt] Formular mit CSS gestalten: Probleme mit Ausrichtung

Einklappen

Neue Werbung 2019

Einklappen
X
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • [Erledigt] Formular mit CSS gestalten: Probleme mit Ausrichtung

    Hallo miteinander,

    ich stehe vor einem kleinen Problem bei der Ausrichtung eines Input-Feldes.
    In einem 20px hohen Div-Container (+2px padding) sind zwei <input>-Felder (1x type=text und 1x type=image), die eine Suche darstellen sollen.

    Die Abstände, Abmessungen etc. sollten eigentlich soweit korrekt sein, aber das Eingabefeld hängt um einige Pixel runter, was ich mir nicht so recht erklären kann.

    An anderen CSS-Angaben kann es auch nicht liegen, da ich es in einer unabhängigen Datei getestet habe.

    Was mich etwas verwirrt: Setze ich die font-size des Eingabefeldes auf einen hohen Wert (>=26), so rückt das Eingabefeld auf die gewünschte Position. Das ist natürlich kein gewünschtes Workaround.

    Das Phänomen tritt bei Firefox, Opera sowie auch Chrome auf (IE nicht getestet).

    Um Euch das Problem zu Visualisieren, habe ich mal Screenshots zusammengestellt:


    Und zum Schluss der Code zu dem Drama:

    Code:
    <form action="index.php" method="post">
    <div class="search">
    <input type="text" class="search_input" tabindex="1" name="s" id="s" value="Suche..."  onfocus="this.value=''" />
    <input type="image"  src="/images/magnifier.png" class="search_send" alt="Suchen"  tabindex="2" />
    </div>
    </form>
    Code:
    .search {
    	height: 20px;
    	float: right;
    	background-color: #21496f;	
    	padding: 2px;
    }
    .search input {
    	background-color: #4682b4;
    	color: #FFFFFF;
    	border: 0;
    	padding: 0;
    }
    .search_input {
    	width: 200px;
    	height: 20px;
    	font-size: 12px;
    	margin: 0 2px 0 0;
    }
    
    .search_send {
    	width: 20px; 
    	height: 20px;
    	background-color: #21496f;
    
    }
    Hoffe auf Eure Hilfe


  • #2
    Ich sehe weder Angaben zu vertical-align noch line-height ...

    Kommentar


    • #3
      Wie ChrisB auch schon sagt, du hast ja nichts angegeben, wie der Abstand nach oben bzw. nach unten sein soll. Und die Höhe des Eingabe Feldes hast du auch nicht mit line-height angegeben.

      Kommentar


      • #4
        Das hängt damit zusammen, dass das Bild auf der Baseline des Eingabefeldes sitzt.
        --

        „Emoticons machen einen Beitrag etwas freundlicher. Deine wirken zwar fachlich richtig sein, aber meist ziemlich uninteressant.
        Wenn man nur Text sieht, haben viele junge Entwickler keine interesse, diese stumpfen Texte zu lesen.“


        --

        Kommentar


        • #5
          Code:
          .search input {
                  float: left;
          }

          Kommentar


          • #6
            Hmm okay...
            Besten Dank für Eure Hilfe. Mit float: left; oder auch vertical-align: top; komme ich zum Ziel.
            Keine Ahnung wieso ich da nicht selber auf gekommen bin. Vielleicht habe ich auch so viel rumprobiert, dass meine Lösungsvorschläge sich gegenseitig behindert haben.

            Wie auch immer, das Problem ist gelöst.

            Kommentar

            Lädt...
            X