28172 sujets

CSS et mise en forme, CSS3

Trois div extensibles simultanément

bonjour
j'ai un tableau d'une ligne et 3 colonnes, j'ai mis dans la cellule de gauche un menu, celle du centre mes éléments et celle de droite un autre menu.
Les 3 colonnes descendent simultanément lorsque j'intègre mes éléments, dans n'importe quelles colonnes avec un background, c'est parfait.
voir l'exemple: http://galaxyweb.free.fr/news/
Je voudrais la même chose en utilisant les div en css, est-ce possible.
Je n'ai pas encore trouvé la solution.
Merci de votre réponse.
Bonjour,

Pour que tes menus latéraux prennent toutes la hauteur possible tu peux faire comme ceci :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>news</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="Description" content="" />
<meta name="Keywords" lang="fr" content="" />
<meta name="Identifier-url" content="" />
<meta name="robots" content="none" />
<meta name="Reply-to" content="" />
<meta name="revisit-after" content="5" />
<meta name="Publisher" content="" />
<style>
// À intégrer à la feuille style.css
div.tableau {
	width:100%;
	height:100%;
display:table;
border-spacing:2px;
border-collapse:separate;
margin-top:0;
margin-bottom:0;
-moz-box-sizing:border-box;
text-indent:0;
}

div.tableau[align=left] {
float:left;
}

div.tableau[align=right] {
float:right;
text-align:start;
}

div.tableau[rules]:not([rules=none]) {
border-collapse:collapse;
}

div.tableau[align=center] > caption {
margin-left:auto;
margin-right:auto;
}

div.tableau[align=center] > caption[align=left] {
margin-right:0;
}

div.tableau[align=center] > caption[align=right] {
margin-left:0;
}

div.tableau_ligne {
display:table-row;
vertical-align:inherit;
}

div.tableau > div.tableau_ligne {
vertical-align:middle;
}

div.tableau_cellule {
background-color:#0784c7;
border:1px solid white;
display:table-cell;
vertical-align:inherit;
text-align:inherit;
padding:1px;
}

div.tableau_ligne > form:-moz-is-html,tbody > form:-moz-is-html,thead > form:-moz-is-html,tfoot > form:-moz-is-html,div.tableau > form:-moz-is-html {
display:none!important;
}
</style>
<link rel="stylesheet" href="http://galaxyweb.free.fr/news/style.css" type="text/css" />
</head>
<body>

<div id="conteneur1">
<!-- Début div de la bannière -->
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<div id="banniere">
</div>
<!-- Fin div de la bannière -->
</div>
<div id="conteneur2">
<!-- Début div féfilement et menu haut -->
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<div id="espace">
</div>
<div id="defilement">
<marquee class="scroller" behavior="scroll" direction="left" width="100%" height="19" scrollamount="3" scrolldelay="0" onmouseover="this.stop()" onmouseout="this.start()">
            <div align="center">

              &nbsp;Bienvenue sur XenaNews en création... 
               </div>
            </marquee>

</div>
<div id="espace">
</div>
<div id="menu_haut">
<div id="icone">

<a href="#">
 <img src="http://galaxyweb.free.fr/news/images/accueil.png"  name="edito" width="95" height="35" border="0"  id="edito" alt="" 
 onMouseOver="this.src='http://galaxyweb.free.fr/news/images/accueil1.png'" onMouseOut="this.src='http://galaxyweb.free.fr/news/images/accueil.png'" />  </a>

 <a href="#">
 <img src="http://galaxyweb.free.fr/news/images/news.png" class="img_icone" name="news" width="95" height="35" border="0"  id="news" alt="" 
 onMouseOver="this.src='http://galaxyweb.free.fr/news/images/news1.png'" onMouseOut="this.src='http://galaxyweb.free.fr/news/images/news.png'" />  </a>
<a href="#">
 <img src="http://galaxyweb.free.fr/news/images/livredor.png" class="img_icone" name="livredor" width="95" height="35" border="0"  id="livredor" alt="" 
 onMouseOver="this.src='http://galaxyweb.free.fr/news/images/livredor1.png'" onMouseOut="this.src='http://galaxyweb.free.fr/news/images/livredor.png'" />  </a>
 <a href="#">
 <img src="http://galaxyweb.free.fr/news/images/forum.png" class="img_icone" name="forum" width="95" height="35" border="0"  id="forum" alt="" 
 onMouseOver="this.src='http://galaxyweb.free.fr/news/images/forum1.png'" onMouseOut="this.src='http://galaxyweb.free.fr/news/images/forum.png'" />  </a>
  <a href="#">
 <img src="http://galaxyweb.free.fr/news/images/contact.png" class="img_icone" name="contact" width="95" height="35" border="0"  id="contact" alt="" 
 onMouseOver="this.src='http://galaxyweb.free.fr/news/images/contact1.png'" onMouseOut="this.src='http://galaxyweb.free.fr/news/images/contact.png'" />  </a>

  </div> 
</div> <!-- Fin div féfilement et menu haut --> 
<!-- Début div menu gauche et droit et centre -->
<div id="content"> 
<div class="tableau">
 <div class="tableau_ligne">
<!-- Menu gauche -->
<div class="tableau_cellule" width="13%" class="td_menu"><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<div id="menu_gauche"> 
MENU GAUCHE
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>

  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
</div></div>
<!-- FIN Menu gauche -->  
<div class="tableau_cellule" width="75%"><div align="center"><div id="centre">

<div id="img_bienvenue">
<div align="center"><img src="http://galaxyweb.free.fr/news/images/xenanoel.jpg" name="xenanoel" width="500" height="312" id="xenanoel" alt="" /></div> 
<br />
<img src="http://galaxyweb.free.fr/news/images/div.png" name="div" width="600" height="1" id="div" alt="" />
<p align="center">Vidéo du mois</p>  
<p><img src="http://galaxyweb.free.fr/news/images/div.png" name="div" width="600" height="1" id="div" alt="" /></p>

<object width="480" height="385"><param name="movie" value="http://www.youtube.com/v/XAYc_hUooCU?fs=1&amp;hl=fr_FR"><param name="allowFullScreen" value="true"><param name="allowscriptaccess" value="always"><embed src="http://www.youtube.com/v/XAYc_hUooCU?fs=1&amp;hl=fr_FR" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="480" height="385"></object>
<p><img src="http://galaxyweb.free.fr/news/images/div.png" name="div" width="600" height="1" id="div" alt="" /></p>
<p>Les derni&egrave;res news</p>
<img src="http://galaxyweb.free.fr/news/images/div.png" name="div" width="600" height="1" id="div" alt="" />

<p>&nbsp;</p>
<p>&nbsp;</p>

<p>&nbsp;</p>
<!-- Fin div menu gauche et droit et centre -->
</div></div></div></div>
<!-- Menu droit -->
<div class="tableau_cellule" width="12%"class="td_menu"><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<div id="menu_droit"> 
MENU DROIT
<p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>

  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
</div></div>
<!-- FIN Menu droit -->     
</div>
</div>
</div>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<div id="footer">

<div id="compteur">
	<script type="text/javascript">
	<!--
	var CollapsiblePanel3 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel3");//-->
	</script>
Visiteurs total : 7343 <br />Aujourd'hui : 38 <br />Visiteurs connectés : 3
</div>

<br />
<div id="copyright">
&copy; 2009 XenaNews<br />
Tout le contenu de ce site est sous la propriété de XenaNews.<br />
Toute reproduction ou diffusion ailleurs que sur notre site web est interdite sous peine de poursuites.

</div></div></div>
</body>
</html>


Je me suis grandement inspiré de la css par défaut de firefox. Il restera à régler quelques marges.
Modifié par adrien881 (03 Jan 2011 - 13:29)
Sujet clos
Aller à