28172 sujets

CSS et mise en forme, CSS3

Bonjour a tous, j'étais deja venu sur le forum pour le meme probleme de centrage horizontale, le site est toujours coller en haut, j'ai pourtant mi la meme configuration, mais ca ne fonctionne pas.... Smiley decu


Je n'arrive pas a trouver mon erreur, si vous pouviez me donner votre avi... Smiley smile


<body>

        <!--
        Tableau pour centrer le site du au beug CSS
        -->
        
		<table id="page-table"><tr><td id="page-td">

<div id="conteneur">


<div id="actu">


 <div id="img">
       
         
</div>

</div>

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

<div id="menu_droit"></div>


<div id="contenu">
        
			<!--parametrage de l'iframe -->

            <iframe name="contenu" src="pages/association.html" marginheight="0" marginwidth="0" width="460" height="470" scrolling="auto" frameborder="0">accueil</iframe>

</div>


<div id="bas_page"></div>
 
</div>

            </td></tr></table>


</body>



Mon CSS:


/*intitialisation des margin et du padding a 0, */

*{
	margin : 0px;
	padding:0px;
}

 

body{

	font-family: "Times New Roman", Times, serif; /*Initialiser une police par default*/
	height:100%;/*adapter la hauteur et la largeur a la taille de l'écran*/
	width: 100%;
	background-color: #ffffff;/*coleur de fond en Blanc*/
	
}

/*------------ Les 3 étapes suivantes sont pour centrer le tableau de la page */

.centrer {
  margin-left: auto;/*marge exterieur qui s'adapte automatiquement*/
  margin-right: auto;
  width : 810px;/*largeur du conteneur*/
  text-align : left;  /* pour résoudre le bug de centrage de IE */
}


#page-table {
	height: 100%; /* hauteur et largeur du tableau qui s'adapte a celle du conteneur*/
	width: 100%;
	border-collapse: collapse; /*Met les bord des cellules en commun*/
	/*text-align: center; alligner le texte au centre*/
}

#page-td {
	height: 100%; /* hauteur qui s'adapte*/
	padding: 0; /* pas de marge interieur*/
	vertical-align: middle; /*alignement verticale centrer*/
}

/* -----------  Div principal (ou conteneur)*/

#conteneur{/*position du conteneur*/
	position: relative;
	margin-left: auto;
	margin-right: auto;
	/*text-align: left;*/
	width: 810px;
	height: 610px;
	
}

#contenu{/* position du contenu*/
	position: absolute;
	margin-left: 280px;
	margin-bottom: 0px;
	margin-right: 0px;
	margin-top: 0px;
	top: 90px;
	width: 460px;
	height: 470px;
	
}




/*-------------Div actu */

#actu{
	width: 280px; /*specifier sa taille*/
	height: 610px;
	background-image: url(../images/menu_gauche.jpg);/* image de fond*/
	 
} 

/*-------------------Div du menu du haut */

#menu_haut{
	position: absolute; /* positionner la div sur la page*/
	top: 0px;
	width: 460px;
	height: 90px;
	right: 70px;
	background-image: url(../images/menu_haut.jpg);/*image de fond*/
}


#menu_droit{
	position: absolute;/*idem que le meunu haut*/
	top: 0px;
	right:0px;
	width: 70px;
	height: 610px;
	background-image: url(../images/menu_droit.jpg);
	
}


#bas_page{/*positionnement du bas de page*/
	position: absolute;
	right: 70px;
	top: 560px;
	width: 460px;
	height: 50px;
	background-image: url(../images/bas.jpg);	
}


#titre{		/*positionnement et mise en forme du titre dinamique dans l'affichage actualité*/
	text-align: center;
	white-space: normal;/*affichage normal du texte*/
	font-weight: bold;
	text-transform: uppercase; /*met les caracteres en majuscule*/
	margin-top: 40px;
	margin-left: 30px;
	margin-right: 70px;
    font-family: Verdana,Geneva, Arial, Helvetica, sans-serif;
    width: 180px;
    color: White;
}

#date{	/*positionnement et mise en forme de la date et lieux de l'affichage dinamique dans actualité*/
	text-align: center;
	text-transform: uppercase;
	font-size: 15px;
	white-space: normal;
	margin-top: 10px;
	margin-left: 30px;
	margin-right: 70px;
    font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
    width: 180px;
    color: White;
  
}



#resume{	/*positionnement et mise en forme du resume de l'affichage dinamique dans actualité*/
	text-align: center;
	word-spacing: -2px;	/*espacement entre les mots*/
   font-size: 11px;
	white-space: normal;
	margin-top: 15px;
   font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
   margin-left: 30px;
	margin-right: 70px;
	width: 180px;
   color: White;
  
}

#img{	/*positionnement et mise en forme du lien popup image de l'affichage dinamique dans actualité*/
	position: absolute; /* positionnement en dehors du flux pour qu'il ne bouge pas */
	text-align: right;
	word-spacing: -2px;
   font-size: 11px;
	top: 300px;
	margin-left: 30px;
	margin-right: 70px;
	width: 180px;
   font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
}



EDIT de Igor: attention à ne pas afficher d'images géantes qui déforment le forum. Merci d'utiliser le bouton "créer une miniature" lorsque vous chargez une image.




Merci d'avance!!! Smiley cligne
Modifié par Chat (11 Jun 2008 - 20:44)
Un .centrer mais pas d'élément portant cette class!

"probleme de centrage horizontale, le site est toujours coller en haut"
horizontal ou vertical?
Desoler pour l'image trop grande... Smiley cligne

C'est vrai que la class est atribué a personne...


J'ai reussi a recentrer mon site, merci pour votre aide!!! Smiley cligne