FORUM D’ENTRAIDE INFORMATIQUE (FEI)Site d’assistance et de sécurité informatique

[krupsa]

Bonjour,

Je ne suis pas un expert en HTML / CSS, néanmoins avec quelques bases et les tutos d'Open Classroom, j'ai réalisé un site pour l'association dont je fais partie. Voici le lien temporaire au passage.

Il n'est pas fini, mais je rencontre un problème avec le centrage des éléments. J'utilise pour cela :

Code : Tout sélectionner

margin-left : auto;
margin-right: auto;

Mais non seulement l'ensemble me parait légèrement décalé, mais il l'est surtout au niveau du menu horizontal en haut : c'est flagrant.

Voici ma page CSS :

Code : Tout sélectionner

body 
{
	background-color: #2d2d37 ;	
	background-image: url("background.png");
	background-repeat: no-repeat;
	background-position: center;
	background-attachment: fixed;
	font-family: "Trebushet MS", Verdana, Serif;
}

p
{
	color: #2d2d37;
	text-align: justify;
	font-size: 15px;
	padding: 1px;
}

h3
{
	text-align: center;
	color: #2d2d37;
	padding: 7px;
}

h4
{
	text-align: center;
	color: #b5b5bf;
	font-size: 11px;
}

figcaption
{
font-size: 10px;
}

header
{
	background-image: url("backgrnd_header.png");
	background-repeat: no-repeat;
	background-position: top center;
	background-attachment: scroll;
	width: 954px;
	height: 425px; 
	margin-left: auto;
	margin-right: auto;
}

nav
{
	background-color: #3a3a48;
	border: 1px solid white;
	width: 950px;
	height: auto; 
	margin-left: auto;
	margin-right: auto;
	margin-top: 5px;
	text-align: center;
	font-size: 17px;
	font-family: arial, serif;
	color: white;
}

nav ul li { 

display : inline;

padding : 24px;

}

nav ul{

margin-left: auto;
margin-right: auto;
list-style-type : none;

}


section
{
	background-color: #b5b5bf;
	border: 1px solid white;
	width:800px;
	height: auto; 
	margin-left: auto;
	margin-right: auto;
	margin-top: 8px;
	padding: 75px;
}

footer
{
	background-color: #3a3a48;
	border: 1px solid white;
	width: 850px;
	height: 60px; 
	margin-left: auto;
	margin-right: auto;
	margin-top: 15px;
	padding:50px;
	padding-top: 5px;
}

a
{
	color: white;
	text-decoration: none;
	font-weight: bold;
}

a:hover
{
	color: #999999;
	font-weight: bold;
}

p a
{
color: black;
font-weight: normal;
font-size: 14px;
text-decoration: underline;
}

p a:hover
{
color: #e00606;
font-weight: normal;
}

strong
{
text-decoration: none;
font-weight: bold;
font-size: 13px;
}

label
{
color: #2d2d37;
font-size: 15px;
}


img
{
border: 1px solid;
}

Mais le truc qui me parait bien bizarre, c'est surtout la largeur des blocs nav, section, et footer. Pour qu'ils aient (a peu prêt) la même largeur, je dois leur assigner des valeurs carrément différentes : 950px, 800px, et 850px .

Je pense avoir loupé quelque chose, si quelqu'un pouvait m'éclairer.

Merci

[KeRR_@]

Bonjour Krupsa

Ajoute ceci au début

Code : Tout sélectionner

 html, body {width:100%;} #conteneur { 	width:950px; 	margin:0 auto 0 auto; }

[krupsa]

Merci Kelp !

Par contre à quoi fait référence #conteneur ? car je ne sais pas où l'ajouter dans mon code HTML

Edit : Bon pour le menu, c'est réglé ! J'avais bêtement mis le padding des puces de la liste à gauche, donc forcément le premier lien était décalé

Ta solution a à priori réglé le problème le tout s'est légèrement décalé. Par contre pour les largeurs de différentes tailles, je ne comprends toujours pas

[KeRR_@]

Bonjour Krupsa

Ne rajoute rien car tes modèles de boites sont déjà codé hein

Yo le lien ->> http://babylon-design.com/centrer-horiz ... s-de-code/

Vérifie avec IE il en fait qu'a sa tête

Bonne journée.