J'intercale un diaporama entre deux blocs au dessus et deux blocs en dessous.
J'ai un grand espace avec les blocs du dessus que je n'arrive pas à expliquer.
Merci de votre aide
Html :
Code : Tout sélectionner
<body onload="tourne();">
<div id="global">
<?php
$pageName = "Services";
include ("librairie/templates/haut_image.php");
?>
<div id="centre">
<?php
include ("librairie/templates/menu_image.php");
?>
<div id="contenu">
<div id="left_up">
<h2>Nous photographions et filmons vos actions de communication tant au niveau interne qu'externe (assemblées, séminaires, club utilisateurs, incentive ...) </h2>
</div>
<div id="right_up">
<h2>Vos portraits de qualité sont effectués soit dans notre studio <a class= "rougegras" href="Studio.php" > CQFD Prod </a>, soit dans votre société avec notre studio mobile pour enrichir vos plaquettes commerciales, rapports annuels, sites web ...</h2>
</div>
<div id="diapo">
<table cellspacing="0" cellpadding="0" >
<!-- Photos -->
<tr >
<td><img id="composite" alt="Composite" src=""/></td>
</tr>
</table>
</div><!-- #diapo -->
<div id="left_down">
<h2>Vous disposez gràce à notre stock photos de plus de 10 000 photos, de visuels pour tous vos supports de communication.</h2>
</div>
<div id="right_down">
<h2>CQFD Image réalise tout type de film (films institutionnels, films documentaires, films évènementiels)</h2>
</div>
</div><!-- #contenu -->
</div><!-- #centre -->
<?php
include ("librairie/templates/bas_image.php");
?>
</div><!-- #global -->
</body>
</html>Code : Tout sélectionner
/* Bloc central contenant #navigation et #contenu */
#centre {
background: url(../icones/fond.png) repeat-y; /* Permet d'avoir les deux commonnes de même hauteur */
width: 100%; /* Le overflow:hidden crée un contexte de formatage qui vient contenir les
flottants. Le width:100% a le même rôle, mais uniquement pour Internet
Explorer 6 (utilisation du HasLayout) */
overflow: hidden; /*cf ci-dessus */
top: 200px;
}
/* Menu de navigation */
#navigation {
width: 180px;
float: left;
color: #990000;
}
#navigation ul {
margin: 0;
padding: 20px 10px 20px 10px;
list-style: none;
}
#navigation a {
display: block;
height: 1%; /* Correction d'un bug d'Internet Explorer 6 */
padding: 6px 10px 6px 10px;
line-height: 1.5;
font-size: 1.3em;
color: #990000;
text-decoration: none;
}
#navigation a:hover {
text-decoration: underline;
}
/* Contenu principal */
#contenu {
margin-left:180px;
/* Les éléments flottants ne repoussent pas les blocs, mais repoussent
uniquement leur contenu. Pour que notre bloc de contenu principal forme
une colonne distincte du menu, on lui donne donc une marge à gauche de
200px (180 + 20) .*/
}
#contenu h1{
color:#464445;
font-family: Century Gothic;
font-size: 25px;
line-height: 26px;
padding: 20px 10px 20px 10px;
text-decoration: none;
}
#contenu h2{
color:black;
font-family: Century Gothic;
font-size: 17px;
line-height: 18px;
padding-top: 5px;
padding-left: 5px;
padding-right: 5px;
text-decoration: none;
}
#contenu a {
color: #990000;
}
#contenu a:hover {
text-decoration: underline;
}
#contenu strong {
color: #181A12;
}
#contenu p, #contenu li {
line-height: 1.0;
color:black;
}
/* Spécifique aux Pages Services Réalisations et Références ??? */
#left_up {
float: left;
left:0px;
width: 400px;
margin-top: 10px;
margin-right:20px;
}
#left_up ul {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
}
#left_up li {
height: 15px;
text-align:center;
color: #000000;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 15px;
list-style: square;
}
#right_up {
position:relative;
float: left;
width: 400px;
margin-top: 10px;
}
#left_down {
float: left;
left:0px;
width: 400px;
}
#right_down {
float: left;
width: 400px;
}
#left_up h1 {
font-size:25px;
color :black;
}
#left_up h2 {
font-size:20px;
color :black;
text-decoration: none;
}
#left_up h3 {
font-size:18px;
color :black;
}
#right_up h1 {
font-size:25px;
color :black;
}
#right_up h2 {
font-size:20px;
color :black;
text-decoration: none;
}
#right_up h3 {
font-size:18px;
color :black;
}
#left_down h1 {
font-size:25px;
color :black;
}
#left_down h2 {
font-size:20px;
color :black;
text-decoration: none;
}
#left_down h3 {
font-size:18px;
color :black;
}
#right_down h1 {
font-size:25px;
color :black;
}
#right_down h2 {
font-size:20px;
color :black;
text-decoration: none;
}
#right_down h3 {
font-size:18px;
color :black;
}
/* Spécifique à la Page Services */
#diapo {
clear:both; /* Evite le chevauchement sur Firefox et Safari */
width: 300px;
height:300px;
margin-left:auto;
margin-right:auto;
}
#diapo table {
border:0;
}
#diapo img {
}