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

  FORUM HardWare.fr
  Programmation
  HTML/CSS

  [HTML / CSS] Un cadre contenant deux blocs

 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

[HTML / CSS] Un cadre contenant deux blocs

n°1181257
Arjuna
Aircraft Ident.: F-MBSD
Posté le 22-08-2005 à 14:26:13  profilanswer
 

Salut,
 
Dans ma page, je dois afficher un cadre bleu, et dans ce cadre, deux éléments de texte : l'un alligné à gauche, et l'autre à droite.
 
J'ai donc fait ça :
 

Code :
  1. <div class="critereRechercheCentre">
  2.    <div class="innerGauche">Blabla gauche</div>
  3.    <div class="innerDroite">Blabla droite</div>
  4.   </div>


 
Et le style :
 

Code :
  1. .critereRechercheCentre
  2. {
  3. border: 1px solid #9EB7DF;
  4. background-color: #EAF1FB;
  5. font-weight: bold;
  6. padding-left: 7px;
  7. padding-right: 7px;
  8. padding-top: 4px;
  9. padding-bottom: 9px;
  10. width: auto;
  11. display: block;
  12. margin-top: 22px;
  13. clear: both;
  14. }
  15. .critereRechercheCentre.innerGauche
  16. {
  17. text-align: left;
  18. width: 48%;
  19. clear: both;
  20. float: left;
  21. display: block;
  22. }
  23. .critereRechercheCentre.innerDroite
  24. {
  25. text-align: right;
  26. width: 48%;
  27. clear: both;
  28. float: right;
  29. display: block;
  30. }


 
Ca "marche", sauf que mes deux bloques de texte dépassent du cadre, qui ne grandit pas avec le reste... Comment corriger ça ?
 
J'ai remplacé par des <span> et des <p>, mais rien ne change, ça déconne toujours :/
 
Merci de me dire comment faire... :/
 
Tests pour le moment avec IE 6 SP2 mais ça doit marcher aussi sous FF

mood
Publicité
Posté le 22-08-2005 à 14:26:13  profilanswer
 

n°1181339
Huitzilopo​c
Posté le 22-08-2005 à 15:58:08  profilanswer
 

Salut à toi,  
 
Il y a un peu de répétition dans ton code :

  • display: block ; est inutile car les "div" sont déjà des éléments de type en bloc.
  • seul un float est nécéssaire dans ce cas là. (deux sont nécéssaires par exemple lors de 3 colonnes et plus, pas 2).  
  • les clear: both ; sont inutiles (peut-être les utiliser, si jamais t'as besoin, en cas de rajout en dessous de ces deux cadres). De plus ce n'est pas comme ça que la propriété s'utilise.
  • sinon tu n'es pas obligé de mettre ".critereRechercheCentre." devant tes ".innerDroite" et "innerGauche". d'ailleurs tu as oublié le ">".  


Voilà qui est un peu plus propre. Je suis pas sûr à 100% mais j'ai test& sous IE et FF.

Code :
  1. .critereRechercheCentre
  2. {
  3. border: 1px solid #9EB7DF;
  4. background-color: #EAF1FB;
  5. font-weight: bold;
  6. padding: 4px 7px 9px 7px ;
  7. margin-top: 22px;
  8. }
  9. .innerGauche
  10. {
  11. text-align: left;
  12. float: left;
  13. width: 48% ;
  14. }
  15. .innerDroite
  16. {
  17. text-align: right;
  18. }


 
ceci est une bonne adresse pour comprendre les "float" : http://www.openweb.eu.org/articles/initiation_float/
a+ !


Message édité par Huitzilopoc le 22-08-2005 à 16:01:00

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

  [HTML / CSS] Un cadre contenant deux blocs

 

Sujets relatifs
[CSS] cellule de tableau...probleme de flux rss . Les site en html peuvent pas l'afficher
actvé un exe a partir d'une page html en local [reglé][CSS] Mise en page
Ouvrir un dossier depuis une page htmlAfficher le formulaire suivant en CSS (sans tableaux)
[CSS] Impossible de fixer la tailleLes tableau en HTML et Incrementation au format temps
Positionnement <SPAN> en CSS via JavaScriptproblème html bloquer textarea !!
Plus de sujets relatifs à : [HTML / CSS] Un cadre contenant deux blocs


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