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

  FORUM HardWare.fr
  Programmation
  HTML/CSS

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

 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

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

n°1435671
rody83
No pain, no gain
Posté le 02-09-2006 à 18:16:05  profilanswer
 

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 :.
mood
Publicité
Posté le 02-09-2006 à 18:16:05  profilanswer
 

n°1435878
Redzon
Posté le 03-09-2006 à 14:01:14  profilanswer
 

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
n°1435904
rody83
No pain, no gain
Posté le 03-09-2006 à 15:00:13  profilanswer
 

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 :.
n°1435912
Redzon
Posté le 03-09-2006 à 15:21:06  profilanswer
 

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

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

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

 

Sujets relatifs
[RESOLU] Flash : Alignement en 1er plan d'une animationFrame en Div/CSS
Trigger pour rattraper des erreurs sur des "alter table"Comment copier une table d'une bdd vers une autre
[Résolu]Comment mettre à jour une table[résolu] ld: Missing library symbol table in
DIV déplaçablepb requête update Access avec equi-jointure de table
Supprimer des entrées elles n'existent pas dans une autre tableAffiche toutes les colonnes d'une table [repondu]
Plus de sujets relatifs à : [TABLE + IMG] alignement dans un DIV...


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