5568 sujets

Sémantique web et HTML

Bjr, comment aligner mon "connexion" ?

Bonsoir à tous,

je débute en html / css, désolé pour ma nullité ^^

je suis perdu dans les alignements , je vois des techniques de partout et je n'arrive à en appliquer aucune Smiley ohwell

je me permets de vous joindre en PJ mon "code". J'aimerai aligner le "connexion" juste au centre de "pseudo" et mot de passe" qui se trouve juste en dessous.

J'aimerai également remonter mon "inscription"...

Vous avez mon remerciement éternel ,


bonne soirée à tous

Desc'
Descape a écrit :
Bonsoir à tous,

je débute en html / css, désolé pour ma nullité ^^

je suis perdu dans les alignements , je vois des techniques de partout et je n'arrive à en appliquer aucune Smiley ohwell

je me permets de vous joindre en PJ mon "code". J'aimerai aligner le "connexion" juste au centre de "pseudo" et mot de passe" qui se trouve juste en dessous.

J'aimerai également remonter mon "inscription"...

Vous avez mon remerciement éternel ,


bonne soirée à tous

Desc'
page HTML

<html>

<head>

<title>www.kiki.fr</title>

<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="yann/styles.css">

</head>

<body>

<!-- haut de page -->

<header>

<p class="haut">

<img src="yann/haut.png">

<p class="Membre">

<div >

<a1>CONNEXION</a1>

<br>

<input type="text" placeholder="pseudo"/> <br>

<input type="text" placeholder="mot de passe"/> <br>

<a href="www.google.fr">Entrez</a></p></div>

</p>

</header>

<p class="milieu">
<center><a href="yann2.html"><button>inscription</button></a></center>

</p>

<p class="centre">

<center><img src="yann/images/yann30.png"></center>

</p>
</body>
</html>




PAGE CSS :

body {

background: url(https://www.ptitdog.com/images/00back1bis.jpg);
}

div{
text-align: right
}

header {

}

p.haut{

height: 70px ;

align-items: center;
}
p.milieu{

display: inline-block ;
}
p.ins{

height: 70px ;
}

a1 {align:left}

Html

<!DOCTYPE html>
Salut Yann,

J'ai pas tout à fait compris ce que tu essayais de faire.
En étant débutant c'est normal de faire des erreurs mais ne commence pas en disant être une "nullité", on est tous passés par là Smiley cligne

Ton code n'est pas bien structuré du tout :
- des balises à ne pas utiliser (comme la <center> par exemple)
- des balises ouverte et non fermées
- mauvaise utilisation de balises (pas de <img> dans un <p>)
- une mauvaise indentation (inexistante d'ailleurs)
...

Mais tes erreurs sont normales et c'est en les faisant que tu apprendras.
Quoi qu'il en soit, voici un code un peu plus propre qui permet de faire à peu ce que tu veux (je pense)

HTML

<html>
<head>
    <title>www.kiki.fr</title>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="yann/styles.css">
</head>
<body>
    <header>
        <img src="yann/haut.png">
        <div class="login-block">
            <div class="user-access">
                <h1 class="text-uppercase mb">Connexion</h1>
                <div class="input-group mb">
                    <input type="text" placeholder="pseudo" />
                    <input type="text" placeholder="mot de passe" />
                </div>
                <a href="www.google.fr" class="text-center">Entrez</a>
            </div>
        </div>
    </header>
    <p class="text-center mt-0">
        <button href="yann2.html">inscription</button>
    </p>
    <div class="text-center">
        <img src="yann/images/yann30.png">
    </div>
</body>
</html>


CSS

body {
    background: url('https://www.ptitdog.com/images/00back1bis.jpg');
}
.user-access {
    display: flex;
    flex-direction: column;
    width: fit-content;
}
.input-group {
    display: flex;
    flex-direction: column;
    width: auto;
}
.mb {
    margin-bottom: 1.5rem;
}
.mt-0 {
    margin-top: 0;
}
.login-block {
    display: flex;
    justify-content: flex-end;
}
.text-center {
    text-align: center;
}
.text-uppercase {
    text-transform: uppercase;
}


Si tu as des question n'hésites pas à répondre ici (ou en message privé)
Descape a écrit :
Bonsoir à tous,

je débute en html / css, désolé pour ma nullité ^^

je suis perdu dans les alignements , je vois des techniques de partout et je n'arrive à en appliquer aucune Smiley ohwell

je me permets de vous joindre en PJ mon "code"Lucky Patcher 9Apps VidMate. J'aimerai aligner le "connexion" juste au centre de "pseudo" et mot de passe" qui se trouve juste en dessous.

J'aimerai également remonter mon "inscription"...

Vous avez mon remerciement éternel ,


bonne soirée à tous

Desc'

saisir les paragraphes
tout sélectionner
insérer les puces
placer un taquet "Tabulation centrée" au milieu de la règle horizontale
entre chaque puce et le début de son texte, faire [ctrl+Tabulation]
Modifié par bilotola (15 Feb 2019 - 22:12)
Sujet clos
Aller à