Positionnement CSS : aaargh !

Positionnement CSS : aaargh ! - HTML/CSS - Programmation

Marsh Posté le 19-03-2005 à 13:35:53    

IMPOSSIBLE d'afficher ça en CSS avec mes connaissances :
 
http://andhuan.free.fr/arg.jpg
 
Le container (cadre rouge/orange) est un bloc DIV...
 
Comment faire ? Ca fait 2 jours que je me bat avec ça, j'ai essayé du float, du display:block ou inline, j'ai joué avec les marges, rien à faire ça me gave !!! :o
 
Ai été voir alsacreations, mediabox (propriétés CSS)... rien pu en tirer !
 
Alors je jette une bouteille à la mer dans ce forum, désolé si c'est saoulant mais là je craque...  [:pcgamer]  
 
MERCI d'avance ;)
 

Reply

Marsh Posté le 19-03-2005 à 13:35:53   

Reply

Marsh Posté le 19-03-2005 à 13:43:00    

Reply

Marsh Posté le 19-03-2005 à 13:46:27    

Non, c'est un bloc qui se répète plusieurs fois dans la page (plusieurs images et textes associés)...
 
En absolu tout va se superposer (déjà essayé :D) !

Reply

Marsh Posté le 19-03-2005 à 13:48:56    

ET en mettant

Code :
  1. <div id="conteneur_global">
  2.   <div id="gauche" style="float:left;">
  3.                      <div id="Rien" style="float:left;"></div>
  4.                      <div id="texte" style="float:left;"></div>
  5.    </div>
  6.    <div id="image" style="float:left"></div>
  7. </div>


C'est pas valable ?
Attention jsui loin de maîtriser les CSS  :sol:


Message édité par belay le 19-03-2005 à 13:49:38
Reply

Marsh Posté le 19-03-2005 à 13:50:38    

andhuan a écrit :

En absolu tout va se superposer


Non, pas si tu positionnes le bloc conteneur.
 
Lire http://incongru.webdynamit.net/PositionnementCss sur le positionnement absolu et en particulier les exemples :
 
http://incongru.webdynamit.net/upl [...] olu-1.html
http://incongru.webdynamit.net/upl [...] olu-2.html


---------------
Incongru : une FAQ abandonnée sur les Standards du Web - FAQ périmée de blabla@Prog
Reply

Marsh Posté le 19-03-2005 à 14:06:42    

SI je positionne le conteneur en relative et les blocs image et texte en absolute ça marche presque :
 
Le conteneur devient tout plat et l'image et le texte débordent vers le haut en chevauchant tout le reste de la page !
 
Or j'aimerais que le conteneur épouse la hauteur des blocs qu'il contient...
 
A l'époque je faisait ça en deux coups de cuillères à pot avec des tableaux :D

Reply

Marsh Posté le 19-03-2005 à 14:33:28    

Ca me gave.
 
Ca existe pas un convertisseur de tableau vers du CSS ? Je commence à douter que tout soit possible avec ce dernier :(
 
l'aurait suffit d'un tableau de 2x2 avec un rowspan pour l'image et voilà... et demain on remplacera le CSS par quoi, que je m'y mette dès maintenant ? :D

Reply

Marsh Posté le 19-03-2005 à 14:40:47    

andhuan a écrit :

Or j'aimerais que le conteneur épouse la hauteur des blocs qu'il contient...


Fixe la hauteur du conteneur [:spamafote]


Message édité par gm_superstar le 19-03-2005 à 14:40:54

---------------
Incongru : une FAQ abandonnée sur les Standards du Web - FAQ périmée de blabla@Prog
Reply

Marsh Posté le 19-03-2005 à 14:53:44    

gm_superstar a écrit :

Fixe la hauteur du conteneur [:spamafote]


 
Ben oui mais mais si l'image dépasse la hauteur du conteneur ?
 
Me dis pas qu'il faut que je fasse une #id avec un style spécifique (hauteur) en fonction de l'image, il me faut de l'universel !

Reply

Marsh Posté le 19-03-2005 à 15:01:42    

Ca serait pas mal que tu dises dès le départ quelles sont tes contraintes ça éviterait que ceux qui veulent t'aider partent dans des fausses directions.
 
Donc je répète, qu'est-ce qui doit fixer la hauteur du bloc conteneur ? L'image ou le texte ?


---------------
Incongru : une FAQ abandonnée sur les Standards du Web - FAQ périmée de blabla@Prog
Reply

Marsh Posté le 19-03-2005 à 15:01:42   

Reply

Marsh Posté le 19-03-2005 à 16:51:11    

andhuan a écrit :

Ben oui mais mais si l'image dépasse la hauteur du conteneur ?


Tu connais la taille de ton image de toute façon, non  :heink: ?
 
Quatre div: un global (dont tu connais largeur et hauteur, centré sur ta page), un avec la photo (float: right avec dimensions connues), ton div rien (float left, dimensions connues), div texte (float left, dimensions connues).
 
Ca passe pas ?


---------------
Got spyware ? | HFR HijackThis Tutorial
Reply

Marsh Posté le 19-03-2005 à 16:51:38    

Avec ça tu as ce que tu cherches:
 

Code :
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  2. "http://www.w3.org/TR/html4/loose.dtd">
  3. <html>
  4. <head>
  5. <title>Untitled Document</title>
  6. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
  7. <style type="text/css">
  8. body{margin:0}
  9. .global{background-color:#000000;}
  10. .conteneur{
  11. width:700px;
  12. height:500px;
  13. margin-left:auto;
  14. margin-right:auto;
  15. }
  16. .photo{
  17. width:400px;
  18. height:500px;
  19. float:right;
  20. background-color:#FF0000;
  21. }
  22. .rien{
  23. width:300px;
  24. height:200px;
  25. background-color:#CCFFFF;
  26. float:left;
  27. }
  28. .texte{
  29. width:300px;
  30. height:300px;
  31. float:left;
  32. background-color:#FFFF00;
  33. }
  34. </style>
  35. </head>
  36. <body>
  37. <div class="global">
  38. <div class="conteneur">
  39. <div class="photo"></div>
  40. <div class="rien"></div>
  41. <div class="texte"></div>
  42. </div>
  43. </div>
  44. </body>
  45. </html>


---------------
Got spyware ? | HFR HijackThis Tutorial
Reply

Marsh Posté le 22-03-2005 à 18:02:20    

gm_superstar a écrit :

Ca serait pas mal que tu dises dès le départ quelles sont tes contraintes ça éviterait que ceux qui veulent t'aider partent dans des fausses directions.
 
Donc je répète, qu'est-ce qui doit fixer la hauteur du bloc conteneur ? L'image ou le texte ?


 
Eh bien... le plus haut des deux :D
 
Ce sera le plus souvent l'image, mais j'aimerais un truc universel.
 
Comment adapter un div conteneur à la taille de son contenu ?

Reply

Marsh Posté le 22-03-2005 à 20:25:54    

sanpellegrino a écrit :

Tu connais la taille de ton image de toute façon, non  :heink: ?
 
Quatre div: un global (dont tu connais largeur et hauteur, centré sur ta page), un avec la photo (float: right avec dimensions connues), ton div rien (float left, dimensions connues), div texte (float left, dimensions connues).
 
Ca passe pas ?


 
Considères qu'il y a 10000 images avec 10000 textes associés dans une BDD et que la page php va tout charger et faire le XHTML... et le CSS mets en forme tout ça... donc non je ne connais pas forcément la taille de mon image !
 
Pour ton code, merci :jap:  
 
Mais pas de taille fixe, faut que ça s'adapte au contenu... et quand on enlève les tailles fixes tout part en sucette bien sûr !
 
Mais j'y ai trouvé une idée : celle de mettre l'image en float:right et le texte en float:left... ça ne donne rien ! :(
 
J'ai lu qu'on pouvait tout faire en CSS, d'où mon acharnement... mais c'est peut-être pas vrai après tout :sweat:  

Reply

Marsh Posté le 22-03-2005 à 20:39:07    

andhuan a écrit :

Eh bien... le plus haut des deux :D
 
Ce sera le plus souvent l'image, mais j'aimerais un truc universel.
 
Comment adapter un div conteneur à la taille de son contenu ?


Alors pour un truc universel passe ton chemin. A priori on peut le faire avec les CSS mais ça ne marchera pas avec IE. Donc à moins de faire une usine à gaz bourrée de hacks autant rester avec les tableaux.
 
Ou alors il faut que ton texte parte du haut (alors c'est trivial)
 

andhuan a écrit :

J'ai lu qu'on pouvait tout faire en CSS, d'où mon acharnement... mais c'est peut-être pas vrai après tout :sweat:


On peut effectivement presque tout faire avec les CSS, mais parfois, l'implémentation très imparfaites par des navigateurs anciens (IE en particulier) limite notablement certains usages.


---------------
Incongru : une FAQ abandonnée sur les Standards du Web - FAQ périmée de blabla@Prog
Reply

Sujets relatifs:

Leave a Replay

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