Bonsoir tout le monde,
 
J'ai une feuille de style avec ça dedans (entre autre) :
 

 
Et mon code HTML avec ça :
 

 
Le problème est que sur mes 2 divs celgauche et celdroite, le padding est pris en compte uniquement à droite et à gauche ... il n'y a aucun espacement au dessus et en dessous.
 
Savez-vous comment résoudre ce problème ? En supprimant le "display: inline;" de ma CSS, le padding est bien pris en compte des 4 côtés.
 
Merci par avance

Personne ne peut m'expliquer pourquoi j'ai pas mon padding en haut et en bas de mon cadre ?

Bon j'ai fais plusieurs test, le problème est présent sous IE et Firefox.
 
Allez voir ici :
 
(edit : le lien n'est plus d'actualité)
 
Et séléctionnez le texte en italique (il fait partie d'un DIV avec padding)
 
Lors de la selection on voit bien que le "padding" est présent ... mais pourtant pas pris en compte (on ne voit cet effet que sous IE)

C'est normal : les éléments de type inline ne peuvent pas avoir de padding vertical, ni de margin vertical, ni de dimensions fixées (width et height sont inopérants).
 
Le seul moyen, serait d'utiliser display: inline-block;, qui permet d'avoir un élément de type block (donc avec toute ses propriétés définissables), mais qui se comporte après comme un élément inline.
 
Par contre, il faut savoir que :

• IE ne gère le inline-block que sur les <span> et les <a>
• FF ne gère pas du tout
• Seul Opéra le gère

Donc dans ton cas, il n'y a rien à faire Tu peux par contre essayer line-height pour donner un pseudo-padding

Je sens que je vais passer mes DIV en Table moi ...

Quelle tronche a ta page exactement ?

Euh, pas compris la question
 
Bon en fait c'est pas grave, j'ai reglé le problème en remplaçant mes 2 <div> côte à côte par 2 <span> côte à côte, le tout dans 1 seul <div> avec mon padding
 
++

Quelle apparence, j'veux dire quelle mise en page

Ben j'ai mis un lien juste au dessus

Suis-je bête
Tu as l'air de souffrir de divite aigüe
 
Remplace le <div class="titre"> par <h1>, et les class="sstitres" par des labels :

 
Aussi, pas besoin d'encapsuler le <input> dans un <span>, tu peux appliquer le style directement à ton input

Je souffre à moitié de Divite aigüe en effet
 
Mais en fait je ne comprends pas l'interet de remplacer un <div class="toto"> par un <label for="toto">
 
Idem pour le <span class="droite"> à remplacer par un <p class="droite"> ...
 
Merci

Bon ben je viens de tester en remplacant mon <div class="titre"> par un <h1> ayant exactement les même paramètres ... et je n'obtiens pas le même resultat
 
J'ai 2 grosses bandes blanches, une au dessus et une en dessous (entre le bord de mon cadre et le texte avec fond coloré)

Parce que pour l'intitulé d'un champ, il faut utiliser un <label>, c'est la balise sémantique prévue pour. Pour le <p> on peut débattre, je dirait juste que c'est un bout de texte accompagnant le champ

Pour le <h1>, y'a du margin et du padding par défaut qu'il faut enlever

Bon OK pour le <h1> c'est fait,
 
par contre je n'arrive pas définir de CSS pour le <label> ça marche comment ?
 
Merci

Bon en fait si, j'avais oublié le class=""
 
Par contre le résultat obtenu n'est pas du tout ce que je veux.
 
Voir le résultat sur la page plus haut.
 
Merci
 
Edit : je pense que le <label> serait mieux pour la description du champs, en italique à droite, et d'utiliser un <div> pour mes "sous-titre" (si on peut appeler ça comme ça)

Met un display: block; sur tes labels

 
Fabuleux, j'en apprends tous les jours!
 
Et moi qui croyait savoir maitriser les CSS ... j'ai du chemin à faire
 
Merci bcp !

Bon, voici donc au final la solution adoptée :
 

 
J'ai quand même utilisé un <span> plutôt qu'un <p>, le <p> me faisant retourner à la ligne.
 
Merci
 
++

Par contre, corrige ceci : tes label ne sont pas explicitement associé avec tes input.
Faut faire comme ça :

Il faut donc l'attribut for qui sera égal à l'id de l'input correspondant

Et pour que le <p> n'aille pas à la ligne, met dans ton css :

C'est un truc important, de savoir les différents types d'affichages : inline, block, etc.

Ok ok, ça devient bon
 
Sinon, je fais exprès de ne pas attribuer le for="" à mes labels. Sinon quand on clique sur le <label>, ça a le même effet qua lorsque l'on clique sur le <input> lui-même.
 
Alos bo, c'est pas spécialement très grave pour les <input> 'text', mais pour le <input> submit c'est déjà plus embêtant.
 
Je pense que le for="" est surtout utile pour les <input> 'radio' ou 'checkbox'

Pour le <input type="submit" />, pas besoin de label. D'ailleurs, je virerais le "Valider le formulaire". Met juste le bouton, ça suffit

A vos ordres chef ...