28172 sujets

CSS et mise en forme, CSS3

Centrer site web dans tous les navigateurs

Bonjour,

Je débute en CSS et je bloque sur un petit truc très important mais qui me rend dingue.
Je souhaiterais que toutes les pages de mon site soit centrées pour tous les navigateurs mais
je ne comprends pas bien la manip à faire dans le code CSS.

Si vous avez la gentillesse de lire ces quelques lignes de codes et de m'aiguiller vous ferez mon bonheur!
Merci

<!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><meta name="google-site-verification" content="rJTD3zjavj4AKD0IxpaIjQ5d4071jauwnIir7CeRwEQ" />
<title>Miam</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" align="center">
<div id="conteneur">
<!-- Save for Web Slices (site.psd - Slices: index_01, index_02, index_03, index_04, index_05, index_06, index_07, index_08, index_09) -->

<table id="Tableau_01" width="2000" height="950" border="0" cellpadding="0" cellspacing="0">
	 <tr>
		<td colspan="7"><a href="http://www.miamrestaurant.fr">
			<img src="http://www.miamrestaurant.fr/index_01.jpg" width="2000" height="100" alt=""></a></td>
	</tr>
	<tr>
		<td>
			<img src="http://www.miamrestaurant.fr/index_02.jpg" width="585" height="31" alt=""></td>
		<td><a href="http://www.miamrestaurant.fr/menu">
			<img src="http://www.miamrestaurant.fr/index_03.jpg" width="107" height="31" alt=""></a></td>
		<td>
			<img src="http://www.miamrestaurant.fr/index_04.jpg" width="191" height="31" alt=""></td>
		<td>
			<img src="http://www.miamrestaurant.fr/index_05.jpg" width="200" height="31" alt=""></td>
		<td>
			<img src="http://www.miamrestaurant.fr/index_06.jpg" width="125" height="31" alt=""></td>
		<td><a href="http://www.miamrestaurant.fr/contacts">
			<img src="http://www.miamrestaurant.fr/menu_07.jpg" width="162" height="31" alt=""></a></td>
		<td>
			<img src="http://www.miamrestaurant.fr/index_08.jpg" width="630" height="31" alt=""></td>
	</tr>
	<tr>
		<td colspan="7">
			<img src="http://www.miamrestaurant.fr/index_09.jpg" width="2000" height="819" alt=""></td>
	</tr>
</table>
</div>

<!-- End Save for Web Slices -->
</body>
</html>


Et le code CSS


@charset "UTF-8";
  body
{
text-align: center; 
}
#conteneur { 

margin-left: auto; 
margin-right: auto;
text-align: left; 
width: 50%; }
Modifié par Steeve0206 (17 Mar 2015 - 18:31)
Bonjour Steve et bienvenue sur le forum.

Sur le principe ton code fonctionne, i.e. ton conteneur est bien centré.

MAIS, vu qu'il y a dans ce conteneur une table de 2000px (!) de large, elle ne tient dans aucun écran (sauf quelques monstres de la nature Smiley lol )

Donc il faut commencer par virer cette largeur.
Bonjour Solidsnake et merci pour ton retour.

J'ai mis 2000 px car je veux que mon site soit dispo aussi bien sur les très grands écrans que sur un ipad.
J'ai fais en sorte de centrer toutes les infos sur toutes les pages afin de garder les infos principales meme si la largeur de l'écran se réduit.

Le problème est qu'à chaque fois que je charge mon image sur un écran 13" ou 15" le site ne s'affiche pas centrer je dois à chaque fois scroller horizontalement pour le centrer manuellement.

J'ai besoin d'avoir les bonnes infos CSS pour que le centrage horizontale se fasse automatiquement sur tous les navigateurs. Smiley smile

Merci pour ton aide
Steeve0206 a écrit :
J'ai mis 2000 px car je veux que mon site soit dispo aussi bien sur les très grands écrans que sur un ipad.

Oui, mais ça ne fonctionne pas comme ça le responsive web design, hélas.

Quand on lit ton code avec ton conteneur de 50% de large, et à l'intérieur ta table de 2000px, cela veut dire, qu'il faut AU MOINS un écran de 4000px de large pour le voir en entier et centré.

Le soucis, ici, est que tu utilises des pratiques qui n'ont plus lieu depuis une dizaine d'années (au bas mot), comme l'utilisation de table et d'attribut xhtml pour du positionnement... Il va falloir revoir les bases si tu veux arriver à ce que tu souhaites.

Tu pourras prendre exemple en partie sur le site que tu as mis en signature, tu ne verras pas beaucoup de <table> Smiley cligne
Sujet clos
Aller à