input-button mit css formatieren

**Abraxax** · 20-07-2004, 11:47

was hast du denn bisher gemacht? -> code

wie sieht das resultat aus? -> screener

**Patrick_PQ** · 20-07-2004, 11:59

@Abraxax: ... was ich bisher gemacht habe:
css->input{ height:16px; font-size:10px; }
führt dazu das Input Type=Text kleiner angezeigt wird, Input Type=Submit läuft der Text durch den unteren Bildrand.

Habe bei CSS4YOU und Selfhtml gesucht. Sowohl in der Übersicht als auch in den jeweiligen Foren. Habe nichts passendes gefunden.

Hier noch ein Screenshot-Ausschnitt ...

Attached Files

submit_mit_kleinem_text.jpg (3.3 KB, 218 views)

**Abraxax** · 20-07-2004, 12:08

und so ?

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <title>titel</title>

  <style type="text/css">
    body {
        font: 11px verdana,sans-serif;
    }
    input,select {
        height: 16px;
        width: 100px;
        font-size:10px;
        padding: 0;
    }
    
    input.sub {
        height: 20px;
    }
  </style>

</head>

<body>

<form action="">
    Textfeld: <input type=text name=textfeld value=test>
    Anzeige: <select><option>alle</option></select>
    <input class=sub type=submit value=anwenden>
</form>

</body>
</html>

**Patrick_PQ** · 20-07-2004, 12:46

ja, so hatte ich mir das vorgestellt ... besten Dank!

Ich frage mich jetzt nur, wo der Unterschied zu meinem Versuch ist

Ob ich jetzt padding:0px oder padding-top:0px verwende - der obere Rand sollte in beiden Fällen 0px betragen - oder ?!

Die Beschriftung ist jetzt vollständig zu lesen - allerdings ist der obere Rand immer noch breiter als der untere (jedenfalls bei Darstellung im IE5.0). Ich werde mich wohl noch mal ausführlich damit beschäftigen und meine Ergebnisse dann hier präsentieren - sofern präsentabel

**Abraxax** · 20-07-2004, 13:06

das padding kannst du weglassen. da ändert sich nichts. das hatte ich nur zum testen mal drin und nicht wieder entfernt.

der unterschied zu deiner lösung besteht darin, dass ich dem submit-button eine css-class gegeben habe, ich der ich die höhe noch einmal separat anpasse.

input-button mit css formatieren