Salut,

j'ai un problème avec mon css je sais pas comment mis prendre pour bien disposé les champs et le field

je vous aide je vous donne le code : https://jsfiddle.net/43Lg3u61/3/

mon code html : 

<!-- \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ -->
<!-- POST INFO                       \\\\-->
<div id="blockPost">
	<form method="POST" action="_POST/post-info_post.php" enctype="multipart/form-data">
	<span class="title_Post_Info"><font face="verdana" size="5" >Nouveau post</font></span>
	<br>

	<hr>
	<br>

	<label for="titlePostInfo_label" class="titlePostInfo_label"><font face='verdana' size='2'>Le titre :</font></label><br>
	<span class="titlePostInfo_text"><input  type="text" name="titlePostInfo_text" placeholder="Le titre de votre nouveau post" size="10"></input></span><br><br>


    <label for="message_postInfo_label" class="message_postInfo_label"><font face='verdana' size='2'>Ecrivez votre nouveau post :</font></label><br>
    <textarea class="message_postInfo_textarea" type="text" name="message_postInfo_textarea" id="message_postInfo_textarea" placeholder="Ecriver un text, votre humeur..." autofocus rows="3" cols="24"></textarea><br/><br>


	<label for="img_message_PostInfo_label" class="img_message_PostInfo_label"><font face='verdana' size='2'>Ajouter une photo :</font></label><br>
     <!-- On limite le fichier à 50Ko -->
     <input type="hidden" name="MAX_FILE_SIZE" value="50000">
     <input type="file" name="img_message_PostInfo" class="img_message_PostInfo"><br><br>


     <input type="submit" value="Envoyer" class="inputPostInfo_submit">
	</form>
</div>
<!-- POST INFO                       ////-->
<!-- /////////////////////////////////// -->

mon code css : 

#blockPost
{
	border-radius: 5px;
	background-color: #333333;
	text-align: left;
	color:white;
	opacity:0.9;
	margin-left:420px;
	margin-right:420px;
	padding-left:20px;
	padding-right:20px;
	padding-bottom:20px;
	padding-top:5px;
	width:490px;
}

.post_ok{
	color: #45a049;
}

.post_no{
	color: orange;
}

.title_Post_Info{
	text-align: left
}

.titlePostInfo_label{
	text-align: center;
}

.message_postInfo_label{

}

.message_postInfo_textarea{


}

.img_message_PostInfo_label{

}

.img_message_PostInfo{

}

input[type=text], select {
    width: 50%;
    padding: 2px 2px;
    margin: 2px 0;
    display: inline-block;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
}

ce que j'ai :

ce que je veux : 

merci la miff.

-
Edité par RomainFds. 15 décembre 2017 à 17:03:41

Bonjour,

merci d'éditer ton titre, car 50% des sujets sur le forum HTML/CSS sont des "problèmes CSS"

Autres points :

• évite les <font>, c'est obsolète
• n'utilise pas les <br /> pour faire des espacements, c'est dans le CSS que ça doit se passer
• englobe chaque couple input/label dans un <p> ou une <div>, et tu auras déjà fait un pas vers la solution

Lamecarlate a écrit:

Bonjour,

merci d'éditer ton titre, car 50% des sujets sur le forum HTML/CSS sont des "problèmes CSS"

Autres points :

• évite les <font>, c'est obsolète
• n'utilise pas les <br /> pour faire des espacements, c'est dans le CSS que ça doit se passer
• englobe chaque couple input/label dans un <p> ou une <div>, et tu auras déjà fait un pas vers la solution

---

comment je peut remplacer les br ? un petit tuto ?

je vais voir ça

À lire : https://openclassrooms.com/courses/apprenez-a-creer-votre-site-web-avec-html5-et-css3/le-modele-des-boites

RomainFds. a écrit:

Salut,

j'ai un problème avec mon css je sais pas comment mis prendre pour bien disposé les champs et le field

je vous aide je vous donne le code : https://jsfiddle.net/43Lg3u61/3/

mon code ht...

-----

Utilise des tableaux <td></td>

le cours est ici (clique-moi)

-
Edité par LeChevalierD_Or 16 décembre 2017 à 21:37:08

Non ! 

Utiliser des tableaux pour la structure d'une page HTML c'est obsolète et totalement à bannir au bas mot depuis l'arrivée du HTML5,   c'est à dire depuis plusieurs années déjà... 

LeChevalierD_Or a écrit:

RomainFds. a écrit:

Salut,

j'ai un problème avec mon css je sais pas comment mis prendre pour bien disposé les champs et le field

je vous aide je vous donne le code : https://jsfiddle.net/43Lg3u61/3/

mon code ht...

-----

Utilise des tableaux <td></td>

le cours est ici (clique-moi)

-
Edité par LeChevalierD_Or il y a 30 minutes

-
Edité par Mewen_bzh 16 décembre 2017 à 22:12:27

Tu as totalement FAUX !

Voilà ce qu'on peux faire avec de TD ! 

Je n'ai jamais dit qu'il n'était pas possible d'obtenir de tel rendu, surtout aussi basique, avec une structure en tableau. 

Ce que j'ai dit par contre c'est que cette façon de faire est archaïque,  dépréciée depuis longtemps et ne répond plus à aucune norme. 

Il est beaucoup plus simple et rapide d'utiliser des méthodes modernes comme flexbox par exemple. Ou à la rigueur des méthodes un peu moins récentes mais encore efficaces comme du inline-block ou du float.

Ce forum permet de transmettre les bonnes pratiques ; il faut évoluer, nous ne sommes plus en 1992. 

Je seconde Mewen_bzh : oui, on *peut* faire des mises en page avec des tableaux, non, on ne *doit* pas le faire. C'est comme manger une soupe avec une louche : ça marche, mais ce n'est pas adapté.

Mewen_bzh a écrit:

Non ! 

Utiliser des tableaux pour la structure d'une page HTML c'est obsolète et totalement à bannir au bas mot depuis l'arrivée du HTML5,   c'est à dire depuis plusieurs années déjà... 

Depuis bien avant. Déjà en 1998 avec le html4, c'était considéré comme une mauvaise pratique, et encore plus avec l'arrivée du très strict xhtml en 2001.

RomainFds. a écrit:

Donc les gars, vous me proposez quoi ?

Ben déjà ya pas que des gars ici.

Ensuite, j'ai posté un lien plus haut, tu l'as lu ?

Lamecarlate a écrit:

RomainFds. a écrit:

Donc les gars, vous me proposez quoi ?

Ben déjà ya pas que des gars ici.

Ensuite, j'ai posté un lien plus haut, tu l'as lu ?

-

Désole --'

je vais lire ça.

regarde si tu veux ce que j'ai fait c'est mon résultat final je vais laisser comme ça je pense

j'ai fait avec des div

https://jsfiddle.net/43Lg3u61/10/

-
Edité par RomainFds. 18 décembre 2017 à 11:24:09