Partage

Reproduire cette image en html/css

comment retiré le petit espacement

6 janvier 2019 à 11:51:29

Bonjour!

Dans le cadre d'un exercice html /css je doit reproduire cette image : https://ibb.co/Mhb4t7X

J'ai un petit soucis sur la façon de procéder j'ai créé un <p> pour <votre identité> avec le background color ect et pour ma liste ordonnée pareil le problème c'est que j'ai un espacement entre le <p> et <ol> peu t'on agrandir le background de <ol> pour le coller à mon <p> je ne veux pas un code en entier pour reproduire bêtement mon image , je veux simplement comprendre comment retiré l'espacement ou si ma méthode est mauvaise ! merci

-
Edité par JohanLt 6 janvier 2019 à 11:54:48

Zoki_Marciano

6 janvier 2019 à 13:10:54

Je vois un fieldset avec une legend et à l'interieur une liste ordonnée avec des inputs/textarea.

Passer pour un idiot aux yeux d'un imbécile est une volupté de fin gourmet.

Lamecarlate

6 janvier 2019 à 13:52:32

Bonjour,

sans ton code à toi, impossible de t'aider Merci de le copier ici, avec le bouton </>.

Pas d'aide concernant le code par MP, le forum est là pour ça :)

JohanLt

6 janvier 2019 à 15:56:02

Merci pour vos réponse en effet la balise <fieldset> marche à merveille ! la question que je me pose c'est comment ajouter la balise text area dans une balise <li> pour faire le champ de renseignement ( Nom )

Voici le début de mon code

html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>Exercice6</title>
        <link rel="stylesheet" href="style.css"/> 
    </head>
    <body>
        <form>
            <fieldset>
                <legend>Votre Identité</legend>
                    <ol>
                        <li>Nom :</li>
                        <li>Prénom :</li>
                        <li>Adresse mail :</li>
                    </ol>
            </fieldset>
        </form>
    </body>

</html>

Mon css

/* TOP */

legend {
    background-color: #2574a9;
    
    
}
    
fieldset {
    background-color: #2574a9;
    width: 1300px
}

ol {
    
    
}


/* MIDDLE */

Serkox

6 janvier 2019 à 16:06:28

Bonjour,

Tu peux le mettre en dessous tout simplement ?

<form>
            <fieldset>
                <legend>Votre Identité</legend>
                    <ol>
                        <li>Nom :</li>
                        <textarea></textarea>
                        <li>Prénom :</li>
                        <li>Adresse mail :</li>
                    </ol>
            </fieldset>
        </form>

#Avgeek

JohanLt

6 janvier 2019 à 16:42:05

J'aimerai savoir si ma ligne de code est correct aussi ça me parait bizarre me ça marche ( je veux mettre dans ma balise <li> un input type pour faire mon champ de renseignement

<li>Nom : <input type="text" name="nom" placeholder="Nom"/></li>

Lamecarlate

6 janvier 2019 à 17:52:36

> Tu peux le mettre en dessous tout simplement ?

Certainement pas ! Un <ol> ne contient que des <li>.

JohanLt > oui, c'est comme ça qu'il faut faire Il faut mettre input et textarea dans les li. C'est tout à fait valide et fonctionnel.

Pas d'aide concernant le code par MP, le forum est là pour ça :)

JohanLt

6 janvier 2019 à 18:12:41

AH merci Lamecarla ducoup j'ai fait autrement Je bloque dans mon css maintenant ..

Je n'arrive pas a mettre la propriété class dans fieldset et legend actuellement ça ressemble à ça

ducoup ça fait le meme font de couleur en haut et au millieux

comment attribué une id ou class dans mon fieldset / legend

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>Exercice6</title>
        <link rel="stylesheet" href="style.css"/> 
    </head>
    <body>
        <form>
            <fieldset class"haut">
                <legend>Votre Identité</legend>
                    <ol>
                        <li>
                            <label for="nom">Nom :</label>
                            <input type="text" name="nom" placeholder="Nom"/>
                        </li>
                        <li>
                            <label for="nom">Prénom :</label>
                            <input type="text" name="nom" placeholder="Prénom"/>
                        </li>
                        <li>
                            <label for="nom">Adresse Mail :</label>
                            <input type="text" name="nom" placeholder="Adresse mail :"/>
                        </li>
                    </ol>
            </fieldset>
            <fieldset>
                <legend>Adresse de livraison</legend>
                    <ol>
                        <li>
                            <label for="Adresse">Adresse :</label>
                            <textarea rows="5" cols="16"></textarea>
                            
                            
                        </li>
                        <li>
                            <label for="nom">Code postal :</label>
                            <input type="text" name="nom" placeholder="Code postal"/>
                        </li>
                        <li>
                            <label for="nom">Ville :</label>
                            <input type="text" name="nom" placeholder="Ville:"/>
                        </li>
                    </ol>
            </fieldset>
            <fieldset>
                <legend>Adresse de livraison</legend>
                    <ol>
                        <li>
                            <label for="nom">Adresse:</label>
                            <input type="text" name="Adresse" />
                        </li>
                        <li>
                            <label for="nom">Prénom :</label>
                            <input type="text" name="nom" placeholder="Prénom"/>
                        </li>
                        <li>
                            <label for="nom">Adresse Mail :</label>
                            <input type="text" name="nom" placeholder="Adresse mail :"/>
                        </li>
                    </ol>
            </fieldset>
        </form>
    </body>

</html>

/* TOP */
legend{
    background-color: #2574a9;
}


fieldset {
    background-color: #2574a9;
    width: 1300px
}

ol {
    
    
}


/* MIDDLE */

{
    background-color: #2574a9;
    
    
}
    
 {
    background-color: #2574a9;
    width: 1300px
}

 {
    
    
}

Lamecarlate

6 janvier 2019 à 18:31:37

Il faut écrire class="haut". Et dans ton CSS tu as des propriétés sans sélecteur…

Pas d'aide concernant le code par MP, le forum est là pour ça :)

JohanLt

6 janvier 2019 à 19:05:53

Merci pour les class ça à marché après je sais pas si j'avais une utilité à change haut et top ca fait beaucoup de choses pour si peu !

Voilà ce que ca donne il y a un probleme je pense sur la taille des champs de renseignement je pense la police qui est pas la même quand je la mets en gras ça fait trop noir comparé à l'image et j'arrive pas à trouver une solution pour placer la boxes VISA et Mastercard à la même hauteur que l'image de travail !

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>Exercice6</title>
        <link rel="stylesheet" href="style.css"/> 
    </head>
    <body>
        <form>
            <fieldset class="haut">
                <legend class="top">Votre Identité</legend>
                    <ol>
                        <li>
                            <label for="nom">Nom :</label>
                            <input type="text" name="nom" placeholder="Nom"/>
                        </li>
                        <li>
                            <label for="nom">Prénom :</label>
                            <input type="text" name="nom" placeholder="Prénom"/>
                        </li>
                        <li>
                            <label for="nom">Adresse Mail :</label>
                            <input type="text" name="nom" placeholder="Adresse mail :"/>
                        </li>
                    </ol>
            </fieldset>
            <fieldset class="millieux">
                <legend class="middle">Adresse de livraison</legend>
                    <ol>
                        <li>
                            <label for="Adresse">Adresse :</label>
                            <textarea rows="5" cols="16"></textarea>
                            
                            
                        </li>
                        <li>
                            <label for="nom">Code postal :</label>
                            <input type="text" name="nom" placeholder="Code postal"/>
                        </li>
                        <li>
                            <label for="nom">Ville :</label>
                            <input type="text" name="nom" placeholder="Ville:"/>
                        </li>
                    </ol>
            </fieldset>
            <fieldset class="bas">
                <legend class="down">Informations de réglement</legend>
                    <ol>
                        <li>
                            <label for="nom">Type de carte bancaire :</label><br>
                            <input id="how-friend" name="how" type="radio">
                            <label for="how-friend" class="side-label">VISA</label><br>
                            <input id="how-friend" name="how" type="radio">
                            <label for="how-friend" class="side-label">Mastercard</label>
                        </li>
                        <li>
                            <label for="nom">Numéro de carte :</label>
                            <input type="text" name="nom" placeholder="Numéro de carte"/>
                        </li>
                        <li>
                            <label for="nom">Code de sécurité :</label>
                            <input type="text" name="nom" placeholder="Code de sécurité :"/>
                        </li>
                        <li>
                            <label for="nom">Nom du titulaire :</label>
                            <input type="text" name="nom" placeholder="Nom du titulaire :"/>
                        </li>
                    </ol>
            </fieldset>
            <input class="favorite styled"type="button"value="J'achète !"/>
        </form>
    </body>

</html>

/* TOP */
.top{
    background-color: #2574a9;
    
}

.haut {
    background-color: #2574a9;
    width: 1300px
    
}



/* MIDDLE */

.middle{
    background-color: #9A12B3;
}


.millieux{
    background-color: #9A12B3;
    width: 1300px
}


/* LOWER */

.down {
    background-color: #DB0A5B;
}


.bas {
    background-color: #DB0A5B;
    width: 1300px
}

Lamecarlate

6 janvier 2019 à 19:30:40

Bon, déjà, on va revoir le HTML :

les id doivent être uniques sur la page
pas forcément les name, mais il faut être logique : c'est un name différent par input, sauf dans le cas des input de type radio (parce que dans ce cas on veut effectivement n'envoyer qu'une seule valeur)
c'est très bien d'avoir mis des label avec des for mais pense à changer leur valeur une fois les name mis à jour
pense à mettre des espaces entre les attributs, notamment dans l'input tout en bas, ça manque

Pas obligatoire mais pratique :

on dit "milieu" mais je te suggère plutôt de donner des noms correspondant à la fonction plutôt qu'à la position

Dans le CSS :

tu peux cibler un élément qui est dans un autre : .haut legend te permettra de cibler tout comme .top, inutile d'alourdir ton HTML
tu es sûr d'avoir besoin de préciser la largeur à chaque fois ?

Pour ta question : on te demande du pixel perfect ? Si on ne te fournit pas la taille du texte ni sa police, en tant que développeuse web front expérimentée, je considère qu'on ne peut pas faire exactement ce qui est demandé.

Et je n'ai pas compris le problème pour les radio buttons VISA/Mastercard : tu pourrais faire une capture d'écran de ce que tu obtiens ?

-
Edité par Lamecarlate 6 janvier 2019 à 19:31:17

Pas d'aide concernant le code par MP, le forum est là pour ça :)

JohanLt

6 janvier 2019 à 20:16:01

Merci pour votre réponse lamecarlate

En effet ça fait beaucoup de choses ! je suis tout nouveau dans le html j'ai fait 3 jour de formation et je suis en formation pour 6 mois , non ce n'est pas du pixel perfect dans mon exercice par contre les directives sont :

Reproduire l'image correspondant à l'exercice.
Ce formulaire contient 3 parties et un bouton.
Toutes les propriétés CSS se trouveront dans un fichier autre que le fichier HTML.

Niveau de l'indentation et espacement j'ai appris comme ça un exemple me ferai peu être voir les choses autrement même une correction de mon html / css pour voir les choses inutile peu être que j'ai mi ou mal fait ! ça serai génial !

j'ai essayé de corrigé par apport aux informations que vous m'avez donner, je pense pas que j'ai tout bien fait

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>Exercice7</title>
        <link rel="stylesheet" href="style.css"/> 
    </head>
    <body>
        <form>
            <fieldset class="haut">
                <legend class="top">Votre Identité</legend>
                    <ol>
                        <li>
                            <label for="Nom">Nom :</label>
                            <input type="text" name="nom" placeholder="Nom"/>
                        </li>
                        <li>
                            <label for="Prénom">Prénom :</label>
                            <input type="text" name="nom" placeholder="Prénom"/>
                        </li>
                        <li>
                            <label for="Adresse Mail">Adresse Mail :</label>
                            <input type="text" name="nom" placeholder="Adresse mail :"/>
                        </li>
                    </ol>
            </fieldset>
            <fieldset class="milieu">
                <legend class="middle">Adresse de livraison</legend>
                    <ol>
                        <li>
                            <label for="Adresse">Adresse :</label>
                            <textarea rows="5" cols="16"></textarea>
                        </li>
                        <li>
                            <label for="Code Postal">Code postal :</label>
                            <input type="text" name="nom" placeholder="Code postal"/>
                        </li>
                        <li>
                            <label for="Ville">Ville :</label>
                            <input type="text" name="nom" placeholder="Ville:"/>
                        </li>
                    </ol>
            </fieldset>
            <fieldset class="bas">
                <legend class="down">Informations de réglement</legend>
                    <ol>
                        <li>
                            <label for="CB">Type de carte bancaire :</label><br>
                            <input id="CB" name="CB" type="radio">
                            <label for="VISA" class="side-label">VISA</label><br>
                            <input id="Master" name="Master" type="radio">
                            <label for="Master" class="side-label">Mastercard</label>
                        </li>
                        <li>
                            <label for="numero">Numéro de carte :</label>
                            <input type="text" name="nom" placeholder="Numéro de carte"/>
                        </li>
                        <li>
                            <label for="code">Code de sécurité :</label>
                            <input type="text" name="code" placeholder="Code de sécurité :"/>
                        </li>
                        <li>
                            <label for="nom">Nom du titulaire :</label>
                            <input type="text" name="nom" placeholder="Nom du titulaire :"/>
                        </li>
                    </ol>
            </fieldset>
            <input type="button"value="J'achète !"/>
        </form>
    </body>
</html>

/* TOP */
.top{
    background-color: #2574a9;
    
}

.haut {
    background-color: #2574a9;
    width: 1300px
    
}

/* MIDDLE */

.middle{
    background-color: #9A12B3;
}


.milieu{
    background-color: #9A12B3;
    width: 1300px
}


/* LOWER */

.down {
    background-color: #DB0A5B;
}


.bas {
    background-color: #DB0A5B;
    width: 1300px
}

Pour l'image à gauche celle de l'exercice et à droite celle que j'essaie de reproduire !

https://imgur.com/fVHtts6

Lamecarlate

6 janvier 2019 à 20:39:17

Ok, j'ai dû mal m'exprimer pour les "name". Ensuite, ce n'est pas le plus important ici puisque ton exercice est visuel, mais il faudra y songer pour quand tu feras un formulaire qu'il faudra envoyer et exploiter (par contre, à part pour les name des input radio, et pour l'input "code", je n'ai pas vu de différence…)

Pour le texte : je confirme, la police est différente entre les deux images. Comme tu n'as pas précisé de police dans ton CSS, le navigateur prend celle par défaut (cette police dépend du navigateur et de l'OS). Je suggère de tenter un font-family: sans-serif, mais je ne suis sûre de rien :/

L'indentation : nul besoin de décaler le <ol> par rapport au <legend>, il n'est pas dedans

Pour VISA et Mastercard : tu peux mettre les groupes label/input dans une div et lui donner un padding-left ou un margin-left dans le CSS.

Pas d'aide concernant le code par MP, le forum est là pour ça :)

JohanLt

6 janvier 2019 à 21:20:55

Encore merci j'ai mi l'indentation des <ol> avec <legend > en effet il ne sont pas parents j'espère que l'indentation est correct , j'ai essayer la police sans-serif je trouve que celle qui ce rapproche le plus c'est la inherit ! pour le marging-left ça marche parfait ! j'espère que c'est correct maintenant +7h que je suis dessus lol ça promet ! j'espère que c'est normal au début !

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>Exercice7</title>
        <link rel="stylesheet" href="style.css"/> 
    </head>
    <body>
        <form>
            <fieldset class="haut">
                <legend class="top">Votre Identité</legend>
                <ol>
                    <li>
                        <label for="Nom">Nom :</label>
                        <input type="text" name="nom" placeholder="Nom"/>
                    </li>
                    <li>
                        <label for="Prénom">Prénom :</label>
                        <input type="text" name="Prénom" placeholder="Prénom"/>
                    </li>
                    <li>
                        <label for="Adresse Mail">Adresse Mail :</label>
                        <input type="text" name="Adresse Mail" placeholder="Adresse mail :"/>
                    </li>
                </ol>
            </fieldset>
            <fieldset class="milieu">
                <legend class="middle">Adresse de livraison</legend>
                <ol>
                    <li>
                        <label for="Adresse">Adresse :</label>
                        <textarea rows="5" cols="16"></textarea>
                    </li>
                    <li>
                        <label for="Code Postal">Code postal :</label>
                        <input type="text" name="Code Postal" placeholder="Code postal"/>
                    </li>
                    <li>
                        <label for="Ville">Ville :</label>
                        <input type="text" name="Ville" placeholder="Ville:"/>
                    </li>
                </ol>
            </fieldset>
            <fieldset class="bas">
                <legend class="down">Informations de réglement</legend>
                <ol>
                    <li>
                        <label for="CB">Type de carte bancaire :</label><br>
                        <div class="left">
                            <input id="VISA" name="VISA" type="radio">
                            <label for="VISA" class="side-label">VISA</label><br>
                            <input id="Master" name="Master" type="radio">
                            <label for="Master" class="side-label">Mastercard</label>
                        </div>
                    </li>
                    <li>
                        <label for="numero">Numéro de carte :</label>
                        <input type="text" name="numero" placeholder="Numéro de carte"/>
                     </li>
                     <li>
                        <label for="code">Code de sécurité :</label>
                        <input type="text" name="code" placeholder="Code de sécurité :"/>
                     </li>
                     <li>
                        <label for="nom">Nom du titulaire :</label>
                        <input type="text" name="nom" placeholder="Nom du titulaire :"/>
                     </li>
                </ol>
            </fieldset>
            <input type="button"value="J'achète !"/>
        </form>
    </body>
</html>

CSS :

/* TOP */

body{

    font-family:inherit;

}

.top{

    background-color: #2574a9;

    font-weight: bold;

}

.haut {

    background-color: #2574a9;

    font-weight: bold;

    width: 1300px

}

/* MIDDLE */

.middle{

    background-color: #9A12B3;

    font-weight: bold;

}

.milieu{

    background-color: #9A12B3;

    font-weight: bold;

    width: 1300px

}

.left{

    padding-left: 30px;

}

/* LOWER */

.down {

    background-color: #DB0A5B;

}

.bas {

    background-color: #DB0A5B;

    width: 1300px

}

Merci encore en espérant qu'il y à moin de fautes maintenant !

-
Edité par JohanLt 6 janvier 2019 à 21:24:41

Serkox

6 janvier 2019 à 23:42:56

Je n'avais pas fait attention au ol :x

#Avgeek

Lamecarlate

7 janvier 2019 à 8:17:04

"inherit" n'est pas une police, ça veut simplement dire "prends celle du parent" (et c'est déjà de base, sauf pour les inputs, les textareas et les buttons). "sans-serif" non plus, techniquement, c'est juste une indication au navigateur de prendre la police de type sans serif (l'inverse de serif, donc sans empattements)(la typographie c'est passionnant !). Et d'ailleurs je t'avais dit n'imp, c'est "serif" qu'il aurait fallu mettre, vu qu'il y en a, des empattements, j'avais pas les yeux en face hier.

Le name ne doit pas contenir d'espace, par contre renomme "Code Postal" en "code-postal" par exemple, etc.

Et la textarea n'a pas de name

Et je crois que je me suis gourée dans mes explications (encore… je sors d'un rhume, mon cerveau n'est pas à 100%) : la valeur des for doit correspondre à l'id et non au name… Désolée. Pour résumer : sur un input il faut 1) un id pour pour pouvoir le relier au label, 2) un name pour pouvoir récupérer sa valeur quand on l'enverra.

Dans l'input tout en bas il manque encore une espace.

Mais à part ça c'est bien ! Je t'invite à utiliser régulièrement le validateur du W3C pour le HTML : https://validator.w3.org et pour le CSS : https://jigsaw.w3.org/css-validator/ . Les résultats sont en anglais donc ça ajoute peut-être un peu en difficulté, mais c'est vraiment une bonne source d'infos et de corrections (*la* source : le W3C est l'organisme qui définit le HTML et le CSS).

Pas d'aide concernant le code par MP, le forum est là pour ça :)