Ergebnis 1 bis 5 von 5

Thema: input definieren - padding(?) funktioniert nicht richtig

  1. #1
    Youngster
    Registriert seit
    27.08.2008
    Beiträge
    14
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Unglücklich input definieren - padding(?) funktioniert nicht richtig

    hi, schon wieder ich :/
    ich will einen login bereich per css formatieren. prinzipiell funktioniert auch eig. alles bis auf den abstand oben und unten siehe screenshots.



    border hab ich auf 0 gesetzt und es wird ein hintergrund bild für den input verwendet.
    den text will ich in jedem* browser in der mitte haben. folgendes hab ich shcon probiert:
    > padding:auto 0 auto 4px;
    > vertical-align:middle;
    > margin:auto 0 auto 4px;

    *) sehr wichtig: Opera, FF, IE 8+, Firefox/Chrome
    *) weniger wichtig: Safari, IE unter 8

    bitte bitte helft mir
    Achtung: Dies ist ein alter Thread im HTML und Webmaster Forum
    Diese Diskussion ist älter als 90 Tage. Die darin enthaltenen Informationen sind möglicherweise nicht mehr aktuell. Erstelle bitte zu deiner Frage ein neues Thema im Forum !!!!!
    Geändert von dieRaute (06.09.2008 um 14:24 Uhr)

  2. #2
    Kaiser(in)
    Registriert seit
    24.04.2006
    Ort
    Ludwigshafen
    Beiträge
    2.720
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    Nimm statt oberem und unterem Padding eine line-height, die der Höhe des Feldes entspricht.

  3. #3
    Youngster
    Themenstarter

    Registriert seit
    27.08.2008
    Beiträge
    14
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    ändert leider nichts. vielleicht hilft es ja wenn ich die html und css schnipsel hier rein stell'.
    HTML-Code:
    <form id="login" action="#" method="post">
    
    <input id="text" type="text" name="email" value="email">
    <input id="text" type="password" name="password" value="pw">
    <input type="image" src="images/loginbutton.png" name="submit" value="Login" disabled>
    
    </form>
    HTML-Code:
    form#login {
     margin:2px 0 2px 6px;
    }
    
    input {
     font-family:arial, tahoma, segoe, helvetica, sans-serif;
     color:#575757;
     font-size:9pt;
     vertical-align:middle;
     background-color:transparent;
    }
    
    input#text {
     width:140px;
     height:22px;
     background-image:url(images/input.png);
     background-repeat:no-repeat;
     border:0;
     padding-left:4px; /* daraus ergibt sich leider auch ein aussenabstand von 4px und das input feld geht über das hintergrund bild hinaus. warum? */
     line-height:22px; /* hab auch schon andere werte probiert.. keine änderung */
    }
    line-height:wert; hab ich auch schon bei form und input probiert. leider auch hier keine änderung

  4. #4
    Kaiser(in)
    Registriert seit
    24.04.2006
    Ort
    Ludwigshafen
    Beiträge
    2.720
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    Kannst du mal einen Link zur Seite reinstellen, damit man alles im Gesamtzusammenhang sieht?

  5. #5
    Meister(in)
    Registriert seit
    10.01.2008
    Ort
    Passau/Ösiland
    Beiträge
    267
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    Mahlzeit,

    <input> ist ein inline-Element.
    Inline-Elemente erzeugen keinen eigenen Absatz und "schwimmen" im Textfluß mit. Sie nehmen vertikale paddings/margins deshalb nicht so gut an.

    Möglichkeiten auf die Höhe von inline-Elementen Einfluß zu nehmen sind deshalb font-size und line-height.

    Da deine Input-Feldern jeweils sowieso lt. Bild auf einer eigenen Zeile hocken, würde ich ihnen mal display:block geben und testen, ob du dann die Darstellung in gewünschtem Maße anpassen kannst.

    koslowski

Ähnliche Themen

  1. Anfrageformular funktioniert nicht richtig
    Von Buxbaum im Forum HTML & CSS Forum
    Antworten: 9
    Letzter Beitrag: 19.06.2006, 22:12
  2. Antworten: 9
    Letzter Beitrag: 28.07.2005, 23:43
  3. Preloader funktioniert nicht richtig...!?
    Von kAmui im Forum HTML & CSS Forum
    Antworten: 6
    Letzter Beitrag: 15.12.2004, 22:07
  4. #anker funktioniert nicht richtig
    Von steef im Forum HTML & CSS Forum
    Antworten: 8
    Letzter Beitrag: 11.12.2004, 15:05
  5. Formular funktioniert nicht richtig
    Von michalex32 im Forum HTML & CSS Forum
    Antworten: 2
    Letzter Beitrag: 25.09.2004, 12:47

Stichworte

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •