28172 sujets

CSS et mise en forme, CSS3

Margin:0 auto ne marche pas [RESOLU]

Bonjour,
j'essaie désépérement de centrer l'entête de la page web de mon forum que voici :
http://www.tutoriels-animes.com/phpBB2/index.php
j'ai mis le tout dans un div nommé entete, à qui j'ai donné un width de 980px, avec les margin:0 auto
mais l'entete n'est pas centrée.
Que puis-je faire ?
merci
le CSS:
#entete
{
width:980px;
margin:0 auto;
}

le html:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html dir="{S_CONTENT_DIRECTION}">
<head>
<meta http-equiv="Content-Type" content="text/html; charset={S_CONTENT_ENCODING}">
<meta http-equiv="Content-Style-Type" content="text/css">
<link rel="alternate" type="application/rss+xml" href="http://www.tutoriels-animes.com/rss.xml" title="L'actualité de Tutoriels Animés">
{META}
{NAV_LINKS}
<title>{SITENAME} :: {PAGE_TITLE}</title>
<link rel="stylesheet" href="templates/subSilver/{T_HEAD_STYLESHEET}" type="text/css">
<!-- BEGIN switch_enable_pm_popup -->
<script language="Javascript" type="text/javascript">
<!--
	if ( {PRIVATE_MESSAGE_NEW_FLAG} )
	{
		window.open('{U_PRIVATEMSGS_POPUP}', '_phpbbprivmsg', 'HEIGHT=225,resizable=yes,WIDTH=400');;
	}
//-->
</script>
<!-- END switch_enable_pm_popup -->
</head>
<body bgcolor="{T_BODY_BGCOLOR}" text="{T_BODY_TEXT}" link="{T_BODY_LINK}" vlink="{T_BODY_VLINK}">

<a name="top"></a>
</div>
	<div id="entete">
			<a href="../../../rss.xml" title="accéder au flux RSS"><img src="../../../photos/rss-forum.png" border="0" alt="RSS" style="float:right; margin-left:40px" /></a>
			<div id="courbes" style="float:right">						                
			</div>
			<script type="text/javascript"> var so = new SWFObject("animations/courbes.swf", "mymovie", "340", "60", "8", "#000000"); so.write("courbes");</script>
			<div id="banniere"></div>
			<ul id="menu">
				<li id="bouton-gauche"><a href="http://www.tutoriels-animes.com" title="Accueil">Accueil</a></li>
				<li class="bouton-milieu"><a href="traitement-video.html" title="Traitement Vidéo">Vidéo</a></li>
				<li class="bouton-milieu"><a href="traitement-audio.html" title="Traitement Audio">Audio</a></li>
				<li class="bouton-milieu"><a href="tutoriels-astuces-windows-xp-vista.html" title="Windows XP et Vista">Windows</a></li>
				<li class="bouton-milieu"><a href="tutoriels-astuces-internet.html" title="Internet et les réseaux">Internet et Réseaux</a></li>
				<li class="bouton-milieu"><a href="astuces.html" title="Astuces Diverses">Astuces Diverses</a></li>
				<li class="bouton-milieu"><a href="comment-ca-marche.html" title="Comment ça Marche">Comment ça Marche</a></li>
				<li class="bouton-milieu"><a href="lexique.html" title="Le lexique">Lexique</a></li>
				<li id="bouton-droit"><a href="phpBB2/index.php" title="Forum d'entraide">Forum</a></li>
			</ul>
			<div id="pub-sousmenu">
				<script type="text/javascript"><!--
					google_ad_client = "pub-8596297593242972";
					google_ad_width = 728;
					google_ad_height = 90;
					google_ad_format = "728x90_as";
					google_ad_type = "text";
					google_ad_channel = "";
					google_color_border = "000000";
					google_color_bg = "000000";
					google_color_link = "FFFFCC";
					google_color_text = "000000";
					google_color_url = "FFFFCC";
					//-->
				</script>
				<script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"></script>
			</div>
	</div>
<table width="100%" cellspacing="0" cellpadding="10" border="0" align="center"> 
	<tr>
		<td class="bodyline"><table width="100%" cellspacing="0" cellpadding="0" border="0">
			<tr> 
				<td><a href="{U_INDEX}"><img src="templates/subSilver/images/logo-forum.png" border="0" alt="{L_INDEX}" vspace="1" /></a></td>
				<td align="center" width="100%" valign="middle"><span class="maintitle">{SITENAME}</span><br /><span class="gen">{SITE_DESCRIPTION}<br />&nbsp; </span> 
					<table cellspacing="0" cellpadding="2" border="0">
						<tr> 
							<td align="center" valign="top" nowrap="nowrap"><span class="mainmenu">&nbsp;<a href="{U_FAQ}" class="mainmenu"><img src="templates/subSilver/images/icon_mini_faq.gif" width="12" height="13" border="0" alt="{L_FAQ}" hspace="3" />{L_FAQ}</a>&nbsp; &nbsp;<a href="{U_SEARCH}" class="mainmenu"><img src="templates/subSilver/images/icon_mini_search.gif" width="12" height="13" border="0" alt="{L_SEARCH}" hspace="3" />{L_SEARCH}</a>&nbsp; &nbsp;<a href="{U_MEMBERLIST}" class="mainmenu"><img src="templates/subSilver/images/icon_mini_members.gif" width="12" height="13" border="0" alt="{L_MEMBERLIST}" hspace="3" />{L_MEMBERLIST}</a>&nbsp; &nbsp;<a href="{U_GROUP_CP}" class="mainmenu"><img src="templates/subSilver/images/icon_mini_groups.gif" width="12" height="13" border="0" alt="{L_USERGROUPS}" hspace="3" />{L_USERGROUPS}</a>&nbsp; 
							<!-- BEGIN switch_user_logged_out -->
							&nbsp;<a href="{U_REGISTER}" class="mainmenu"><img src="templates/subSilver/images/icon_mini_register.gif" width="12" height="13" border="0" alt="{L_REGISTER}" hspace="3" />{L_REGISTER}</a>&nbsp;
							<!-- END switch_user_logged_out -->
							</span></td>
						</tr>
						<tr>
							<td height="25" align="center" valign="top" nowrap="nowrap"><span class="mainmenu">&nbsp;<a href="{U_PROFILE}" class="mainmenu"><img src="templates/subSilver/images/icon_mini_profile.gif" width="12" height="13" border="0" alt="{L_PROFILE}" hspace="3" />{L_PROFILE}</a>&nbsp; &nbsp;<a href="{U_PRIVATEMSGS}" class="mainmenu"><img src="templates/subSilver/images/icon_mini_message.gif" width="12" height="13" border="0" alt="{PRIVATE_MESSAGE_INFO}" hspace="3" />{PRIVATE_MESSAGE_INFO}</a>&nbsp; &nbsp;<a href="{U_LOGIN_LOGOUT}" class="mainmenu"><img src="templates/subSilver/images/icon_mini_login.gif" width="12" height="13" border="0" alt="{L_LOGIN_LOGOUT}" hspace="3" />{L_LOGIN_LOGOUT}</a>&nbsp;</span></td>
						</tr>
					</table>
				</td>
			</tr>
		</table>
<div style="text-align:center">
	<script type="text/javascript"><!--
	google_ad_client = "pub-8596297593242972";
	/* 728x90, date de création 17/10/08 */
	google_ad_slot = "7468318856";
	google_ad_width = 728;
	google_ad_height = 90;
	//-->
	</script>
	<script type="text/javascript"
	src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
	</script>
</div>
		<br />
			<br />

Modifié par chrisllers (17 Nov 2008 - 19:59)
Bonjour,

Avec un Doctype qui ne fait pas passer Internet Explorer en mode Quirks, c'est mieux. Smiley smile

chrisllers a écrit :
j'ai mis le tout dans un div nommé entete, à qui j'ai donné un width de 980px, avec les margin:0 auto
mais l'entete n'est pas centrée.

L'en-tête est parfaitement centrée dans tous les navigateurs un peu capables. Donc pas dans IE.

Un peu de lecture:
http://css.alsacreations.com/Tutoriels-et-articles-divers/A-propos-du-Modele-de-boite-Microsoft-ou-quirks
Merci Florent !
J'ai mis le même doctype que sur le reste de mon site et tout est rentré dans l'ordre !
Merci beaucoup !
Sujet clos
Aller à