zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Textfeld rechts formatieren + Verhalten bei Verkleinerung

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 23.12.2017, 16:09
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 23.12.2017
Beiträge: 1
Kazuya91 befindet sich auf einem aufstrebenden Ast
Standard 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.
Angehängte Grafiken
Dateityp: png Forum2.png (281,3 KB, 12x aufgerufen)
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 27.12.2017, 09:43
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 1.906
cloned ist ein sehr geschätzer Menschcloned ist ein sehr geschätzer Menschcloned ist ein sehr geschätzer Mensch
Standard

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)
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 27.12.2017, 15:52
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 10.01.2010
Beiträge: 1.050
MrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer Mensch
Standard

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);
      }
   }
Die Größen, Abstände und so weiter können natürlich noch angepasst werden.

Ich habe mal eine Beispielseite zum direkten Ausprobieren erstellt:

Beispielseite

Gruss

MrMurphy
Mit Zitat antworten
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
komische Verschiebung - wo liegt das Problem? Muckel (X)HTML 5 03.01.2009 18:26
IE Textfeld und Textarea nach rechts verschoben textnode CSS 13 03.08.2007 16:46
Überschrift teilweise nach links und nach rechts formatieren Robse CSS 5 17.01.2005 16:19


Alle Zeitangaben in WEZ +2. Es ist jetzt 22:44 Uhr.