Ausrichtung meiner Login Page

Ich grüße euch

Eigentlich ist das hier mein letzter Weg herauszufinden wie ich das gelöst bekomme, aber ich verbringe damit nun schon beinahe 2 Tage und es frustriert mich sehr.

Ich gestalte eine Login Page diese sich automatisch Ausrichten soll ähnlich wie die von facebook

Das Logo soll links zentriert zu dem Anmeldetext, input und buttons sein, soll sich aber wenn das Fenster kleiner gezogen wird von oben nach unten aufreihen (Logo>Anmeldetext>input>buttons.

Wie löse ich das ganze ordentlich?

Im Grunde genommen sollen Anmeldetext, input und button miteinander verbunden sein und sich nur als ein ganzes verhalten, allerdings schwimmt alles herum wie es will. Nur das Logo soll sich frei verhalten von links-mittig bis oben-mittig.

Hier findet ihr meinen Code:

https://jsfiddle.net/gdp3j489/

Ich danke schon mal für die Mühen

Hey, ne funktioniert nicht so richtig, mit display inline block sind dann alle elemente nebeneinander, sollen aber übereinnder bleiben.,

Also Anmeldetext, input und button, sollen immer übereinander fest verankert sein, währrend das bild bei einer fenstergrößen veränderung wahlweise von seite links auf nach oben drüber wandert.

Da vielleicht eine idee?

Danke schon mal fürs antworten

LG

könntest du mir bitte doch dabei irgendwie helfen, bin am verzweifeln.

würdest du mir meinen code den ich oben eingebunden habe etwas abändern, in etwa so wie du meintest?

das Bild muss auch nicht im Padding sein aber wäre wünschenswert wenn es eine einheit bilden würde die sich eben auf bildverhältnisse anpasst.

:thanks:

Danke das klingt sehr interessant, jetzt hab ich wieder eine Aufgabe

Zitat von Sempervivum

Informiere dich über Flexlayout, damit kannst Du die Anordnung genau so einrichten, wie Du es dir vorstellst:

https://www.html-seminar.de/css-flexbox.htm

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Das war das hilfreichste das ich seit langem erhalten hatte.

Problem ist gelöst und nebenbei habe ich gelernt wie man ein klassisches Layout erstellt.

Mein Problem konnte mit einer Display: Flex; Positionierung gelöst werden, dazu warf ich mein Formular samt Logo das ich auf Bildverhältnisse angepasst haben wollte (wide screen=Neben dem Formular und small screen=Über dem Formular), in einem gemeinsamen Container, anschließend wurde über justify-content: festgelegt wie sich die elemente zueinander verhalten sollen, in meinem fall stets zentriert.

Mein Code: https://jsfiddle.net/194eLxr7/8/

defakto hat mir das gefehlt:

#flex{
padding-top: 100px;
display: flex;
flex-direction: row;
flex-wrap: wrap;
width: 50%;
align-items: center;
justify-content: center;
margin: auto;
}

so einfach konnte es sein