[TABLE + IMG] alignement dans un DIV...

alignement dans un DIV... [TABLE + IMG] - HTML/CSS - Programmation

Marsh Posté le 02-09-2006 à 18:16:05    

Bonjour,
 
Je cherche depuis un bout de temps à faire une modification d'alignement sur mon site...
Pour le moment j'ai ça :  
 
http://img394.imageshack.us/img394/4990/websiteinitialtg5.png
 
et l'objectif est de mettre la photo à droite du tableau.
 
L'ennui c'est que lorsque j'essaie d'aligner en mettre le tableau en float:left et l'image en float:right, j'obtiens le résultat suivant :
 
http://img487.imageshack.us/img487/5953/websitemodification1ro1.png
 
donc l'alignement fonctionne, mais du coup le DIV contenant le tableau et l'image ne semble plus les prendre en compte, vu qu'il s'arrête juste après le HR (le texte de copyright fait partie du conteneur qui vient juste en dessous de celui qui contient tableau + image).
 
J'ai aussi tenté le coup avec d'autres DIV, l'un contenant le tableau, l'autre l'image, et le résultat est identique.
 
Je pense que ce que je veux réaliser doit être possible, mais là je sèche un peu... Quelqu'un pourrait éclairer ma lanterne (une propriété CSS "magique" qui permettrait de faire ça) ?
 
Merci  :hello:


---------------
.: Passions | Galerie | Blog :.
Reply

Marsh Posté le 02-09-2006 à 18:16:05   

Reply

Marsh Posté le 03-09-2006 à 14:01:14    

Salut,
 
Apparament tu a un <div></div> qui contient ton tableau et ton image donc tu met ton tableau et ton image en float left ce qui les fait sortir du flux (comme si elle n'etait plus dans le div).
 
J'ai vu que tu avais un <div></div> en dessous : <div class="bas">
 
tu peut donc faire :
 
.bas{
     clear:both;
}
 
Mais la ta boite qui contient le le titre le tableau et la photo ne sera pas a la taille du contenu alors tu peut
soit mettre un <div></div> vide et mettre un clear both sur ce <div></div> vide soit le faire avec un <hr/>
 
Ou alors mettre une taille a ton  <div></div>
 
Tiens moi au courant


Message édité par Redzon le 03-09-2006 à 15:21:57

---------------
Redzon
Reply

Marsh Posté le 03-09-2006 à 15:00:13    

la classe ça fonctionne :love:
 
suite à ton conseil, j'ai ajouté :
 

Code :
  1. dis.bas
  2. {
  3.   clear: both;
  4. }
  5. div.contenu hr
  6. {
  7.   clear: both;
  8.   visibility: hidden;
  9. }
  10. div.contenu img
  11. {
  12.   float: right;
  13. }
  14. div.contenu table
  15. {
  16.   float: left;
  17. }


 
puis dans le code j'ai mis un hr entre chaque groupe table+img, et ça marche au poil, que ce soit sous FF ou IE :)
 
merci pour ton aide (en plus ça m'a permis de voir à quoi servait la propriété clear, qui est TRES utile :D).
 
PS : j'avais eu le même genre de souci pour ma barre de titre (alignement arborescence et date), mais je m'en étais sorti en fixant la taille du div contenant... ce que je ne souhaitais pas faire ici.


---------------
.: Passions | Galerie | Blog :.
Reply

Marsh Posté le 03-09-2006 à 15:21:06    

Par contre pense bien a mettre ce <hr/> sur toutes les pages ( ta page modelisme par exemple) comme tu utilise beaucoup les classes Voilà si tu a d'autres question n'hésite pas !
 
++


---------------
Redzon
Reply

Sujets relatifs:

Leave a Replay

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