28173 sujets

CSS et mise en forme, CSS3

[RESOLU]Centrer un tableau dans un div

Salut à tous.
J'ai un problème d'alignement dans la page d'accueil du site sur lequel je bosse.
J'ai créé un div de 1020px pour mettre une ombre autour du contenu.
Le contenu, c'est un tableau de 1000px. Le problème, c'est que je ne parviens pas à centrer le tableau dans le div.

DOM de la page :
<body>
<div id="ombre">

<table cellspacing="0" cellpadding="0" class="site">
  <tr>
    <td id="bann" colspan="3" onclick="document.location='http://mouaetmoua.free.fr/'"></td>
  </tr>
  <tr>
    <td id="menu_g">
		<div class="elem_menu">
			<img src="./images/download.png" alt="" />
			
			<ul>

				<li><a href="?p=1&amp;t=1" class="lien1">Delphi</a></li>
				<li><a href="?p=1&amp;t=2" class="lien1">C/C++</a></li>
			</ul>
					
		</div>
		<img src="./images/membr_titre.png" alt="" />
		<div class="elem_menu">
<center>


et le CSS :
/*Style  Mou&Moua.free.fr */


/*-----------------------------------------------------------------------------------------------------------------------------------------------*/
/*Style du corps de la page*/
/*-----------------------------------------------------------------------------------------------------------------------------------------------*/
body{
	font-family: verdana, arial, sans-serif;
	font-size: small;
	width: 1020px;
	margin-left: auto;
	margin-right: auto;
	margin-top: 0px;
	margin-bottom: 20px;
	background-image: url(../images/bg.jpg);
}

/*-----------------------------------------------------------------------------------------------------------------------------------------------*/
/*Styles des tableaux et cellules */
/*-----------------------------------------------------------------------------------------------------------------------------------------------*/
table .site{
	width: 1000px;
	margin: auto;
}

table.membres{
	width: 100%;
	margin: auto;
}

tr.membres{
	border-bottom: 1px solid #363474;
}

td{
	width: 180px;
	margin: 0px;
}

tr{
	/*margin: 0px;*/
}


/*-----------------------------------------------------------------------------------------------------------------------------------------------*/
/*Styles des blocs de structure*/
/*-----------------------------------------------------------------------------------------------------------------------------------------------*/

#ombre{
	width: 1020px;
	height: 100%;
	background-image: url("../images/ombre.png");
	background-repeat: repeat-y;
	margin: auto;
}

#bann{
	width: 1000px;
	height: 120px;
	background-image: url("../images/bann.png");
	cursor: pointer;
}

#menu_g{
	width: 180px;
	height: 100%;
	background-color: #E9E9E9;
	vertical-align: top;
}


#corps{
	width: 640px;
	background-color: #FFFFFF;
	vertical-align: top;
}

#menu_d{
	width: 180px;
	height: 100%;
	background-color: #E9E9E9;
	vertical-align: top;
}

#footer{
	width: 1000px;
	height: 80px;
	background-color: #FFFFFF;
	font-family:verdana, arial, sans-serif;
	font-size: x-small;
	background-image: url("../images/degrade_footer.png");
	background-repeat: repeat-x;
}


/*-----------------------------------------------------------------------------------------------------------------------------------------------*/
/*Style de cadres de news et styles de texte*/
/*-----------------------------------------------------------------------------------------------------------------------------------------------*/
.elem_menu{
	width: 180px;
	/*height: 100%;*/
}

.infoBox{
	width: 598px;
	border: 1px dashed #363474;/*Bordure en pointillées*/
	margin-left: 20px;
	margin-right: 20px;/*Marge extérieure de 20 pixels par rapport aux autres éléments*/
	margin-bottom: 20px;
}

.infoBoxHeader{
	height: 25px;
	background-image: url("../images/degrade.png");
}

/*Titres de news*/
.infoBoxHeader h2{
	font-family: impact, sans-serif;
	font-weight: normal;
	font-size: 20px;
	color: #FF9000;
	text-indent: 40px;
	display: inline;
}

/*Lettrine en début de news*/
p:first-letter{
	float: left;
	margin-right: 5px;
	font-family: impact, sans-serif;
	font-size: 3em;
	color: #FF9000;
}

/*Corps de news*/
p{
	width: 560px;
	padding: 20px;
}

.membres{
	width: 100%;
	background-color: white;
	color: black;
}

/*-----------------------------------------------------------------------------------------------------------------------------------------------*/
/*Style pour les images de news - Image cliquable*/
/*-----------------------------------------------------------------------------------------------------------------------------------------------*/

/*Style de l'image*/
div.image{
	float: right;
	margin: 20px;
	border: 1px solid #E9E9E9;
	max-width: 200px;
	max-height: 200px;
	text-align: right;
}

/*Rend l'image cliquable*/
div.image a{
	display: block;
	width: 100%; height: 100%;
}

/*Supprime le contour*/
a img
{
   border: none;  
} 


/*-----------------------------------------------------------------------------------------------------------------------------------------------*/
/*Style pour les formulaire de LOGIN et d'INSCRIPTION*/
/*-----------------------------------------------------------------------------------------------------------------------------------------------*/
/*Login*/
#log_form{
	display: none;
	background-color: #E9E9E9;
	border: 1px solid #000000;
	position: absolute;
}
#log_div{
	width: 250px;
}

/*Inscription*/
#inscr_form{
	display: none;
	background-color: #E9E9E9;
	border: 1px solid #000000;
	position: absolute;
}
#inscr_div{
	width: 250px;
}


/*-----------------------------------------------------------------------------------------------------------------------------------------------*/
/*Style divers*/
/*-----------------------------------------------------------------------------------------------------------------------------------------------*/

.pub{
	margin-left: 10px;
}

.click{
	cursor: pointer;
}

a.lien1{
	color: #0000AA;
	text-decoration: none;
	cursor: pointer;
}
a:hover.lien1{
	color: #EF3434;
	text-decoration: overline underline;
}

label.profil{
	width: 200px;
	font-size: 9px;
	float: left;
}


2 jours que je suis dessus, et je comprends toujours pas. J'ai essayé tout ce que je sais faire, margin: auto, margin-left: 10px, position: relative; left: -5px, enfin, tout ce que je connais, quoi Smiley sweatdrop ...

Je met une image, c'est plus parlant (et surtout c'est pas mon site et il y a un code sur la première page Smiley cligne )

http://img78.imageshack.us/img78/3125/sitemh4.th.jpg

Merci d'avance pour vos réponses et sans doute à bientôt car votre site est une mine d'or pour les débutants comme moi. Smiley biggrin
Modifié par floutchito (26 Apr 2007 - 11:56)
Salut,

pourquoi ne pas mettre ton tableau dans un div de 1000px a qui tu applique le margin:auto.

ou alors le machin que jadis j'utilisais 1000 fois par page mais qui je crois est mal vu maintenant. mettre ton tableau dans <div align="center"> ...ton tableau ...</div>


voila c'etait pour faire avancer le schimillilli hips... Smiley langue

pascal
CPascal a écrit :
Salut,

pourquoi ne pas mettre ton tableau dans un div de 1000px a qui tu applique le margin:auto.

ou alors le machin que jadis j'utilisais 1000 fois par page mais qui je crois est mal vu maintenant. mettre ton tableau dans <div align="center"> ...ton tableau ...</div>


voila c'etait pour faire avancer le schimillilli hips... Smiley langue

pascal


Je vais essayer pour le div, merci. Pa contre, pour l'align="center", j'y ai pensé, mais le propriétaire du site veut certifier son site XHTML 1.0, donc align="center" interdit! Mais merci quand même. Je teste et je vous tiens au jus.
Merci Pascal! En fait, tu n'as pas résolu mon pb, mais tu m'as permis de trouver! La classe "table.site{" comportait tout simplement un espace entre table et .site !!! Smiley biggol Bravo la syntaxe... Smiley sweatdrop

Plus qu'une chose à dire: I'll be back. Smiley lol Ciao!

Je met un [résolu] ?
Sujet clos
Aller à