28173 sujets

CSS et mise en forme, CSS3

[resolu]Probleme d'alignement

Bonsoir,

voila je voudrais savoir comment centré le bannière dans le header?

et pourquoi les textes dans le corps ainsi que la photo ne sont pas centré alors que j'ai entouré le tout de h1 ou il est dis text align center???
http://pressagny.canin.free.fr
[code]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<title>Largeur fluide, header/menu gauche/contenu/footer.</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
/* CSS issu des tutoriels css.alsacreations.com */
body {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size: 0.8em;
margin: 0;
padding: 0;
}
#header {
height: 99px;
background-color: silver;
}
#conteneur {
position: absolute;
width: 100%;
background-color:silver;
}
#centre {
background-color:silver;
margin-left: 150px;
}
#gauche {
float:left;
left:0;
width: 150px;
}
#pied {
height: 30px;
background-color: silver;
clear:both;
}

.menugauche {
list-style-type: none;
margin: 0;
padding:0;
}
.menugauche li {
margin-bottom: 5px;
}
.menugauche a {
margin: 0 2px;
color: #000000;
text-decoration: underline;
}
.menugauche a:hover {
text-decoration: none;
}
p {margin: 0 0 10px 0;}
#corps h1 /* Tous les titres h1 du corps */
{
   color: black;
   text-align: center;
   font-family: Arial, "Arial Black", "Times New Roman", Times, serif;
}

#corps h2 /* Tous les titres h2 du corps */
{
   height: 30px;   
   padding-left: 30px;
   color: black;
   text-align: left;
}

#corps h4
{
	color: black;
	text-align: center;
}

#corps h5
{
	color: black;
	text-align: center;
}


table
{
	margin: auto;
	border: 4px outset black;
}

td
{
	text-align: center;
	padding: 5px;
	font-family:Arial, "Arial Black", "Times New Roman", Times, serif;
	border: 2px outset black;
}

th
{
	text-align: center;
	font-family:Arial, "Arial Black", "Times New Roman", Times, serif;
	font-size: 18px;
	color: black;
	font-weight: bold;
	text-decoration: underline;
}
</style>
</head>

<body>

<div id="conteneur">

	  <div id="header"><img alt="bannière du club" src="logo/banniere.gif"/>

</div>

	  <div id="gauche">
	  	<h3>Le Club</h3>
	  	
			<ul class="menugauche">
			<li><a href="page_modele.html">Historique</a></li>
                   <li><a href="page_modele.html">Le bureau</a></li>
                   <li><a href="page_modele.html">Les horaires</a></li>
				   <li><a href="page_modele.html">Plan d'accès</a></li>
			</ul>
			
			<br />
			<div id="gauche">
			<h3>Agility</h3>
	  	
			<ul class="menugauche">
			<li><a href="reglement_agi_2007.html">Le réglement</a></li>
                   <li><a href="page_modele.html">Manifestations du club</a></li>
                   <li><a href="page_modele.html">Résultats du club</a></li>
				   <li><a href="equipe_agility.html">Les agilitistes</a></li>
			</ul>
			<br />
			<div id="gauche">
			 <h3>Ring</h3>
	  	
			<ul class="menugauche">
			<li><a href="reglement_agi_2007.html">Le réglement</a></li>
                   <li><a href="page_modele.html">Manifestations du club</a></li>
                   <li><a href="page_modele.html">Résultats du club</a></li>
				   <li><a href="page_modele.html">Les ringeurs</a></li>
			</ul>
			 </div>
	  </div>
	  </div>
	   
	  	
			
	  
	  
	  <div id="centre">
  	  <h1>L'Amicale Canine de Pressagny</h1>
        <h1><img alt="club dieppe" src="photo/Groupe_a_dieppe.jpg" width="500" height="200"/></h1>
        <h1>NEWS</h1> 
		   <table>
			<tr>
				<th colspan="2">Le 19 Mars 2007</th>
			</tr>
			<tr>
				<td>Création des pages réglements<br />
				Mise en ligne du réglement agility 2007<br />
				</td>
			</tr>	
			<tr>
				<th colspan="2">Le 18 Mars 2007</th>
			</tr>
			<tr>
				<td>Un grand merci à TAILEE pour la bannière<br/>
				Création des pages des équipes d'agilitistes toutes catégories.<br />
				Vous trouverez le nom du conducteur, le nom du chien, sa race ainsi que la photo de l'équipe!<br />
				</td>
			</tr>	
		</table>
		<p><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
       </p>
  	</div>

	  
	  <div id="pied">pied de page</div>
</div>
	  

</body>
</html>


merci de votre aide

milène
Modifié par milene76 (10 Jun 2007 - 22:58)
Salut,

Peut être une erreur de selecteur Smiley cligne 

#centre h1 /* Tous les titres h1 du corps */
{
   color: black;
   text-align: center;
   font-family: Arial, "Arial Black", "Times New Roman", Times, serif;
}
Bonjour,
#corps h1 {...}

Pas de conteneur portant l'identifiant "corps" dans ton code HTML. Ça vient sans doute de là.

Sinon, il est regrettable d'utiliser ainsi l'élément h1, censé servir à structurer le contenu, comme une balise de mise en page. Smiley rolleyes
milene76 a écrit :
comment dois-je faire pour ne pas utiliser les h1,h2,........

Il ne s'agit pas de les éviter (au contraire !), mais juste de les utiliser à bon escient !

Pour reprendre le contenu concerné par ce problème de centrage :
<h1>L'Amicale Canine de Pressagny</h1>
<h1><img alt="club dieppe" src="photo/Groupe_a_dieppe.jpg" height="200" width="500"></h1>
<h1>NEWS</h1>

Tu peux faire, par exemple :
<h1>L'Amicale Canine de Pressagny</h1>
<p><img alt="" src="photo/Groupe_a_dieppe.jpg" height="200" width="500"></p>
<h2>NEWS</h2>

(En passant : pour l'image illustrative avec les chiens, autant utiliser un attribut alt vide.)
Pour le centrage du texte, vu que tout le texte dans div#centre est centré, autant le déclarer pour ce bloc, non ?
ne devrais tu pas centrer tout ton site?

dans le #conteneur au lieu de mettre width:100% mettre la taille de ton bandeau en px

+ un margin:0 auto; ?

quand je le regarde (je suis en 1280x1024) je trouve ça un peu dommage que le bandeau et le menu soit collé à gauche et que le reste soit centré.

bon c'est juste un avis Smiley smile
Modifié par CPascal (10 Jun 2007 - 23:09)
je trouve l'idée sympas!

mais pourrais tu m'aider en me mettant un code un peu plus precis,car j'ai encore beaucoup de mal a voir ou il faut mettre quoi!

heu le bandeau est pas centré la??????

voila j'ai tou recentré en mettant text-align : center dans mon #conteneur.

désolée Smiley confused
Modifié par milene76 (10 Jun 2007 - 23:17)
maintenant oui. le bandeau est centré.

par contre le menu reste collé au bord de l'écran. je pense que ça viens du left:0; qui ne sert plus puisque tu utilises float:left;
Sujet clos
Aller à