28219 sujets

CSS et mise en forme, CSS3

[RESOLU] Comment centrer

Bonjour j'ai un site en php et fichier css.
ma page d'accueil est composé de 3 pages head.php index.php et foot.php jusque là pas de probléme je n'arrive pas a mettre centrer ma page elle est sur la gauche voir le site.

http://www.listepub.com

Merci à vous tous
Modifié par byters (16 Feb 2007 - 23:12)
Bonjour,

1. Utiliser un Doctype valide.
2. Créer un conteneur global (div) qui contiendra tous les contenus du site (en-tête, menu, corps, pied de page, etc.).
3. Donner une largeur fixe (si ça correspond au design voulu) ou une largeur maximale, en pixels ou pourcentages, à ce conteneur global.
4. Centrer le conteneur global via la technique des marges automatiques (margin: 0 auto;).

Note : au besoin, deux points mériteraient de plus amples explications : le Doctype et la technique des marges automatiques. Heureusement, les deux sont traités dans les tutoriels d'Alsacréations.
Les DTD HTML4.01 et XHTML1.0 : comment choisir ?
Centrer les éléments ou un site web en CSS
Modifié par Florent V. (14 Feb 2007 - 20:41)
Apparement avec le php ca ne le fait pas en ayant un foot.php un head.php et un fichier index.php ce qui vaut dire qu'a chaque fois que je fais appel a un fichier il charge automatiquement le head et le foot.

voici une parti de mon code head
<?php
include("settings.php");
?>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<TITLE><? echo $company_name; ?></TITLE>

<link href="css/styles.css" rel="stylesheet" type="text/css" />
<link href="css/lightbox.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="scripts/lightbox.js"></script>
<script type="text/javascript" src="scripts/diaporama.js"></script>
</head>
<body>

<div id="header"><a name="haut" id="haut"></a></div>
<div id="menu">
<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0" class="menu" style="height: 50px;">
  <tr style="vertical-align:top;">
    <td width="77" class="menuPadding">
     <a href="http://<? echo $domain_name; ?>/index.php?ref=<? echo $ref; ?>">accueil</td>
    <td class="menuSeparateur"></td>
    <td width="77" class="menuPadding"><a href="page01.html">info</a></td>
    <td class="menuSeparateur"></td>
    <td width="77" class="menuPadding">
	<a href="http://<? echo $domain_name; ?>/new_account.php?t=Free&ref=<? echo $ref; ?>">Inscription</a></td>
    <td class="menuSeparateur"></td>
    <td width="77" class="menuPadding">
	<a href="http://<? echo $domain_name; ?>/partenaire.php?ref=<? echo $ref; ?>">Partenaires</a></td>
	<td class="menuSeparateur"></td>
    <td width="77" class="menuPadding">
	<a href="http://<? echo $domain_name; ?>/tos.php?ref=<? echo $ref; ?>">Termes</a></td>
    <td class="menuSeparateur"></td>
    <td width="77" class="menuPadding">
	<a href="http://<? echo $domain_name; ?>/faq.php?ref=<? echo $ref; ?>">FAQ</a></td>
	<td class="menuSeparateur"></td>
    <td width="77" class="menuPadding">
	<a href="http://<? echo $domain_name; ?>/directory.php?t=Free&ref=<? echo $ref; ?>">Safeliste</a></td>
    <td class="menuSeparateur"></td>
    <td width="77" class="menuPadding">
	<a href="http://<? echo $domain_name; ?>/contact.php?ref=<? echo $ref; ?>">contact</a></td>
  </tr>
</table> 
</div>
<div id="sheader"></div>
<div id="contenuBg"> 
  <div id="boiteMenuG">
    <p class="bouton"><a href="#">FORUM</a></p>
    <p class="bouton"><a href="#">BLOG</a></p>
    <p style="text-align: center; margin: 0px 0px 0px 0px; background: url(images/boxMenuH.gif) no-repeat bottom; height: 12px; width: 159px;"></p>
    <p class="elementMenu"><a href="#">Lien 1</a></p>
    <p class="elementMenu"><a href="#">Lien 2</a></p>
    <p class="elementMenu"><a href="#">Lien 3</a></p>
    <p class="elementMenu"><a href="#">Lien 4</a></p>
    <p class="elementMenu"><a href="#">Lien 5</a></p>
    <p class="elementMenu"><a href="#">Lien 6</a></p>
    <p class="elementMenu"><a href="#">Lien 7</a></p>
    <p class="elementMenu"><a href="#">Lien 8</a></p>
    <p class="elementMenu"><a href="#">Lien 9</a></p>
    <p class="elementMenu"><a href="#">Lien 10</a></p>
    <p class="elementMenu"><a href="#">Lien 11</a></p>
    <p style="text-align: center; margin: 0px 0px 0px 0px; padding-bottom: 50px; background: url(images/boxMenuBG.gif) no-repeat top; height: 12px; width: 159px;"></p>
  </div>


Merci
byters a écrit :
Apparement avec le php ca ne le fait pas en ayant un foot.php un head.php et un fichier index.php ce qui vaut dire qu'a chaque fois que je fais appel a un fichier il charge automatiquement le head et le foot.

Rien compris.

Je ne vois pas trop ce qui t'empêche de rajouter un Doctype avant ta balise <html>, une balise <div> après la balise <body> et une balise </div> juste avant la balise </body> ?...

Ça pourrait donner quelque chose comme ça :
[b]HTML :[/b]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	...
</head>
<body>
<div id="global">
	...
</div><!-- fin de div#global -->
</body>
</html>

[b]CSS :[/b]
div#global {
	width: 760px;
	margin: 0 auto;
}

C'est bien sûr un exemple.

Par ailleurs, la lecture des deux tutoriels que je pointais ci-dessus reste d'actualité.
Administrateur
Bonjour,

si le sujet est [Résolu], merci de l'éditer et de le marquer comme tel Smiley smile

Et si tu penses que ta solution peut aider d'autres membres ayant le même problème, merci d'indiquer ce que tu as fait: un visiteur dans le besoin peut être en train de lire le sujet aujourd'hui, demain, dans 1 mois ou dans 1 an Smiley cligne

Felipe
Sujet clos
Aller à