Version complète: sur le forum Webmaster Hub : probleme de mise en page CSS
Webmaster Hub > Création et exploitation de Sites Internet > Les langages du Net > (X)HTML et CSS
Ex-floodeur
dimanche 10 avril 2005 à 10:00
Voila dans cette page,

http://www.animecdz.com/css/index2.php?cdz=2&id=335

le texte déborde du cadre qui forme le design de l'artcile. Je ne parviens pas à corriger ce détail.

Voici le CSS associé à ce tableau et son code source :

CODE
<div class="cadregeneral">
  <div class="topgdcadre"><div class="topgdcadreleft"><div class="topgdcadreright"><? echo $r->titre ?></div></div></div>
  <div class="contentgdcadre"><div class="contentgdcadreleft"><div class="contentgdcadreright"><span class="comment">Postée par <a class="comment" href="http://forum.animecdz.com/membre-<? echo $r->id ?>.html"><? echo $r->name ?></a>
Texte de la news
</div></div></div>
  <div class="bottomgdcadre"><div class="bottomgdcadreleft"><div class="bottomgdcadreright"><!--vide//--></div></div></div>


et le CSS :

CODE
.gdcadregeneral { float: left; }
.topgdcadre, .topgdcadre DIV {height:27px; width:600px;color:#FFFFFF;}
.topgdcadre {background:url(http://www.animecdz.com/css/images/CityHunter-tableau_02.jpg) repeat-x;}
.topgdcadre DIV {width:600px;}
.topgdcadreleft{background:url(http://www.animecdz.com/css/images/CityHunter-tableau_01.jpg) left no-repeat;}
.topgdcadreright{
  text-align:center;
  line-height:28px;
  font-weight:bold;
  background:url(http://www.animecdz.com/css/images/CityHunter-tableau_03.jpg) right no-repeat;
}
.contentgdcadre,.contentgdcadre DIV {width:600px;}html>body .contentgdcadre,.contentgdcadre DIV {width:585px;}
.contentgdcadre {background:url(http://www.animecdz.com/css/images/CityHunter-tableau_05.jpg);}
.contentgdcadreleft {background:url(http://www.animecdz.com/css/images/CityHunter-tableau_04.jpg) left repeat-y;}
.contentgdcadreright {
  padding-left:15px;
  background:url(http://www.animecdz.com/css/images/CityHunter-tableau_06.jpg) right repeat-y;
}
.bottomgdcadre,.bottomgdcadre DIV {height:10px;width:600px;}
.bottomgdcadre {background:url(http://www.animecdz.com/css/images/CityHunter-tableau_08.jpg) bottom repeat-x;}
.bottomgdcadreleft {background:url(http://www.animecdz.com/css/images/CityHunter-tableau_07.jpg) left no-repeat;}
.bottomgdcadreright {background:url(http://www.animecdz.com/css/images/CityHunter-tableau_09.jpg) right no-repeat;}
MarvinLeRouge
dimanche 10 avril 2005 à 12:33
Salut,

Si tu prends Firefox avec la Web Developer Toolbar, tu remarqueras en entourant les éléments de type bloc" que le bloc contenant ton texte n'a pas de padding, et dépasse ton cadre visuel à droite.
Tu dois pouvoir gérer ça en ajoutant du margin ou du padding à droite sur le bloc contenant ton texte, pour respectivement écarter ce bloc de son parent ou le texte dubord du bloc.
Ex-floodeur
dimanche 10 avril 2005 à 14:24
Merci bien !
Ceci est une version "bas débit" de notre forum. Pour voir la version complète avec plus d'information, la mise en page et les images, veuillez cliquer ici.