Fomular macht mein Design kaputt!

[DjRay]

Hey liebe Community!

Ich habe auf meiner Homepage gern einen Login mit eigenen Textfeldern das heisst mit eigenem Background.

Jetzt habe ich es so probiert:

HTML:
<input type="text" name="username" class="username" size="18" maxlength="20" >

CSS:
.username {
width:186px;
background-image: url(index_90.gif);
height: 21px;
border:0px;
}


Mein Problem es zerschiesst mir das ganze Design.
width und height habe ich die größe des Bildes genommen.

DjRay

 

[pallino]

Du hast vergessen die Farbe für das Textfeld anzugeben. Du meinst es wäre nichts auf dem Bildschirm, dabei ist es nur weiß und du siehst es nicht.
Ich habe die CSS Datei etwas verändert, damit du das Textfeld erkennen kannst.

.username {
background-color:#E0EEEE;
width:186px;
background-image: url(index_90.gif);
height: 21px;
border:1px;
border-color:#000000;
border-style:solid;
}

Ich hoffe ich konnte helfen!

 

[mermshaus]

Mein Problem es zerschiesst mir das ganze Design.

Der Trick ist, es in CSS so zu stylen, dass das nicht passiert. Du musst dazu die passenden Eigenschaften setzen.

Im Ernst: Wie soll man dazu etwas sagen können, ohne die Restseite zu kennen?

Edit: @pallino/#4: Ich glaube, der Ansatz passt nicht zum Problem. Das Textfeld ist wahrscheinlich sichtbar, es ist nur zu breit oder zu hoch und zerschießt dadurch das Restlayout der Seite.

 

[pallino]

Stimmt überhaupt meine Lösung und mein Code?! Mir sind nämlich gerade die Zweifel gekommen...

 

[pallino]

Und das heißt im Klartext?

Noch eine Frage: Was ist das Restlayout?

 

[mermshaus]

Und das heißt im Klartext?

Noch eine Frage: Was ist das Restlayout?

Wie, „im Klartext“? Ein Element ist meinetwegen zu breit und rutscht in die nächste Zeile, wodurch das umgebende Element zu hoch wird, wodurch alle gefloateten Elemente darunter nach unten gedrückt werden… Es verspringt eben alles in einer Kettenreaktion.

Das Restlayout umfasst die „räumliche“ Ausdehnung/Position derjenigen Seitenelemente (oder Teile davon), die nicht dasjenige Element sind, das für die Verschiebung sorgt.

 

[pallino]

Okay, vielen Dank!