mise en page avec des <div>

mise en page avec des <div> - HTML/CSS - Programmation

Marsh Posté le 25-07-2005 à 18:27:40    

Je passe mes tables en div et je rencontre un problème : j'ai un tableau de deux colonnes et de nombreuses lignes de différentes hauteurs (le contenu est généré par du php). Pour schématiser, dans la partie à gauche il y a du texte et à droite une image de taille fixe.
J'ai donc fait un div de largeur fixe pour le texte et un div également de largeur fixe pour l'image. Vu que les hauteurs sont variables, je ne peux pas trop jouer dessus.
 
Pour la première ligne, tout se passe bien, tout est bien aligné. Le problème, c'est la deuxième ligne. Le texte est en dessous de l'autre zone de texte mais la deuxième image remonte et va se coller sous la première. Elle ne se retrouve donc pas alignée avec le deuxième texte.
 
Savez-vous comment je peux régler ça ?

Reply

Marsh Posté le 25-07-2005 à 18:27:40   

Reply

Marsh Posté le 25-07-2005 à 20:42:52    

un code ou une page pour voir ce que ca donne pourrai peut-etre je dit bien peut-etre nosu aider ^^

Reply

Marsh Posté le 26-07-2005 à 13:43:03    

typiquement, comme les posts de forum. Ils utilisent des tableaux pour aligner le nick et le message. Mon problème à moi, ça correspondrait au fait que ton nick soit juste en dessous du mien et non pas aligné avec ton texte.

Reply

Marsh Posté le 26-07-2005 à 13:44:49    

Un conteneur qui englobe ton champ texte et ton champ image, que tu répètes pour chaque nouvel item, ca ferait pas l'affaire?

Reply

Marsh Posté le 26-07-2005 à 14:07:10    

Ce que ça donne de base :
http://img346.imageshack.us/img346/272/blocnofloat8yy.th.png
 
Voilà ce que ça donne si j'utilise des float dans ma css :
http://img208.imageshack.us/img208/3523/blocfloat2bd.th.png
 
Et voici le code concerné :
 

Citation :

<div class="index_article_ga">
 <p class="titre_article">Commentaires sur les news et sur les RPG</p>
 <p class="corps_article">Une petite info : il est désormais possible de commenter les news via le module directement intégré au site. Ce module va être étendu à tout le reste du site mais pour le moment, il n'est fonctionnel que sur les news.<br />
<br />
 
EDIT: C'est désormais également fonctionnel sur les RPG :)</p>
</div>
<div class="index_article_dr">
 <p class="infos_article">par Zanton, le 14/07/2005</p>
 <img class="index_article_dr" src="./img/icones/General.png" width="200" height="100" border="0" alt="General" align="right">
</div>
<div class="index_article_ga">
 <p class="titre_article">Version 3.0-RC2 online !</p>
 <p class="corps_article">Et bien oui, après des mois de non mises à jour et de travail (et surtout de non travail), cette version 3, incomplète encore, est désormais disponible. Elle a demandé beaucoup de temps mais elle offre pas mal de nouveautés et offre une interface qui facilite l'ajout de contenu.<br />
 
<br />
Avec cette V3, c'est aussi un passage de témoin qui s'effectue. N'ayant plus le temps et la motivation pour m'en occuper régulièrement, c'est avec joie que je passe le relai à ChocodarK et Vieux Chat pour s'en occuper. Je resterai toujours dans l'ombre pour filer un coup de main mais je serai beaucoup moins présent. Pour le moment, cette V3 n'est pas entièrement finie et tout le contenu de la V2 n'a pas encore été remis mais ça ne saurait tarder. Des améliorations vont donc arriver prochainement.<br />
<br />
En attendant, profitez bien du site et revenez régulièrement pour avoir les dernières news des RPG ainsi que des tests, des guides et tout ce qui touche au RPGMaking.<br />
<br />
Enjoy !</p>
</div>
<div class="index_article_dr">
 <p class="infos_article">par Zanton, le 07/07/2005</p>
 <img class="index_article_dr" src="./img/icones/General.png" width="200" height="100" border="0" alt="General" align="right">
</div>

Reply

Marsh Posté le 26-07-2005 à 14:08:03    

Onesque a écrit :

Un conteneur qui englobe ton champ texte et ton champ image, que tu répètes pour chaque nouvel item, ca ferait pas l'affaire?


J'ai essayé mais ça n'a rien changé.

Reply

Marsh Posté le 26-07-2005 à 14:11:12    

Pour chacun de tes blocs, tu crées un conteneur. Dans le conteneur, deux div cote à cote, à la même hauteur.
 
Puis tu refermes ton conteneur, t'en ouvres un autre, et tu recommences.
 
edit : suite à ton post du dessus : si, ca doit marcher, c'est sûr. C'est dans ta feuille de style que ca doit pas aller alors


Message édité par Onesque le 26-07-2005 à 14:11:59
Reply

Marsh Posté le 26-07-2005 à 14:16:18    

Bon, je suis un boulet, il manquait un </div> dans mon conteneur global. Merci pour votre aide :)

Reply

Sujets relatifs:

Leave a Replay

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