[Resolu] Bug avec éléments flottants sur mise en page

Bug avec éléments flottants sur mise en page [Resolu] - HTML/CSS - Programmation

Marsh Posté le 22-07-2010 à 12:44:00    

Salut à vous.
 
 
 
J'ai un bug pour une mise en page de zones de textes, qui contient de nombreux éléments flottants.
 
 
J'ai fait une page allégée, et ça passe. Voici le résultat voulu :
http://nsa17.casimages.com/img/2010/07/22/100722123044638421.jpg
 
 
 
 
Or, dans ma "page complexe", cela rend différemment :  
 
J'ai un bug qui apparaît sous la première ligne de titres. Un décalage immense vers le bas :
http://nsa16.casimages.com/img/2010/07/22/100722123048161703.jpg
 
 
En dessous de ce "décalage", curieusement, aucun soucis :
http://nsa17.casimages.com/img/2010/07/22/100722123525875738.jpg
 
 
 
Ma question :  je pense que ma méthode n'est pas bonne concernant mes données float right / float left / classe "clearfloat"
 
 
Voici la manière dont je m'y suis pris. (Je mets la version allégée, espérant qu'au niveau de la méthode c'est déjà déficient)
 
#bloc03a : titre colonne de gauche
#bloc03b : titre colonne de droite
#bloc04a : texte  colonne de gauche
#bloc04b : texte  colonne de droite
.clearfloat : classe qui permet d'annuler le flottement du précédent élément
 
 
CSS :
 

Code :
  1. @charset "utf-8";
  3. body  {
  4. font: 15px Arial, Helvetica, sans-serif;
  5. background-image:url(../images/fond_01.gif);
  6. background-repeat:repeat;
  7. margin: 0;
  8. padding: 0;
  9. text-align: center;
  10. color: #333333;
  11. }
  13. #conteneur {
  14. position:relative;
  15. background-color:#BEA4C1;
  16. width: 650px;
  17. margin: 0px auto 0px auto;
  18. top: 20px;
  19. text-align: left;
  20. padding: 20px 35px 20px 35px;
  21. }
  24. #bloc03a {
  25. float:left;
  26. width: 270px;
  27. color:#000;
  28. background-color: #954394;
  29. font-size:1.40em;
  30. padding: 5px 10px 5px 10px;
  31. }
  34. #bloc03b {
  35. float:right;
  36. width: 270px;
  37. color:#000;
  38. background-color: #954394;
  39. font-size:1.40em;
  40. padding: 5px 10px 5px 10px;
  42. }
  44. #bloc04a {
  45. float:left;
  46. width: 270px;
  47. background-color: #FFF;
  48. font-size:0.90em;
  49. padding: 10px;
  50. }
  53. #bloc04b {
  54. float:right;
  55. width: 270px;
  56. background-color: #FFF;
  57. font-size:0.90em;
  58. padding: 10px;
  59. }
  61. .clearfloat { /* élément final avant la balise de fin d'un conteneur qui doit contenir entièrement un élément flottant */
  62.     clear:both;
  63.     height:0;
  64.     font-size: 1px;
  65.     line-height: 0px;
  66. }
  68. .centrage {
  69.   text-align: center;
  70. }


 
 
 
HTML :
 

Code :
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>Document sans nom</title>
  6. <link href="./styles/stylebug_04.css" rel="stylesheet" type="text/css" />
  7. </head>
  9. <body>
  11. <div id="conteneur">
  12. <br />
  14. <div id="bloc03a" class="centrage">Titre1</div>
  15. <div id="bloc03b" class="centrage">Titre2</div><br class="clearfloat" />
  16. <div id="bloc04a">Saisie simple ou avec mise en page, relecture et correction de tous vos documents professionnels : courriers, rapports, comptes-rendus de réunions, contrats, notes diverses… <br />
  17. Réalisation de tableaux, graphiques…</div>
  18. <div id="bloc04b">Saisie devis, bon de commande, facture… <br />
  19. Relance clients/fournisseurs.<br />
  20. Recouvrement de créances. <br />
  21. Création et mise à jour de base de données.</div><br class="clearfloat" /><br />
  23. <div id="bloc03a" class="centrage">Titre3</div>
  24. <div id="bloc03b" class="centrage">Titre4</div><br class="clearfloat" />
  25. <div id="bloc04a">Saisie d’écriture comptable, tenue d’échéancier clients/fournisseurs.<br />
  26. (* avec l’aval et sous la responsabilité de votre comptable)</div>
  27. <div id="bloc04b">Retranscription de fichier audio, permanence téléphonique, prise de rdv, tenue d’agenda, envoi/réception de mails, présentation de diaporama, organisation de réunions, déplacements, séminaires… <br />
  28. Création graphique (cartes de visite, d’invitation, flyers, logos…)</div><br class="clearfloat" /><br />
  30. <div id="bloc03a" class="centrage">Titre5</div><br class="clearfloat" />
  31. <div id="bloc04a">Organisation de vacances. <br />
  32. Initiation à l’informatique, à Internet. <br />
  33. Utiliser sa messagerie électronique, un traitement de texte,...</div>
  34. <br class="clearfloat" /><br /><br />
  35.  
  36. <!-- fin de #conteneur --></div>
  38. </body>
  39. </html>


 
 
 
Merci de votre éclairage.


Message édité par toum_toum le 27-07-2010 à 12:38:59

---------------
“Et maintenant, la météo" - Soloviev 2022-2024
Reply

Marsh Posté le 22-07-2010 à 12:44:00   

Reply

Marsh Posté le 22-07-2010 à 14:30:19    

Pourquoi tu ne fais pas:

Code :
  1. <div>
  2.     <h3>Titre</h3>
  3.     <p>Bla bla bla</p>
  4.     <p>Bla bla bla</p>
  5. </div>
 

Avec ces DIV en float left ?


Message édité par Dj YeLL le 22-07-2010 à 14:30:29

---------------
Gamertag: CoteBlack YeLL
Reply

Marsh Posté le 22-07-2010 à 14:35:38    

Ja préféré créer mes "blocs" car j'ai déjà pas mal de titres à coté, en plus (ou je vais en avoir... :o )
 
De toutes façons ça ne me sert à rien d'avoir juste les titres à gauche ou à droite. Il me faut aussi les textes qui viennent dessous (et avec des fonds/espaces colorés)
 
D'où mes créations de "blocs" (même si le terme de bloc n'est pas bien adapté en effet)


Message édité par toum_toum le 22-07-2010 à 14:35:59

---------------
“Et maintenant, la météo" - Soloviev 2022-2024
Reply

Marsh Posté le 22-07-2010 à 14:45:55    

Euh ... dans ce que je te propose, les blocs, ce sont les DIV ... qui regroupent donc Titre + Contenu

Message cité 1 fois

---------------
Gamertag: CoteBlack YeLL
Reply

Marsh Posté le 22-07-2010 à 14:47:47    

Non franchement, tu ne peux garder un tel html.
Ton site sans style ne ressemble à RIEN.
Suis le conseil de Dj YeLL

Reply

Marsh Posté le 22-07-2010 à 16:11:39    

Dj YeLL a écrit :

Euh ... dans ce que je te propose, les blocs, ce sont les DIV ... qui regroupent donc Titre + Contenu


Ok je regarde ça alors. :o  
 
Comment je fais pour avoir un fond coloré, différent, pour les titres et pour les textes ?

Message cité 1 fois

---------------
“Et maintenant, la météo" - Soloviev 2022-2024
Reply

Marsh Posté le 22-07-2010 à 17:34:24    

toum_toum a écrit :


Ok je regarde ça alors. :o  
 
Comment je fais pour avoir un fond coloré, différent, pour les titres et pour les textes ?


 
S't'une blague ?  [:wam]


---------------
Gamertag: CoteBlack YeLL
Reply

Marsh Posté le 22-07-2010 à 18:40:47    

Héhé désolé  [:aurelie22]  
 
Bon en tous cas merci.  
En effet c'est 100 fois plus simple avec cette méthode. Me suis empêtré avec mes blocs, alors que...
 
 :jap:


---------------
“Et maintenant, la météo" - Soloviev 2022-2024
Reply

Marsh Posté le 22-07-2010 à 23:06:10    


Vous me conseilleriez quoi pour que mes paddings , sur mes nouvelles DIV, et destinées à recentrer un peu mes textes-contenus, n'affectent pas les titres <h> (ou autres) qui sont insérés dedans ces DIV (et au dessus de ces textes-contenus) ?
 
 
http://nsa16.casimages.com/img/2010/07/22/100722111423106860.gif
 
 
Edit : bon je me suis debrouillé en créant une nouvelle DIV (avec des propriétés de padding), que je déclare dans mon CSS après celle du titre.
Ca alourdit un peu mais pour le moment je ne vois pas d'autre solution...


Message édité par toum_toum le 23-07-2010 à 00:04:29

---------------
“Et maintenant, la météo" - Soloviev 2022-2024
Reply

Marsh Posté le 23-07-2010 à 00:08:35    

Code :
  1. <div>
  2.     <h3>Titre</h3>
  3.     <div class="bd">
  4.       <p>Bla bla bla</p>
  5.       <xx>Bla bla bla</xx>
  6.     </div>
  7. </div>


Code :
  1. .bd {padding:10px}


Si tu veux regarder des beaux modules, jette un coup d'oeil sur oocss
http://oocss.org/module.html
 
 

Reply

Marsh Posté le 23-07-2010 à 00:08:35   

Reply

Marsh Posté le 23-07-2010 à 00:14:12    

Merci pour le lien, en effet ça m'intéresse... :)
 
 
PS : une question.  Il est préférable (de manière générale) de créer une classe, plutôt qu'une nouvelle id (dans la page CSS) ?


Message édité par toum_toum le 23-07-2010 à 00:19:04

---------------
“Et maintenant, la météo" - Soloviev 2022-2024
Reply

Marsh Posté le 23-07-2010 à 08:41:43    

Ton décalage est à cause de la nav de gauche, tu ne montre qu'un bout du bordel donc on pourra pas t'aider la dessus. Mais je suis sur à 100% que ton conteneur, commence tout à gauche de ta page, au lieu d'être calé normalement à partir de la droite de la nav qui est en float:left.
C'est un comportement normal des flottant. Pour résoudre ce petit soucis, tu appliques un contexte de formatage sur ton conteneur et ton problème sera réglé.
.conteneur {overflow:hidden; zoom:1}


---------------
Blablaté par Harko
Reply

Marsh Posté le 23-07-2010 à 16:27:46    

Non le problème (toujours en cours) n'est pas celui-là :
 
 
En fait j'ai environ 600 pixels de large dans mon contenant.
Dans celui-ci je mets des séries de 2 blocs flottants (à gauche), faisant chacun 270 pixels de large.
 
Donc il se mettent 2 à 2 cote à cote. Pour ça pas de soucis.
 
 
Mais le probleme intervient dès lors que le 2nd du "couple" est plus court (= moins de texte) que le premier.
Dès lors le bloc suivant vient se coller en dessous (au lieu d'aller à la ligne).
 
 
Pour contrer ça j'avais créé (récupéré qq part il y a qq semaines) la Div "clearfloat"  
 

Code :
  1. .clearfloat { /* élément final avant la balise de fin d'un conteneur qui doit contenir entièrement un élément flottant */
  2.     clear:both;
  3.     height:0;
  4.     font-size: 1px;
  5.     line-height: 0px;
  6. }


 
 
Mais je pense qu'elle buggue ...
-------------------------------------------------------------------
 
 
J'ai 6 blocs : 1, 2 , 3, 4 , 5 et 6
 
 
Ils semettent comme ça :  
 
  1   2
 
  3   4
 
  5   6
 
 
Mais si 1 est plus "long" que 2 (du fait de plus de texte à l'intérieur), ça devient :
 
 
  1   2
 
      3    
   
  4  5  
 
  6
 
 
D'où la ligne "clearfloat", mais qui ne fonctionne pas bien.


Message édité par toum_toum le 23-07-2010 à 16:29:27

---------------
“Et maintenant, la météo" - Soloviev 2022-2024
Reply

Marsh Posté le 23-07-2010 à 23:56:45    

Regardes le code de oocss.
Tes lignes peuvent être

Code :
  1. <div class="line"> 1 2 </div>
  2. <div class="line"> 3 4 </div>
  3. <div class="line"> 5 6 </div>


Code :
  1. .line {overflow:hidden;zoom:1}


 
C'est du web pas du print. Le texte ne coule pas en dessous. OK, tu aura du blanc, mais ce n'est pas grave.
Franchement c'est même plus lisible.

Reply

Marsh Posté le 27-07-2010 à 12:38:40    

Salut.
 
Un peu en retard, desolé. Merci, c'est impecc'.
 
J'avais mal compris la propriété overflow, utilisée dans ce cas.
 
Un lien intéressant sur le sujet :
http://css4design.developpez.com/t [...] -partie-2/
 
 


---------------
“Et maintenant, la météo" - Soloviev 2022-2024
Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed