28172 sujets

CSS et mise en forme, CSS3

Bonjour,

actuellement sur la refonte d'un site suite a une formation j'ai de gros soucis sur la position des conteneurs comme je le souhaite.

Je dois refaire la page de login avec la fonction responsive et en ASP.net MVC que la partie view.

Dans le body je dois avoir un conteneur qui est centré verticalement et horizontalement sur la page
ensuite dans ce conteneur un autre conteneur avec le titre suivi d'un autre conteneur avec le formulaire
centré horizontalement .
voila quelque exemple a par que ça fait pas trop ce que je veux et je ne suis autorisé que à Knacss et ma propre feuille de style pas de jquery ou autre.

upload/62625-exemple.png

pour le moment mon code donne ça:


<div class="center w50 small-w100 " style="background: #CECFCF">
            <header class="line" style="background: #ffffff">
                <div class="mod fl w50">
                    <img src="../../Content/img/logo.png" />
                </div>
            </header>

            @using (Html.BeginForm("Login", "AuthentificationController", FormMethod.Post, new { Style="text-align:center" }))
            {

                <div class="center">
                    
                    <div class="small-wauto medium-wauto">
                        @Html.LabelFor(model => model.Login, new { Class = ""})
                        @Html.TextBoxFor(model => model.Login, new { autofocus = "", Class = "" })
                        @Html.ValidationMessageFor(model => model.Login)
                    </div>

                    <div class="small-wauto medium-wauto">
                        @Html.LabelFor(model => model.Password, new { Class = "" })
                        @Html.PasswordFor(model => model.Password, new { @Class = "" })
                        @Html.ValidationMessageFor(model => model.Password)
                    </div>
                    <input id="connexion" type="submit" />

                    @Html.ValidationMessage("InvalidUser")<br />
                    @Html.ValidationMessage("TooMuchTries")<br />
                    @Html.ValidationMessage("AccountIsLocked")<br />


                </div>


j'ai essayé différente façon mais je vous montre la dernière que j'ai actuellement qui ce rapproche du plus de ce que je cherche avant d'avoir désespéré Smiley langue .

Je vous remercie d'avance pour votre aide.
Modifié par LeLapinouu (16 Aug 2016 - 09:26)