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

  FORUM HardWare.fr
  Programmation
  HTML/CSS

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

 



 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

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

n°2010973
toum_toum
Vivons masqués
Posté le 22-07-2010 à 12:44:00  profilanswer
 

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


 
 
 
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>
  8. <body>
  9. <div id="conteneur">
  10. <br />
  11. <div id="bloc03a" class="centrage">Titre1</div>
  12. <div id="bloc03b" class="centrage">Titre2</div><br class="clearfloat" />
  13. <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 />
  14. Réalisation de tableaux, graphiques…</div>
  15. <div id="bloc04b">Saisie devis, bon de commande, facture… <br />
  16. Relance clients/fournisseurs.<br />
  17. Recouvrement de créances. <br />
  18. Création et mise à jour de base de données.</div><br class="clearfloat" /><br />
  19. <div id="bloc03a" class="centrage">Titre3</div>
  20. <div id="bloc03b" class="centrage">Titre4</div><br class="clearfloat" />
  21. <div id="bloc04a">Saisie d’écriture comptable, tenue d’échéancier clients/fournisseurs.<br />
  22. (* avec l’aval et sous la responsabilité de votre comptable)</div>
  23. <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 />
  24. Création graphique (cartes de visite, d’invitation, flyers, logos…)</div><br class="clearfloat" /><br />
  25. <div id="bloc03a" class="centrage">Titre5</div><br class="clearfloat" />
  26. <div id="bloc04a">Organisation de vacances. <br />
  27. Initiation à l’informatique, à Internet. <br />
  28. Utiliser sa messagerie électronique, un traitement de texte,...</div>
  29. <br class="clearfloat" /><br /><br />
  30.  
  31. <!-- fin de #conteneur --></div>
  32. </body>
  33. </html>


 
 
 
Merci de votre éclairage.


Message édité par toum_toum le 27-07-2010 à 12:38:59
mood
Publicité
Posté le 22-07-2010 à 12:44:00  profilanswer
 

n°2011014
Dj YeLL
$question = $to_be || !$to_be;
Posté le 22-07-2010 à 14:30:19  profilanswer
 

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
n°2011015
toum_toum
Vivons masqués
Posté le 22-07-2010 à 14:35:38  profilanswer
 

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
n°2011020
Dj YeLL
$question = $to_be || !$to_be;
Posté le 22-07-2010 à 14:45:55  profilanswer
 

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


---------------
Gamertag: CoteBlack YeLL
n°2011022
David Bori​ng
Posté le 22-07-2010 à 14:47:47  profilanswer
 

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

n°2011067
toum_toum
Vivons masqués
Posté le 22-07-2010 à 16:11:39  profilanswer
 

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 ?

n°2011111
Dj YeLL
$question = $to_be || !$to_be;
Posté le 22-07-2010 à 17:34:24  profilanswer
 

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
n°2011140
toum_toum
Vivons masqués
Posté le 22-07-2010 à 18:40:47  profilanswer
 

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:

n°2011184
toum_toum
Vivons masqués
Posté le 22-07-2010 à 23:06:10  profilanswer
 


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
n°2011192
David Bori​ng
Posté le 23-07-2010 à 00:08:35  profilanswer
 

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
 
 

mood
Publicité
Posté le 23-07-2010 à 00:08:35  profilanswer
 

n°2011193
toum_toum
Vivons masqués
Posté le 23-07-2010 à 00:14:12  profilanswer
 

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
n°2011216
gatsu35
Blablaté par Harko
Posté le 23-07-2010 à 08:41:43  profilanswer
 

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
n°2011392
toum_toum
Vivons masqués
Posté le 23-07-2010 à 16:27:46  profilanswer
 

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
n°2011456
David Bori​ng
Posté le 23-07-2010 à 23:56:45  profilanswer
 

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.

n°2012098
toum_toum
Vivons masqués
Posté le 27-07-2010 à 12:38:40  profilanswer
 

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/
 
 


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

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

 

Sujets relatifs
[Resolu] Problème formulaire envoi mail[Résolu][Batch] Comparaison chaines de caractères
URL Rewriting - Besoin de conseil pour mise en placeBug d'affichage incompréhensible : Espace vide sans raison ?
Comment intégrer mon calendrier Week Calendar dans une page ?[RESOLU] [Plugin] Ajouter patch à un plugin
Effet de page qui tourne dans un environnement 3Dutilisation de script js plusieurs fois dans une même page
[Oracle]Mise à jour de clé étrangère aléatoire[Resolu]Site mal aligné
Plus de sujets relatifs à : [Resolu] Bug avec éléments flottants sur mise en page


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