Positionnement Diaporama

par **Photographiquement Vôtre** » 12 déc. 2008, 20:46

Oui mais cela n'a aucun effet !!

par **guilt92** » 12 déc. 2008, 11:22

Bonjour,

As tu essayé de spécifier les margin-bottom pour left_up et right_up ?

Surtout pour les h2 qui par défaut ont une margin-bottom je pense qu'il faut la redéfinir à 0 si tu veux supprimer l'espace...

par **Photographiquement Vôtre** » 11 déc. 2008, 19:58

Bonsoir,

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"  >&nbsp;&nbsp; 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>

CSS :

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 {

}

Positionnement Diaporama

Répondre

Étendre la vue Revue du sujet : Positionnement Diaporama

Positionnement Diaporama