|
|||
Textfeld rechts formatieren + Verhalten bei Verkleinerung
Hallo,
ich bin ein absoluter Neuling was CSS angeht und ich bin auf dieses Forum gestoßen. Ich hoffe ihr könnt mir bei meinem Problem helfen. Ich habe eine Login Seite erstellt mittels einer Vorgabe von Django die auch absolut ausreichend ist. Nun hab ich ein "Luxusproblem" was nur optischer Natur ist. Das tolle an den CSS-einstellungen welches Django schon gesetzt hat ist, dass sich bei Verkleinerung der Webseite die Elemente verschieben, sodass "Benutzername" welches ursprünglich links vom Input-Feld ist über das Input-Feld verschiebt. (das ist auch gewollt und gefällt mir ). Das Input-Feld vom Passwort ist aber unschön platziert. Es soll meiner Meinung nach mit der gleichen Größe genau unter dem Input-Feld des Benutzernamens stehen. Außerdem soll "Passwort:" eher rechts stehen sodass die Doppelpunkte auch untereinander sind. Hab schon einiges probiert, aber ich komme nicht zu dem Ergebnis welches ich möchte. Bin schon seit Stunden dran, aber kriege es nicht. Dabei ist es bestimmt ein Zweizeiler... Ich habe hier mal ein Bild angehangen, mit dem Ist-Zustand und dem gewünschten Zustand. Hoffe es hilft beim Verständnis. |
Sponsored Links |
|
|||
Bilder sind leider wenig hilfreich wenn es um Code geht, wir können hier nicht sehen, wie dein Bereich mit dem Passwort genau aufgebaut ist. Es ist zwar anzunehmen, dass er gleich ist wie der Teil mit dem Usernamen, aber zu 100% kann man dies nicht sagen.
Kannst du deshalb den Code bitte mittels CODE-Tags hier einfügen? HTML + CSS. Auch sieht man bei deinem Screenshot nicht, wie das CSS für das Label aussieht (und um das geht es dir im Endeffekt ja) |
Sponsored Links |
|
|||
Hallo
Da wir dein CSS nicht kennen musst du selbst dafür sorgen dass es bei Lösungsvorschlägen nicht dazwischenfunkt. Mit dem folgenden CSS sollte sich die Seite wie von dir gewünscht verhalten: Code:
/*pcontainer*/ @media all { .pcontainer { margin-top: 2rem; } .pcontainer p label { display: block; width: 180px; margin: 0.3rem 0.5rem 0.3rem 0rem; } .pcontainer p input { width: 95%; max-width: 400px; } } @media only screen and (min-width: 500px) { .pcontainer p { display: flex; } .pcontainer p label { text-align: right; display: block; margin: 0.3rem 0.5rem 0.3rem 0rem; } .pcontainer p input { width: calc(100% - 180px); } } Ich habe mal eine Beispielseite zum direkten Ausprobieren erstellt: Beispielseite Gruss MrMurphy |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
komische Verschiebung - wo liegt das Problem? | Muckel | (X)HTML | 5 | 03.01.2009 17:26 |
IE Textfeld und Textarea nach rechts verschoben | textnode | CSS | 13 | 03.08.2007 15:46 |
Überschrift teilweise nach links und nach rechts formatieren | Robse | CSS | 5 | 17.01.2005 15:19 |