28172 sujets

CSS et mise en forme, CSS3

Bonsoir à tous,

Je rencontre un problème pour mettre en place un div qui sera extensible verticalement en fonction du contenu qu'il y aura dedans.

Lorsque j'ajoute du contenu afin d'avoir un étirement vertical du DIV "contenu_page"
le contenu est bien présent mais il n'y a pas d'étirement du DIV

aperçu du bug en image:

upload/13732-apercubug.jpg

voici un aperçu du html:
[code=html]
<div id="contenu">
      <div id="contenu_page">
        <div id="zone_gauche_contenu_page"><img src="images/barre_titre.jpg" alt="titre" width="491" height="37" /><br />
          <table width="155" border="0" cellpadding="0" class="td_actualites">
            <tr class="td_actualites_ligne">
              <td class="td_actualites_ligne"><div align="left">
                <pre class="titre_actu" id="line16">Ajout d’une réalisation</pre>
              </div></td>
              <td><div align="right">
                <pre class="H1" id="line">Le 20 Octobre 2009</pre>
              </div></td>
            </tr>
            <tr>
              <td colspan="2" class="H1">Circa hos dies Lollianus primae lanuginis adulescens, Lampadi filius ex praefecto, exploratius causam Maximino spectante, convictus codicem noxiarum artium nondum per aetatem firmato consilio descripsisse, exulque mittendus, ut sperabatur, patris inpulsu provocavit ad principem, et iussus ad eius comitatum duci, de fumo, ut aiunt, in flammam traditus Phalangio Baeticae consulari cecidit funesti carnificis manu</td>
            </tr>
          </table>
</div>


Un aperçu du CSS
[/code]

#contenu{


	background-image:url(../images/bg_page.png);
	background-repeat:repeat-y;
	width:978px;
        height:auto;
	margin-top:0px;
	min-height:400px;
	}
	
	#contenu_page{
	
		width:703px;

		margin-top:0px;
		margin-left:-5px;
		min-height:400px;
		}
		
		#zone_gauche_contenu_page{
		
			float:left;
			width:405px;
			height:auto;
			margin-left:15px;
			}
			
		#zone_droite_contenu_page{
		
			width:150px;
			height:auto;
			margin-left:70%;
			}

Modifié par le banban (31 Oct 2009 - 18:36)
Bonjour,

Je vois plusieurs aberrations dans le code que tu nous montre :

* Les tableaux de mise en page n'ont pas lieu d'être ici. Pour réaliser deux colonnes de même hauteur, il est préférable d'utiliser la technique des colonnes factices.

* Quel est l'intérêt d'avoir une classe H1 alors qu'il existe les éléments Hn pour baliser les titres ?

Pour réaliser ce que tu cherche à faire, le mieux serait de te tourner vers les Gabarits de mise en page de Florent, le gabarit 5, notamment, devrait te convenir.
merci pour ton aide. J'ai quand même du mal à comprendre la solution au problème mais je cherche à la résoudre avec la solution que tu me propose.