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

  FORUM HardWare.fr
  Programmation
  HTML/CSS

  [CSS] Positionnement de 2 div dans 1 & float

 
 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

[CSS] Positionnement de 2 div dans 1 & float

n°1582760
ptibat
Posté le 05-07-2007 à 11:43:52  profilanswer
 


Bonjour :)
 
Bon étant donné qu'un schéma vaut mieux qu'un long discours.... voici ce que j'essaye de faire :
 
http://img378.imageshack.us/img378/5972/illus1ws6.png
 
 
J'ai mis mes 2 div "zone de texte" en float:left; , ça rend bien sauf que mon "container" ne fait pas la taille des bloc à l'intérieur ... :/
Ca me donne ça :
 
http://img187.imageshack.us/img187/8527/illus2uz3.png
 
 
Quelqu'un aurai la solution ?
 
 
 
 
 
 
 


---------------
flick r
mood
Publicité
Posté le 05-07-2007 à 11:43:52  profilanswer
 

n°1582762
jan san ka​r
profil : pas le bon
Posté le 05-07-2007 à 11:47:47  profilanswer
 

il faut pas mettre un truc du genre :
<p style="clear: both"/>
ou
<div style="clear: both"/>
dans le div container ?

 

(sinon en lui donnant un height)


Message édité par jan san kar le 05-07-2007 à 11:48:00
n°1582771
ptibat
Posté le 05-07-2007 à 12:10:58  profilanswer
 


En mettant "clear:both;" ça me positionne mieux, mais ça ne règle pas la hauteur, ça reste à "0";
Oui en effet en définissant une hauteur "height" ça marche, sauf que le texte n'est pas toujours de la même taille... :/ donc je peut pas utiliser cette solution. :/
 

n°1582793
bixibu
Ca ... c'est fait!
Posté le 05-07-2007 à 13:10:34  profilanswer
 

montre nous comment tu as mis le <br style="clear:both;" /> dans ton code

n°1582828
ptibat
Posté le 05-07-2007 à 14:44:28  profilanswer
 


Code :
  1. <style type='text/css'>
  3. div.container
  4.  {
  5.   display :   block;
  6.   margin-bottom :  20px;
  7.   width :   500px;
  8.   border :   1px solid #CCCCCC;
  9.   clear :   both;
  10.  }
  12. div.zone_texte_1
  13.  {
  14.   display :   block;
  15.   float :   left;
  16.   width :   100px;
  17.   border :   1px solid #0044FF;
  18.   margin :   10px;
  19.  }
  21. div.zone_texte_2
  22.  {
  23.   display :   block;
  24.   float :   left;
  25.   width :   350px;
  26.   border :   1px solid #0099FF;
  27.   margin :   10px;
  28.  }
  30. </style>
  34. <div class='container'>
  36. <div class='zone_texte_1'>
  37.   Zone 1
  38.  <br />Zone 1
  39.  <br />Zone 1
  40.  <br />Zone 1
  41. </div>
  43. <div class='zone_texte_2'>
  44.   Zone 2
  45.  <br />Zone 2
  46.  <br />Zone 2
  47.  <br />Zone 2
  48. </div>
  50. </div>

n°1582849
moreno911
Posté le 05-07-2007 à 15:31:47  profilanswer
 

Salut,
 
Tu peux contourner un peu le problème avec cet attribut :
 

Code :
  1. min-height: 150px;


 
 
A mettre dans le code CSS de ton conteneur. Sa signifie que son height sera d'un minimum de 150px ...
 
Si sa peut t'aider  :hello:

Message cité 1 fois
n°1582850
ptibat
Posté le 05-07-2007 à 15:36:06  profilanswer
 

moreno911 a écrit :

Salut,
Tu peux contourner un peu le problème avec cet attribut :
 

Code :
  1. min-height: 150px;


A mettre dans le code CSS de ton conteneur. Sa signifie que son height sera d'un minimum de 150px ...
Si sa peut t'aider  :hello:


Merci :) mais en fait j'avais déjà essayé et malheureusement lorsqu'un des bloc de texte est plus haut que 150px ça reviens au même :/
En fait je cherche à ce que le bloc "container" ai la même hauteur que le plus haut des 2 bloc de texte. :/
 

n°1582851
moreno911
Posté le 05-07-2007 à 15:39:07  profilanswer
 

Oui je viens de comprendre ça, je suis [...]  :whistle:  
 
Je cherche à fair le même chose que toi, bizard comme problème quand même !

n°1582957
moreno911
Posté le 05-07-2007 à 18:15:25  profilanswer
 

c'est re moi  :hello:  
 
J'ai trouvé une solution ( pour mon cas  en tout cas...)
 
 
Alors, dans le CSS tu mes ça :
 

Code :
  1. .clearfix:after {
  2.     content: ".";
  3.     display: block;
  4.     height: 0;
  5.     clear: both;
  6.     visibility: hidden;
  7. }


 
 
et dans ta page ( en adaptant un tout petit peux of course ) :
 

Code :
  1. <div id="conteneur" class="clearfix">
  2. <div id="milieu"> blahblah1</div>
  3. <div id="droite">blahblah2 </div>
  4. </div>


 
 
Si tu as encore des soucis, n'hésite pas!

n°1582961
ptibat
Posté le 05-07-2007 à 18:26:06  profilanswer
 


Put**n génial ! ça marche !!!  
Merci beaucoup moreno :jap:  
 
 
Je connaissait pas le :after et le content: ".";, ça sert à quoi :??:


Message édité par ptibat le 05-07-2007 à 18:26:35
mood
Publicité
Posté le 05-07-2007 à 18:26:06  profilanswer
 

n°1582962
moreno911
Posté le 05-07-2007 à 18:31:48  profilanswer
 

L'attibut "content" ajoute du contenu, il en ajoute avant ou après, dans notre cas c'est après donc => after
 
Voylou Voylou  :hello:

n°1582969
ptibat
Posté le 05-07-2007 à 18:57:25  profilanswer
 


Ok !
C'est bon à savoir ça. :) Merci :jap:
 
 

n°1582970
moreno911
Posté le 05-07-2007 à 19:00:21  profilanswer
 

Mais de rien  :)

n°1582982
bixibu
Ca ... c'est fait!
Posté le 05-07-2007 à 19:55:27  profilanswer
 

Ajouter du contenu dans un css :p on aura tout vu  
 
surtout que cette page me refroidi un peu sur son utilisation : http://www.quirksmode.org/css/content.html
et
http://www.htmldog.com/reference/c [...] s/content/
 
pas supporté par IE surtout ^^
 
Sinon si tu te creuse la tete et que tu vas sur openweb.eu tu arrivera à adapter la methode simple, valide et propre du clear:both..
 
genre :

Code :
  1. <div class='container'>
  3. <div class='zone_texte_1'>
  4.   Zone 1
  5.  <br />Zone 1
  6.  <br />Zone 1
  7.  <br />Zone 1
  8. </div>
  10. <div class='zone_texte_2'>
  11.   Zone 2
  12.  <br />Zone 2
  13.  <br />Zone 2
  14.  <br />Zone 2
  15. </div>
  17. <br style="clear:both" />
  18. </div>


 
 
ca marche, partout, c'est propre et valide

Message cité 1 fois
Message édité par bixibu le 05-07-2007 à 19:56:11
n°1583098
ptibat
Posté le 06-07-2007 à 09:54:08  profilanswer
 


Merci bixibu :D

n°1583189
Pitsy
Posté le 06-07-2007 à 13:50:29  profilanswer
 

bixibu a écrit :

Ajouter du contenu dans un css :p on aura tout vu  
 
surtout que cette page me refroidi un peu sur son utilisation : http://www.quirksmode.org/css/content.html


Là, l'ajout ne concerne qu'une propriété css, on reste bien dans le cadre de la présentation et non pas du contenu, je ne vois donc pas le problème.
 

bixibu a écrit :


http://www.htmldog.com/reference/c [...] s/content/
 
pas supporté par IE surtout ^^


Ce n'est pas un problème non plus puisque son conteneur a le layout, ce qui crèe un nouveau contexte de formatage sur IE, et que donc IE va adapter la taille du conteneur en fonction des 2 autres.
 

bixibu a écrit :


ca marche, partout, c'est propre et valide


Devoir ajouter une balise exprès pour dans le html, je n'appelle pas ça "propre". De plus le choix d'une balise br n'est pas neutre puisqu'il induit un saut de ligne qui pourraît être interprêté selon la configuration et les navigateurs.
 
Le fait est que, actuellement, css n'offre pas de solution propre à ce problème. La propriété css3 clear-after devrait pallier à ce manque.
 
En plus des 2 solutions évoquées ci-dessus (ajout d'une balise avec la propriété clear, ajout du clear via le :after), il me paraît important de préciser qu'un nouveau contexte de formatage permet d'avoir le même effet. Par exemple, rajouter un overflow:hidden (en donnant le layout pour IE6-) sur le conteneur, ou encore le faire flotter. Si je ne qualifierais pas non plus cette méthode de "propre", vu qu'on fait appel à une propriété pour l'effet quelle induit et non pas pour sa fonction première, elle a le mérite d'être la plus simple à mettre en oeuvre.
 
En ce sens, la solution la "moins sale" pour moi, idéologiquement parlant, est celle du :after puisqu'elle attribue la propriété adéquate à la balise concernée. Par contre vu sa lourdeur  à mettre en oeuvre et la possibilité de voir un espace au bas du bloc concerné, je lui préfère une solution à l'aide d'un nouveau contexte de formatage.

n°1583549
Shinuza
This is unexecpected
Posté le 07-07-2007 à 15:42:50  profilanswer
 

Euh, tu ne donneras pas de layout a IE6 avec un overflow:hidden.
 
IE embarque une propriété hasLayout, qui permet de donner une consistance à un bloc. La même chose peut être obtenue surtout tous les navigateurs avec overflow:hidden; ou encore display:table-cell.
 
ptibat : Note qu'une div est de type bloc, et qu'un element floaté l'est automatiquement.
 
bixibu : Ta solution est inapropriée dans une grande majorité de cas, simplement parce qu'elle génère du contenu inutile, tout comme la solution de moreno911

Message cité 1 fois

---------------
Mains power can kill, and it will hurt the entire time you’re dying from it.
n°1583682
Pitsy
Posté le 08-07-2007 à 10:14:28  profilanswer
 

Shinuza a écrit :

Euh, tu ne donneras pas de layout a IE6 avec un overflow:hidden.


C'est justement ce que j'ai dit, mais peut-être me suis-je mal exprimée.
Ajouter un overflow:hidden crèera un nouveau context de formattage sur le navigateurs récent, mais pas sur IE6, d'où ma précision de lui donner le layout pour y pallier.

Message cité 1 fois
n°1583750
gatsu35
Blablaté par Harko
Posté le 08-07-2007 à 19:46:35  profilanswer
 

Pitsy a écrit :

C'est justement ce que j'ai dit, mais peut-être me suis-je mal exprimée.
Ajouter un overflow:hidden crèera un nouveau context de formattage sur le navigateurs récent, mais pas sur IE6, d'où ma précision de lui donner le layout pour y pallier.


Sans oublier de rétablir l'overflow (_overflow:visible) pour IE car s'il te vient à l'esprit de mettre une hauteur minimum (ex : min-height:250px; _height:250px) à ton bloc, cela te permettra d'avoir un élément qui s'agrandit meme si l'overflow:hidden lui est collé. Et sinon dans le cas de notre ami, un display:table aurrait aussi bien fait l'affaire pour ajouter le contexte de formatage, puisqu'il a posé une largeur sur son bloc

n°1583825
Blurb
Posté le 09-07-2007 à 08:01:51  profilanswer
 

Bonjour,
 
J'ai eu ce probleme en créant mon site, je voulais que le contenant s'adapte au contenu !
Je l'ai résolu en virant les "div" et en les remplacant par des "p" partout où c'était possible  :)  
Une question se pose alors : est-ce sémantiquement correct ?


---------------
>>> Making Of <<<
n°1583854
gatsu35
Blablaté par Harko
Posté le 09-07-2007 à 09:29:14  profilanswer
 

c'est pas ça qui va résoudre ton problème :D
Et en plus dans un P tu n'as pas le droit de mettre d'éléments de type block à l'intérieure. Et donc les navigateurs referment la balise P dès qu'ils voient un DIV à l'intérieur d'un P

n°1650591
Shinuza
This is unexecpected
Posté le 28-11-2007 à 23:10:39  profilanswer
 

Il y'a de context de formatage sur #contenu, ton clear both sert à rien


---------------
Mains power can kill, and it will hurt the entire time you’re dying from it.
n°1650605
gatsu35
Blablaté par Harko
Posté le 28-11-2007 à 23:44:46  profilanswer
 

je lui ai déjà dit 10 posts plus haut et c'est toujours pas fait, mais putain qu'est ce que tu fous :fou:

n°1651020
Shinuza
This is unexecpected
Posté le 29-11-2007 à 19:32:59  profilanswer
 

orang a écrit :

Salut,
 
Désolé, merci d'avoir pris le temps de me répondre. Pourrais-je avoir un peu plus d'info.
 
J'ai retiré le clear:both; de l'id contenu, mais rien y fait.
 
Merci encore :)


Et t'as mis le contexte de formatage sur l'élement?  [:delarue2]


---------------
Mains power can kill, and it will hurt the entire time you’re dying from it.
n°1651169
orang
Posté le 29-11-2007 à 22:25:36  profilanswer
 

Bon,
 
Je recrée un poste, qui je l'espère vous apparaitra plus visible :
 
CSS :

Code :
  1. @charset "utf-8";
  2. body,td,th {
  3. color: #990000;
  4. }
  5. body {
  6. background-color: #FFFFFF;
  7. }
  8. a:hover {
  9. color: #CC0000;
  10. }
  11. .bloody #entete {
  12. height: 60px;
  13. width: 1000px;
  14. margin: auto;
  15. background-color: #00FF00;
  16. }
  17. .bloody #menu {
  18. margin: auto;
  19. height: 20px;
  20. width: 1000px;
  21. }
  22. .bloody #contenant {
  23. width: 1000px;
  24. margin: auto;
  25. border: thick solid #D40000;
  26. overflow: visible;
  27. clear: both;
  28. }
  29. .bloody #intercontenu {
  30. width: 20%;
  31. height: auto;
  32. float: right;
  33. z-index: auto;
  34. background-color: #CC99FF;
  35. margin-bottom: 0px;
  36. }
  37. .bloody #colonne {
  38. color: #FFFF00;
  39. width: 80%;
  40. height: auto;
  41. overflow: auto;
  42. z-index: auto;
  43. float: left;
  44. background-color: #0099CC;
  45. }
  46. .bloody #cadre {
  47. width: 1000px;
  48. margin: auto;
  49. height: auto;
  50. overflow: visible;
  51. clear: both;
  52. border: thick solid #CCFF00;
  54. }
  55. .bloody #pied {
  56. background-color: #00FF00;
  57. margin: auto;
  58. width: 1000px;
  59. clear: both;
  60. }


HTML :  

Code :
  1. </head>
  2. <body>
  3. <div class="bloody" id="contenant">
  4. <div class="bloody" id="entete">Placez ici le contenu de class "bloody" id "entete"</div>
  5. <div class="bloody" id="menu">Placez ici le contenu de class "bloody" id "menu"</div>
  6. <div class="bloody" id="cadre">
  7. <div class="bloody" id="colonne">
  8. <p>Placez ici le contenu de class "bloody" id "colonne"</p>
  9. <p> </p>
  10. <p> </p>
  11. </div>
  12. <div class="bloody" id="intercontenu">
  13. <p>Placez ici le contenu de class "bloody" id "intercontenu"</p>
  14. <p> </p>
  15. <p> </p>
  16. </div>
  17. </div>
  18. <div class="bloody" id="pied">Placez ici le contenu de class "bloody" id "pied"</div>
  19. </div>
  20. </body>
  21. </html>


Lien du site : http://bloodybol.free.fr/index.php
 
Merci encore :)


Message édité par orang le 29-11-2007 à 22:25:53
n°1651218
Shinuza
This is unexecpected
Posté le 30-11-2007 à 04:10:07  profilanswer
 

Nom d'une couille putain :fou:
 
Tu mets overflow:hidden;_overflow:visible;zoom:1; sur ton élement "cadre" et on en parle plus [:pingouino]
 
http://www.blog-and-blues.org/arti [...] _formatage


---------------
Mains power can kill, and it will hurt the entire time you’re dying from it.
n°1651259
orang
Posté le 30-11-2007 à 08:28:55  profilanswer
 

Merci d'avoir pris le temps de me répondre, et même de m'avoir envoyé un lien !
 
Mais je ne suis toujours pas parvenu à obtenir ce que je souhaitais. J'ai pourtant suivi à la lette le lien et les infos que tu m'as filé.  
 
Merci encore en tout ca :)


Message édité par orang le 01-12-2007 à 09:58:35
n°1653639
orang
Posté le 06-12-2007 à 10:40:14  profilanswer
 

Salut, je vois bien que mon problème consistant à vouloir placer deux div flottantes dans une autre n'est pas évident, toutefois, ce topic est la preuve qu'une solution existe.
 
Si dès fois vous aviez la solution, je suis évidemment preneur.
 
Merci encore :)

n°1653777
Shinuza
This is unexecpected
Posté le 06-12-2007 à 13:18:36  profilanswer
 

Bien sur qu'elle existe, je te l'ai donnée deux posts plus haut :o


---------------
Mains power can kill, and it will hurt the entire time you’re dying from it.
n°1653788
orang
Posté le 06-12-2007 à 13:31:57  profilanswer
 

Entendu désolé, je vais lire plus attentivement ton message.  
merci :)

mood
Publicité
Posté le   profilanswer
 


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

  [CSS] Positionnement de 2 div dans 1 & float

 

Sujets relatifs
CSS mal prise en compte - joomla[CSS] Faire une info-bulle avec internet explorer...
Bug XHTML/CSS[Résolu] Pb CSS : cadre qui bouge...
Positionnement d'image relative/absoluproblème de positionnement de "slide menu"
Recherche programmmeur CSS[HTML/CSS]Probleme de compatibilite IE7 ...
[CSS] problème disposition d'une liste de liens1 erreur de validation CSS 2.0
Plus de sujets relatifs à : [CSS] Positionnement de 2 div dans 1 & float

Forum MesDiscussions.Net, Version 2010.2
(c) 2000-2011 Doctissimo
Page générée en 0.079 secondes

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