Forum |  HardWare.fr | News | Articles | PC | S'identifier | S'inscrire | Shop Recherche
807 connectés 

  FORUM HardWare.fr
  Programmation
  HTML/CSS

  [Resolu] Problème de DIV avec un "padding" et un "display: inline;"

 



 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

[Resolu] Problème de DIV avec un "padding" et un "display: inline;"

n°977942
Dj YeLL
$question = $to_be || !$to_be;
Posté le 10-02-2005 à 19:50:00  profilanswer
 

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

div.celgauche,div.celdroite{
padding: 10px;
display: inline;
}


 
Et mon code HTML avec ça :
 


<div class="cadre">
   <div class="sstitre">Nom d'utilisateur :</div>
   <div class="celgauche"><input type="text" name="username"></div>
   <div class="celdroite">Choisissez un nom d'utilisateur (entre 3 et 20 caractères)</div>
</div>


 
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


Message édité par Dj YeLL le 12-02-2005 à 16:42:12

---------------
Gamertag: CoteBlack YeLL
mood
Publicité
Posté le 10-02-2005 à 19:50:00  profilanswer
 

n°978010
Dj YeLL
$question = $to_be || !$to_be;
Posté le 10-02-2005 à 21:03:16  profilanswer
 

:bounce:


---------------
Gamertag: CoteBlack YeLL
n°978215
Dj YeLL
$question = $to_be || !$to_be;
Posté le 11-02-2005 à 08:33:18  profilanswer
 

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


---------------
Gamertag: CoteBlack YeLL
n°978224
Dj YeLL
$question = $to_be || !$to_be;
Posté le 11-02-2005 à 08:53:46  profilanswer
 

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)


Message édité par Dj YeLL le 12-02-2005 à 16:41:48

---------------
Gamertag: CoteBlack YeLL
n°978234
FlorentG
Unité de Masse
Posté le 11-02-2005 à 09:19:29  profilanswer
 

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 :(


---------------
last.fmflickr
n°978288
Dj YeLL
$question = $to_be || !$to_be;
Posté le 11-02-2005 à 09:54:11  profilanswer
 

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


---------------
Gamertag: CoteBlack YeLL
n°978296
FlorentG
Unité de Masse
Posté le 11-02-2005 à 09:58:25  profilanswer
 

Quelle tronche a ta page exactement ?


---------------
last.fmflickr
n°978302
Dj YeLL
$question = $to_be || !$to_be;
Posté le 11-02-2005 à 10:01:39  profilanswer
 

Euh, pas compris la question :p
 
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 :)
 
++


---------------
Gamertag: CoteBlack YeLL
n°978306
FlorentG
Unité de Masse
Posté le 11-02-2005 à 10:05:27  profilanswer
 

Quelle apparence, j'veux dire quelle mise en page


---------------
last.fmflickr
n°978310
Dj YeLL
$question = $to_be || !$to_be;
Posté le 11-02-2005 à 10:06:53  profilanswer
 

Ben j'ai mis un lien juste au dessus :)


---------------
Gamertag: CoteBlack YeLL
mood
Publicité
Posté le 11-02-2005 à 10:06:53  profilanswer
 

n°978315
FlorentG
Unité de Masse
Posté le 11-02-2005 à 10:11:52  profilanswer
 

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

Code :
  1. <div>
  2.   <label for="username">Nom d'utilisateur :</label>
  3.   <input name="username" id="username" type="text" />
  4.   <p>Choisissez un nom d'utilisateur (entre 3 et 20 caractères)</p>
  5. </div>

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


---------------
last.fmflickr
n°978344
Dj YeLL
$question = $to_be || !$to_be;
Posté le 11-02-2005 à 10:30:25  profilanswer
 

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 :)


---------------
Gamertag: CoteBlack YeLL
n°978372
Dj YeLL
$question = $to_be || !$to_be;
Posté le 11-02-2005 à 10:47:11  profilanswer
 

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é)


---------------
Gamertag: CoteBlack YeLL
n°978375
FlorentG
Unité de Masse
Posté le 11-02-2005 à 10:48:19  profilanswer
 

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 :)


---------------
last.fmflickr
n°978377
FlorentG
Unité de Masse
Posté le 11-02-2005 à 10:48:41  profilanswer
 

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


---------------
last.fmflickr
n°978465
Dj YeLL
$question = $to_be || !$to_be;
Posté le 11-02-2005 à 11:44:26  profilanswer
 

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


---------------
Gamertag: CoteBlack YeLL
n°978470
Dj YeLL
$question = $to_be || !$to_be;
Posté le 11-02-2005 à 11:49:18  profilanswer
 

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)


Message édité par Dj YeLL le 11-02-2005 à 11:50:24

---------------
Gamertag: CoteBlack YeLL
n°978472
FlorentG
Unité de Masse
Posté le 11-02-2005 à 11:50:27  profilanswer
 

Met un display: block; sur tes labels


---------------
last.fmflickr
n°978473
Dj YeLL
$question = $to_be || !$to_be;
Posté le 11-02-2005 à 11:51:32  profilanswer
 

FlorentG a écrit :

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 ! :)


---------------
Gamertag: CoteBlack YeLL
n°978569
Dj YeLL
$question = $to_be || !$to_be;
Posté le 11-02-2005 à 13:19:05  profilanswer
 

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

Code :
  1. <h1>Mon titre</h1>
  2. <label class="sstitre">Libellé :</label>
  3. <div class="contenu">
  4. <input class="text" type="text" name="username">
  5. <span class="droite">(Les infos correspondantes)</span>
  6. </div>


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


---------------
Gamertag: CoteBlack YeLL
n°978621
FlorentG
Unité de Masse
Posté le 11-02-2005 à 13:48:48  profilanswer
 

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

Code :
  1. <label for="id_de_input">pouet</label>
  2. <input name="truc" id="id_de_input" type="machin" />


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


---------------
last.fmflickr
n°978622
FlorentG
Unité de Masse
Posté le 11-02-2005 à 13:49:36  profilanswer
 

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

Code :
  1. p {
  2.   display: inline;
  3. ]


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


---------------
last.fmflickr
n°978644
Dj YeLL
$question = $to_be || !$to_be;
Posté le 11-02-2005 à 14:01:27  profilanswer
 

Ok ok, ça devient bon :D
 
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'


---------------
Gamertag: CoteBlack YeLL
n°978648
FlorentG
Unité de Masse
Posté le 11-02-2005 à 14:02:39  profilanswer
 

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


---------------
last.fmflickr
n°978793
Dj YeLL
$question = $to_be || !$to_be;
Posté le 11-02-2005 à 15:22:04  profilanswer
 

A vos ordres chef ...


---------------
Gamertag: CoteBlack YeLL
mood
Publicité
Posté le   profilanswer
 


Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  HTML/CSS

  [Resolu] Problème de DIV avec un "padding" et un "display: inline;"

 

Sujets relatifs
[PERL] Probleme avec LWP et UserAgent dans PurePerlInsertion "propre" d'objet virtools [RESOLU]
Excel : problème de sauvegarde de formulaireproblème avec wxScrolledWindow
[java-eclipse]Problème de sauvegarde sous eclipseRule access probleme
probleme de classement d une requete[PHP] Problème avec une boucle (RESOLU)
Probleme sur IHM !!! 
Plus de sujets relatifs à : [Resolu] Problème de DIV avec un "padding" et un "display: inline;"


Copyright © 1997-2018 Hardware.fr SARL (Signaler un contenu illicite / Données personnelles) / Groupe LDLC / Shop HFR