[CSS/xHTML] Je ne comprend pas l'affichage de mon <div>...

Je ne comprend pas l'affichage de mon <div>... [CSS/xHTML] - HTML/CSS - Programmation

Marsh Posté le 08-02-2005 à 07:32:43    

Bonjour,
 
Avant tout, merci de prendre de votre temps pour lire ce post ;)
 
En fait, je ne comprend pas vraiment mon probléme... :p Il s'agit d'un script PHP qui génere une galerie d'image "dynamiquement" (mais ca on s'en moque).
 
Voila comment est organisé (du point de vue html) ma page:

Code :
  1. <div class="galerie">
  2.   <p class="vignette"><img src="" alt="" />
  3.   <br />
  4.   Titre</p>
  5.   <p class="vignette"><img src="" alt="" />
  6.   <br />
  7.   Titre</p>
  8.   <p class="vignette"><img src="" alt="" />
  9.   <br />
  10.   Titre</p>
  11.   etc...
  12. </div>
  13. <a href="">Revenir a la page précedente</a>
  14. <a href="">Page précédente</a>
  15. <a href="">Page suivante</a>
  16. Les logos des validators


 
Vous l'aurez compris, pour chaque image, en dessous il y son nom (Titre).
 
Voici le css utilisé:

Code :
  1. .galerie{
  2.   width: 100%;
  3. }
  4. .galerie .vignette{
  5.   background-color: #00ff00;
  6.   margin: 2px;
  7.   float: left;
  8.   width: 100px;
  9.   text-align: center;
  10. }


 
Donc, pour en revenir a mon probléme, je n'ai aucun probléme d'affichage sous IE et Opera7. Il me donne exactement ce que je veux c'est a dire ca : http://www.ajmprod.com/www/prob_css/ie.JPG & http://www.ajmprod.com/www/prob_css/opera7.JPG
En revanche, voici ce que j'ai sur FireFox et Opera8 : http://www.ajmprod.com/www/prob_css/firefox.JPG & http://www.ajmprod.com/www/prob_css/opera8.JPG
Comme vous le voyez, le texte "Revenir à la page précédente" "Page suivante" "Page précedente", etc sont bel est bien affiché en bas du div sur IE et Opera7, tandis qu'Opera8 et FireFox l'affiche sur la droite :|
 
Bon... Si ce serai l'inverse, a la limite je comprendrai que IE et Opera7 soient cons. Mais la... Ben par logique c'est FireFox qui est le plus aux normes et Opera8 plus aux normes qu'Opera7 donc... C'est que finalement c'est moi qui suit con :p
 
Question: Je ne trouve pas l'erreur, et donc la solution. Quelqu'un pourrait m'eguiller ? J'ai du rater un passage des recommandations du w3c ^^
 
Merci beaucoup.


Message édité par Tempus_Fugit le 08-02-2005 à 09:35:09
Reply

Marsh Posté le 08-02-2005 à 07:32:43   

Reply

Marsh Posté le 08-02-2005 à 08:03:56    

Ca vient du 'width: 100%' de ton .galerie. On en a déjà parlé maintes fois sur ce forum, c'est parce qu'une dimension en pourcentages va être calculée par rapport au premier parent qui a une dimension explicite. Donc si le conteneur de ton .galerie n'a pas de dimension, ça va prendre la dimension du parent du conteneur de .galerie. Tu suis ? :D
Donc en l'occurrence, il doit prendre le body, et donc prendre la taille de l'écran...

Reply

Marsh Posté le 08-02-2005 à 08:21:38    

Justement, c'est ce que je veux. C'est a dire qu'il prenne toute la largeur (resizible) donc j'ai besoin du width...
 
Mais peut etre je n'ai pas tres bien compris ta réponse. Serait il possible que tu me précises pourquoi le fait de le mettre en 100% fait apparaitre les block (hr, p, a, etc) suivant le div a sa droite. Et non en bas...
 
Merci et désolé de t'embeter :x


Message édité par Tempus_Fugit le 08-02-2005 à 09:31:58
Reply

Marsh Posté le 08-02-2005 à 09:02:10    

Comme dit, le 100% va avoir pour effet de prendre 100% du body, autrement dit la largeur de la fenêtre, donc y'a plus de place pour le reste ;)
En fait, il ne faut pas de dimension à ton div, aucune width définie. Il faut juste mettre une marge à droite, et jouer avec les float pour les liens.

Reply

Marsh Posté le 08-02-2005 à 09:14:30    

FlorentG a écrit :

Comme dit, le 100% va avoir pour effet de prendre 100% du body, autrement dit la largeur de la fenêtre, donc y'a plus de place pour le reste ;)
En fait, il ne faut pas de dimension à ton div, aucune width définie. Il faut juste mettre une marge à droite, et jouer avec les float pour les liens.


Mhhhh, comme tu le dis il prend 100% de la largeur mais pas de la hauteur, donc normalement le texte suivant le div a toute la place pour s'afficher... Mais donc la ce que tu sous entends c'est que le div prend 100% du body en largeur mais "aussi hauteur" c'est bien ca ?
 
Dans ce cas je me pose des questions :/ A part en choisissant de ne rien mettre a la suite du div de la galerie. Quelles sont les solutions pour réaliser une galerie resizable en fonction de la résolution pour afficher un nombre d'images variable (vu que c'est dynamique) ? Pas les tables en principe, ce n'est pas leur role. Visiblement utiliser des balises vide tel div en 100% non plus... Que me reste t'il ? :'(
 
Merchi :p
 
Ps: Je viens d'enlever le width:100%; et euh... toujours le meme probléme. Le texte se place a droite plutot qu'en dessous en se mettant tout naturellement a la suite... (et maintenant IE et Opera 7 m'affichent aussi le texte a droite tout comme FireFox et Opera8...)

Reply

Marsh Posté le 08-02-2005 à 09:17:15    

Ah, milles excuses j'avais compris le problème inverse :D
 
Envoi le CSS de la partie texte

Reply

Marsh Posté le 08-02-2005 à 09:30:46    

Considére qu'il n'y a dedans que ce que je t'ai filé. Je n'en suis qu'a la parti codage et structuration du site pas design ^^
 
Dans mon cas il s'agit donc d'une balise div contenant toute les <p> (ou plutot toute les images) et de balises <p> contenant l'image avec un br pour afficher le texte en dessous.
Et voici le CSS comme décris dans le premier post :

Code :
  1. .galerie{
  2.   width: 100%;
  3. }
  4. .galerie .vignette{
  5.   background-color: #00ff00;
  6.   margin: 2px;
  7.   float: left;
  8.   width: 100px;
  9.   text-align: center;
  10. }


 
Et tant qu'a faire le html du premier post :)

Code :
  1. <div class="galerie">
  2.   <p class="vignette"><img src="" alt="" />
  3.   <br />
  4.   Titre</p>
  5.   <p class="vignette"><img src="" alt="" />
  6.   <br />
  7.   Titre</p>
  8.   <p class="vignette"><img src="" alt="" />
  9.   <br />
  10.   Titre</p>
  11.   etc...
  12. </div>
  13. <a href="">Revenir a la page précedente</a>
  14. <a href="">Page précédente</a>
  15. <a href="">Page suivante</a>
  16. Les logos des validators


Message édité par Tempus_Fugit le 08-02-2005 à 09:34:17
Reply

Marsh Posté le 08-02-2005 à 09:38:22    

Met des <a> dans un <div>, et applique à ce <div> le css suivant :

clear: both;

Reply

Marsh Posté le 08-02-2005 à 09:53:14    

J'ai fais ce que tu as demandé concernant le <a> au lieu de <p> dans le div, et l'ajout de clear:both; malheureusement meme resultat. En local chez toi ca marche ?

Reply

Marsh Posté le 08-02-2005 à 09:58:08    

T'as bien donc un truc dans ce genre :

Code :
  1. <div class="galerie">
  2. ..
  3. </div>
  4. <div id="liens">
  5.   <a href="">Revenir a la page précedente</a> 
  6.    ...
  7. </div>


Et le clear: both; sur le #liens ?

Reply

Marsh Posté le 08-02-2005 à 09:58:08   

Reply

Marsh Posté le 08-02-2005 à 10:10:48    

Ah ptit génie, je t'offrirai une playstation 6 franchement :D
 
Cette fois ci ca marche. En clair le clear:both; sur la div lien permet de préciser quoi ? Qu'il ne doit rien y a avoir a son niveau ? C'est a dire ni a droite ni a gauche ?
 
Merci, merchi, :)

Reply

Marsh Posté le 08-02-2005 à 10:13:25    

Ah c'est bon je suis allé voir sur un site. J'ai compris merci :)


Message édité par Tempus_Fugit le 08-02-2005 à 10:14:11
Reply

Marsh Posté le 08-02-2005 à 10:19:22    

:jap: :)

Reply

Sujets relatifs:

Leave a Replay

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