oxo888oxo: Formularfeld neben Input-Button

Beitrag lesen

SELF-Forum

Formularfeld neben Input-Button

oxo888oxo
– Informationen zu den Bewertungsregeln

Du setzt nur für 2 von 3 Eigenschaften, die die Gesamthöhe beeinflussen, explizit Werte.

Meinst Du da die Schriftgröße als dritte Eigenschaft?

Padding läßt Du auf Browserdefault.
Und dann gehst Du davon aus, daß bei dem Textfeld 4 Pixel weniger Padding vorhanden sind als bei dem Button (oder wie erklärst Du sonst die unterschiedlichen height-Angaben, obwohl du gleich hohe Elemente haben willst?).

Ich habe nun die Schriftgröße, die Höhe und Padding für das Eingabefeld und den Butten auf die gleichen Werte gesetzt. Den Code siehst Du unten. Aber leider kalppt die Darstellung nun überhaupt nicht mehr. Auch nicht in den aktuellen Browsern.

Wo ist denn jetzt mein Fehler?

<!DOCTYPE html>  
  
  <head>  
    <meta charset="utf-8">  
    <title>blabla</title>  
  
<style>  
html {  
  height:101%;  
}  
  
body {  
  margin: 0;  
  text-align: center;  
  font-family: Helvetica, Arial, sans-serif;  
  font-size: 100%;  
  line-height: 130%;  
  color: #313131;  
}  
  
#seite {  
  width: 790px;  
  border-left: 3px solid #313131;  
  border-right: 3px solid #313131;  
  border-bottom: 3px solid #313131;  
  margin: 0 auto;  
  text-align: left;  
}  
  
#navigation {  
  float: left;  
  padding-top: 5px;  
  margin-bottom: 50px;  
  width: 239px;  
  line-height: 180%;  
  font-size: 1.2em;  
}  
  
#navigation form {  
  padding-left: 15px;  
}  
  
#navigation input#suchfeld {  
  border: 1px solid #313131;  
  background-color: #fff;  
  font-size: 1em;  
  height: 22px;  
  padding: 3px;  
  width: 135px;  
}  
  
#navigation input#suchbutton {  
  border: 1px solid #313131;  
  border-left: none;  
  background-color: #F0F0F0;  
  font-size: 1em;  
  height: 22px;  
  padding: 3px;  
  width: 60px;  
  cursor: pointer;  
}  
  
#inhalt {  
  margin-left: 260px;  
  padding: 10px 0 20px 0;  
}  
  
#fusszeile {  
  width: 786px;  
  border-top: 2px solid #313131;  
  clear: both;  
  margin: 0;  
  padding: 20px 2px;  
  text-align: center;  
  font-size: 1.2em;  
  font-weight: bold;  
  color: #ca1600;  
}  
</style>  
  
  </head>  
  
  <body>  
  
    <div id="seite">  
  
      <div id="navigation">  
        <form method="get" action="/_xx_search.php">  
          <input id="suchfeld" name="searchwords" type="text"><input id="suchbutton" type="submit" value="Suchen">  
        </form>  
      </div>  
  
      <div id="inhalt">  
  
        <p>  
          blöablö  
        </p>  
  
      </div>  
  
      <p id="fusszeile">  
        huuup :-)  
      </p>  
  
    </div>  
  
  </body>  
  
</html>
Beitrag melden
–
Informationen zu den Bewertungsregeln