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

  FORUM HardWare.fr
  Programmation
  HTML/CSS

  mise en page avec des <div>

 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

mise en page avec des <div>

n°1159312
zanton
Posté le 25-07-2005 à 18:27:40  profilanswer
 

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 ?

mood
Publicité
Posté le 25-07-2005 à 18:27:40  profilanswer
 

n°1159493
kirua_sama
Learn sciences with senses
Posté le 25-07-2005 à 20:42:52  profilanswer
 

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

n°1160182
zanton
Posté le 26-07-2005 à 13:43:03  profilanswer
 

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.

n°1160187
Onesque
Derelict Otter
Posté le 26-07-2005 à 13:44:49  profilanswer
 

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?

n°1160229
zanton
Posté le 26-07-2005 à 14:07:10  profilanswer
 

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>

n°1160230
zanton
Posté le 26-07-2005 à 14:08:03  profilanswer
 

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é.

n°1160235
Onesque
Derelict Otter
Posté le 26-07-2005 à 14:11:12  profilanswer
 

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
n°1160244
zanton
Posté le 26-07-2005 à 14:16:18  profilanswer
 

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


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

  mise en page avec des <div>

 

Sujets relatifs
Problème de mise en page sous Internet Explorerplease, help pour mise en page CSS....
[résolu] Pb d'impression : perte de la mise en page et des couleurs[vb.net] Génération et mise en page document WORD
textarea, mise en page?...Enregistrement et mise en page .doc
[RESOLU][Javascript] Mise en page compliquée :)mise en page dans liste déroulante
Vos Méthodes pour faire une intégration graphique et mise en Page CSSmise en page CSS sous IE
Plus de sujets relatifs à : mise en page avec des <div>


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