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

  FORUM HardWare.fr
  Programmation
  HTML/CSS

  Problème de positionnement

 



 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

Problème de positionnement

n°2090406
aideinfo
Posté le 20-07-2011 à 15:19:06  profilanswer
 

Bonjour,
J'ai un problème pour positionner correctement des DIV. voici ce que j'aimerais faire.
 
http://dl.free.fr/qWmDgjHoL
 
Le conteneur 4 est je pense nécessaire pour que le 3 reste sous les 1 et 2 (il y a un peu de texte au-dessus du 3, je veux qu'il reste aussi sous les 1 et 2.
 

Code :
  1. #cadre1 {
  2. border: solid 1px #336699;
  3. background-color: #F5F8FC;
  4. width: 47%;
  5. display: block;
  6. float: left;
  7. padding: 5px;
  8. margin-left: 10px;
  9. margin-right: 5px;
  10. }
  11. #cadre2{
  12. border: solid 1px #336699;
  13. background-color: #F5F8FC;
  14. width: 47%;
  15. position: absolute;
  16. float: right;
  17. display: block;
  18. padding: 5px;
  19. margin-left: 5px;
  20. margin-right: 10px;
  21. }
  22. #cadre3 {
  23. border: 1px solid #8BAFE5;
  24. width: 95%;
  25. display: block;
  26. font-family: Courier;
  27. font-size: 14px;
  28. padding: 10px;
  29. color: #008000;
  30. }
  31. #cadre4 {
  32. display: block;
  33. border: 1px dotted red;
  34. }


---------------
http://www.aideinfo.com/  Whois adresses IP/domaines le plus évolué !!  FAQ Free Mobile
mood
Publicité
Posté le 20-07-2011 à 15:19:06  profilanswer
 

n°2090446
fred777888​999
Posté le 20-07-2011 à 17:53:28  profilanswer
 

Les floats ce n'est pas du tout fait pour ca. Normal que tu ais des problemes. Utilise plutot des position absolute top/left/right/bottom.

n°2090530
gatsu35
Blablaté par Harko
Posté le 21-07-2011 à 07:55:04  profilanswer
 

Les floats c'est JUSTEMENT fait pour ça, les position absolute t'obligent à avoir des contenus statics


---------------
Blablaté par Harko
n°2090560
fred777888​999
Posté le 21-07-2011 à 10:13:30  profilanswer
 

Les floats sont faits pour positionner les blocs a l'interieur de flux inline.  
Dans ce cas, ca modifie les flux et ton contenant ne sera jamais correctement dimensionne avec un contenu dynamique qui n'est pas dans le meme flux.
Utiliser float pour un modele 'boite' comme celui en lien, c'est a peu pres la meme chose que d'utiliser 5000000 divs au lieu d'un table pour afficher une matrice.

n°2090567
gatsu35
Blablaté par Harko
Posté le 21-07-2011 à 10:40:56  profilanswer
 

ho putain, toi tu n'as rien compris aux css :/
A part pour la notion des flux, mais pour le reste, tu n'a rien pigé.
Je t'invite à reprendre les bases ou venir postuler dans ma boite tu comprendras la puissant des floats
Tiens et sinon pour te faire comprendre, voici un exemple :
http://jsfiddle.net/AJmT8/2/


Message édité par gatsu35 le 21-07-2011 à 10:52:41

---------------
Blablaté par Harko
n°2090574
fred777888​999
Posté le 21-07-2011 à 10:59:49  profilanswer
 

Ca fait plaisir d'avoir des commentaires qui disent que je n'ai rien compris de la part d'un gars qui :
1- ne propose pas de solution
2- fout visiblement des float n'importe ou parcequ'il n'as rien compris a leur utilite a la base.
Donc, ton lien va aller droit dans ma poubelle direct, ne te trompe pas, ca fait VRAIMENT plaisir de ne pas penser comme ca :)
 
Pour le reste, @aideinfo.
Un exemple de ce que tu peux faire en changeant les flux, ceci ne fonctionne qu'avec ie :

Code :
  1. <html>
  2. <head>
  3. <style>
  4. #1 { border : solid 5px red; width: 50%; display: inline; vertical-align: top;}
  5. #2 { border : solid 5px blue; width: 50%; clear:both; display: inline; vertical-align: top;}
  6. #3 { border : solid 5px green;}
  7. #4 { border : solid 5px yellow;}
  8. </style>
  9. </head>
  10. <body>
  11. <div id="4">
  12.  <div id="1">
  13.   Du contenu, du contenu, du contenu. Il faut bien en mettre un peu pour pouvoir tester a peu pres correctement le truc.
  14.  </div>
  15.  <div id="2">
  16. Ceci est le merveilleux div 2.
  17.  </div>
  18. </div>
  19. <div id="3">
  20.   Et voici le contenu du div 3.
  21. </div>
  22. </body>
  23. </html>


Et le meme effet avec les vrais navigateurs.

Code :
  1. <style type="text/css">
  2. #div1 { border : solid 5px red; width: 45%; display:inline-block; vertical-align:top;}
  3. #div2 { border : solid 5px blue; width: 50%; display:inline-block; vertical-align:top; clear:both;}
  4. #div3 { border : solid 5px green;}
  5. #div4 { border : solid 5px yellow;}
  6. #div5 { display:table;}
  7. </style>


Et les float, tu oublie. Ca n'est pas utilisable dans un modele a boite point. Si tu veux les utiliser, oublie les designs a boite.

n°2090589
gatsu35
Blablaté par Harko
Posté le 21-07-2011 à 11:37:31  profilanswer
 

- display:inline-block ne marche pas sur les éléments de type inline sous IE6
le probleme de inline-block, c'est que tu te retrouves avec des espaces qui sont liés au retrour chariot ou un espace dans le HTML. Cet espace dépendra du font-size de l'élément parent. Du coup tu te retrouves avec un espace que tu ne peux pas gérer facilement.
- mettre un display:inline sur un div c'est joli, mais quand tu auras des éléments de type bloc dedans tu l'auras dans le cul.
- display:table n'existe ni sous IE7 ni ie6.
- un id ne doit jamais commencer par un chiffre.  
 
Maintenant tu vas m'expliquer :  
- en QUOI les floats ne sont pas utilisables dans ce contexte là. C'est justement dans ce contexte qu'ils sont idéaux.  
- en quoi mon exemple qui utilise le contexte de formatage est à chier ?  
Je float mon #cadre2, ensuite #cadre3 par défaut va débuter à gauche de cadre 2 si je ne lui applique pas de contexte de formatage.
Le contexte de formatage est aussi utilisé pour contenir les éléments flottant qui sortent du flux.
- Regarde comment sont fait tous les frameworks de grids
- Tu dis que j'utilises 36 floats dans mon exemple alors qu'il n'y en a QU'UN SEUL.


---------------
Blablaté par Harko
n°2090624
fred777888​999
Posté le 21-07-2011 à 13:50:31  profilanswer
 

Les floats taillent les contenants a partir des elements dans le meme flux.
Si tu avais pris la peine de telecharger l'exemple du gars avant tu saurais donc pourquoi ils ne sont pas utilisables dans ce cas sauf a fixer des hauteurs pour les contenus. Enfin, si et seulement si tu as compris qq chose au fonctionnement des floats et des flux, dans le cas contraire je perd mon temps et t'invite a chercher sur google ce qu'est un flux.
 
Quand a la compatibilité d'un code exemple avec netscape 2 sous mac je m'en balance et la numerotation des divs, je m'en fiche aussi completement. Si tu veux continuer a couper les cheveux en 4 tu peux aussi t'amuser a commenter le fait que je n'ai mis ni meta, ni <? ni type dans mon premier exemple, ca aussi je m'en fous completement.
 
De quoi sont fait tous les framework grid... Tu en connais un rayon pour tout savoir sur tous les frameworks. Le seul probleme c'est que c'est une grosse connerie, il en existe de nombreux a base de table et surement pas de div float (jquery, jqgrid par exemple).
 
Dans ton exemple, saisis suffisament de texte juste dans un des deux cadres et admire le massacre.


Message édité par fred777888999 le 21-07-2011 à 13:54:31
n°2090626
gatsu35
Blablaté par Harko
Posté le 21-07-2011 à 13:56:35  profilanswer
 

On a pas du se comprendre.


---------------
Blablaté par Harko
n°2090635
fred777888​999
Posté le 21-07-2011 à 14:23:19  profilanswer
 

Desole, je suis de mauvais poil en ce moment. Je vais donc essayer plus calmement, deja de faire fi de mes autres problemes...  
 
L'exemple fourni est un modele boite (ou des divs imbriques de taille variable sont presents) et tailler le contenant avec des contenus dans des floats differents n'est tout simplement pas possible.
 
Apres, float ca fonctionne tres bien, chaque fois que je fais un formulaire, j'ai des champs 'normaux', des labels float avec une taille et un aligment right, le tout dans un fieldset qui englobe un gros ul et c'est nickel, ce n'est pas float en lui meme qui me pose un probleme ;)
 
A+
 
Fred
 

mood
Publicité
Posté le 21-07-2011 à 14:23:19  profilanswer
 

n°2090656
gatsu35
Blablaté par Harko
Posté le 21-07-2011 à 15:59:19  profilanswer
 

Nan mais en fait quand tu dis : les flottants taillent les contenants, ca ne veut strictement rien dire. Mais je traduirais plutôt de cette manière :
Les éléments flottants sortent du flux. Et si un <div> ou élément bloc englobe des flottants, il ne fait que la hauteur des éléments qui sont encore dans le flux. En résumé si un conteneur ne possède que des éléments flottant, il fera 0px de haut.
Pour résoudre ce problème il y a plusieurs méthodes :
- le clearfix : contenant:after {content:" "; clear:both; display:block; height:0; visibility:hidden}
- Appliquer du contexte de formatage sur le contenant via des propriétés comme :
- overflow:hidden;
- display : table/table-cell/inline-block
- float:left|right (oui ca entraine du contexte de formatage)
- et pour IE6/7 il suffit d'appliquer le haslayout via zoom:1 ou des propriétés telles que : float:left|right; width|height autre que auto; display:inline-block.

 

Edit : et je rajouterai aussi cette règle :
- Un élément flottant prend la largeur de son contenu s'il n'a pas de largeur.


Message édité par gatsu35 le 21-07-2011 à 16:01:37

---------------
Blablaté par Harko
n°2090675
fred777888​999
Posté le 21-07-2011 à 17:15:03  profilanswer
 

C'est ca, et a moi ca me parait clair mais je ne suis pas sur que cela l'aurait ete au moment ou j'ai decouvert les float et les divs.
A un detail pret neanmoins, si le contenant est dans le meme flux (dans l'exemple si je mets div3 en float right), il est dimensionne aussi par rapport a la taille du contenu dans le meme flux (div2 qui est float right et non pas div1 qui n'est pas flotant toujours dans l'exemple que tu as code).
Pour toutes ces raisons, je n'applique jamais un float a un contenu ou un contenant mais uniquement a une element reelement flotant (image, libelle...) et considere comme une perversion du flotant de l'utiliser a ce fait.
Si tu veux le faire, le nouveau css inline-bloc est la pour ca.
 
Quand on me force vraiment (maintenance d'existant), mon code est souvent blinde en div clear:both qui ressemblent etrangement du point de vue semantique aux pixtrans des mises en page tableau de grandpapa car le after ne marche pas avec tous les navigateurs :(

n°2090702
gatsu35
Blablaté par Harko
Posté le 21-07-2011 à 18:30:55  profilanswer
 

En fait tu t'es juste résigné à ne pas utiliser de flottant car tu ne maitrise pas réellement le flottant.
 
Je te conseille de lire cet article sur le contexte de formatage :  
http://www.blog-and-blues.org/arti [...] _formatage
Ca t'éclaircira les idées sur pas mal de préjugés sur les float.
 


---------------
Blablaté par Harko
n°2090751
Shinuza
This is unexecpected
Posté le 22-07-2011 à 00:36:51  profilanswer
 

fred777888999 a écrit :

C'est ca, et a moi ca me parait clair mais je ne suis pas sur que cela l'aurait ete au moment ou j'ai decouvert les float et les divs.
A un detail pret neanmoins, si le contenant est dans le meme flux (dans l'exemple si je mets div3 en float right), il est dimensionne aussi par rapport a la taille du contenu dans le meme flux (div2 qui est float right et non pas div1 qui n'est pas flotant toujours dans l'exemple que tu as code).
Pour toutes ces raisons, je n'applique jamais un float a un contenu ou un contenant mais uniquement a une element reelement flotant (image, libelle...) et considere comme une perversion du flotant de l'utiliser a ce fait.
Si tu veux le faire, le nouveau css inline-bloc est la pour ca.
 
Quand on me force vraiment (maintenance d'existant), mon code est souvent blinde en div clear:both qui ressemblent etrangement du point de vue semantique aux pixtrans des mises en page tableau de grandpapa car le after ne marche pas avec tous les navigateurs :(

Les floats sont utilisés historiquement pour positioner du contenus sous forme de grille. C'est un hack oui, mais un hack cross-browser et futur proof. Mais inline-block en est un aussi, si tu veux vraiment faire du layout il faut utiliser le multi-column ou au pire le flex.


---------------
Mains power can kill, and it will hurt the entire time you’re dying from it.
n°2090809
Proov
Art & Science
Posté le 22-07-2011 à 12:41:53  profilanswer
 

les floats c'est puissant quand meme, quand tu sais bien les utiliser ça marche de partout de manière strictement identique...

n°2090855
fred777888​999
Posté le 22-07-2011 à 14:36:59  profilanswer
 

@Gatsu.
Pas vraiment. Simplement ecrire du code que je suis le seul ou presque a pouvoir lire dans ma boite, c'est pour moi ecrire du code pourri.
Donc du code avec des floats et un modele boite, meme s'il fonctionne, c'est a mes yeux un code de merde.
@Shinuza.
En fait, je ne fais jamais ca. Quand j'ai a afficher un tableau, je fous une balise table point. Chercher a dire que je fais un truc qui n'est pas un tableau que j'affiche toujours comme un tableau c'est pour moi le comble de la masturbation intellectuelle non productive :)
@Negueu
Une remarque vallable meme pour le HTML ou le gnoup12.3456 : Bien utilise ca marche de partout de maniere strictement identique. Si ca marche differement, c'est que tu l'utilise mal.

n°2090863
gatsu35
Blablaté par Harko
Posté le 22-07-2011 à 15:14:33  profilanswer
 

ah parce que du code avec des floats c'est à tes yeux du code de merde ?  
Mais justement c'est du code que plein et meme tout le monde maitrise et sait lire. Meme display:inline-block est moins connu.
Donc justement si tu pars de ce principe, c'est que tu as des idées toutes faites sur les floats parce que tu ne les maitrise pas.


---------------
Blablaté par Harko
n°2090869
fred777888​999
Posté le 22-07-2011 à 15:26:55  profilanswer
 

Ben oui, du code ou le contenu se positionne n'importe comment en fonction du contenant comme l'exemple que tu as fourni et que tu est oblige de blinder en remarques styme
 
- le clearfix : contenant:after {content:" "; clear:both; display:block; height:0; visibility:hidden}
- Appliquer du contexte de formatage sur le contenant via des propriétés comme :  
- overflow:hidden;
- display : table/table-cell/inline-block
- float:left|right (oui ca entraine du contexte de formatage)
- et pour IE6/7 il suffit d'appliquer le haslayout via zoom:1 ou des propriétés telles que : float:left|right; width|height autre que auto; display:inline-block.
 
Pour obtenir un comportement a peu pres correct trans-browser, c'est effectivement a mes yeux du code de merde. Je te rassure, je ne suis pas le seul :(
Maintenant toi qui maitrise, fournis moi un code simple a base de float pour le modele boite fourni (disons pas plus merdique que celui que j'ai poste) qui supporte les contenus variable et on en reparle, au lieu de simplement dire "tu sais pas faire" et de ne pas arriver a pondre de soluce simplement potable.

n°2090873
gatsu35
Blablaté par Harko
Posté le 22-07-2011 à 15:36:02  profilanswer
 

Faire ceci : http://oocss.org/grids_docs.html
sans se soucier de la largeur du dernier élément.  
C'est quelque chose crossbrowser que tu n'obtiendras pas autrement. Et avec les inlineblocks tu n'obtiendras jamais ça.
Je pars du principe que tout est souple chez moi. Et le dernier élément va jusqu'au bout en étant calé.  
Dans ton exemple avec les inline-block, le dernier element n'arrive pas jusqu'à la fin du conteneur et du coup tu seras obligé de bricoler sa largeur.
 
Avec le système présenté ici dans les grids (qui peut être encore amélioré) tu peux le faire.
Ensuite il y a pleins de lignes dans la CSS. Mais tout ça expliqué intelligement n'est plus du code de merde aux yeux des autres : http://www.stubbornella.org/conten [...] -zoom-fix/
 
Je pourrais te montrer milles et une manière de coder des CSS sans quasiment se prendre la tête entre tous les browser. Déjà je pars du principe que tu vois ici : la souplesse, le dernier prend le reste. Ainsi je ne m'emmerde jamais avec les calages de largeurs ou les différences.
 
En plus je monte des sites très rapidement et proprement à partir d'un framework maison.


---------------
Blablaté par Harko
n°2090875
fred777888​999
Posté le 22-07-2011 à 15:41:55  profilanswer
 

Qui ne repond tj pas a la question posee avec un contenu variable. Effectivement, en ne repondant pas au probleme, c'est possible avec des float peut etre meme plus facile.
Moi je fais encore plus vite avec word et enregistrer sous au format html.

n°2090877
gatsu35
Blablaté par Harko
Posté le 22-07-2011 à 15:48:09  profilanswer
 

non tu ne feras pas plus vite et plus simple.
 
Ensuite ce framework une fois dans un CMS permet au client de faire ce qu'il a envie au niveau du template de la page.


---------------
Blablaté par Harko
n°2090883
fred777888​999
Posté le 22-07-2011 à 16:01:35  profilanswer
 

Ce n'est tj pas une reponse au probleme, tu dis que tu fais mieux qu'un modele a boite avec des float, et je n'ai jamais conteste ca, mais tu ne fais pas ce qui est demande.
J'en reviens donc a ce que je dis et redis depuis le debut, il n'est ni possible ni sain d'utiliser des floats dans un modele a boites.

n°2090888
gatsu35
Blablaté par Harko
Posté le 22-07-2011 à 16:24:16  profilanswer
 

en fait si c'est possible, c'est meme très sain. Bon on se comprendra jamais.


---------------
Blablaté par Harko
n°2091180
aideinfo
Posté le 24-07-2011 à 13:33:11  profilanswer
 

Merci Gatsu35, ça marche. Je consulterai tes liens pour essayer de me mettre enfin au positionnement "avancé". Je vous laisse à vos différends stylistiques.


---------------
http://www.aideinfo.com/  Whois adresses IP/domaines le plus évolué !!  FAQ Free Mobile
mood
Publicité
Posté le   profilanswer
 


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

  Problème de positionnement

 

Sujets relatifs
Menu positionnement différent sur IE et Firefox + Problème de bordureProblème(s) positionnement div
Problème de positionnement image dans zonemenu déroulant - problème positionnement bloc
(resolu) Problème de positionnement d'un bouton CSS[VBA] Problème redimensionnement et positionnement de graphique
problème de positionnement entre IE et FireFox ...problème de positionnement avec float [RESOLU]
problème bête de positionnement de divproblème de positionnement de "slide menu"
Plus de sujets relatifs à : Problème de positionnement


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