[Problème] Site largeur fixe toujour centré

[Kadesing]

Bonjour,

Comment faire pour que mon site soit toujours centré quelque soit la résolution de l'écran?


J'ai les éléments suivant:

-wrapper
-conteneur( - logo - top menu - contenu )
-footer

Voici mon css:

html, body {
height: 100%;
}
/*définit les styles par défaut dans la page*/
body {
padding : 0;
background: url(../images/fond.jpg) top center repeat;
}

img {
border : none;
}
/*définit la couleur des liens et leur comportement*/
a {
color : #9e9e9e;
}

a:hover {
text-decoration : none;
}

a:focus {
outline: none;
}

.clr {
clear : both;
}

li {
list-style : none;
}

p {
padding : 4px 0 4px 0;
}
/* le * permet d'appliquer à tous les styles (ici marges 0 ce qui initialise tous les navigateurs de la
même manière)*/
* {
margin : 0;
padding : 0;
}

h1, h2, h3, h4, h5 {
font-size : 14px;
font-weight : normal;
}
/***********************************STRUCTURE HTML************************/

/********************W R A P P E R ********************/
#wrapper { /*bloc 1 principal qui contient toute la page*/

min-height: 100%;
width:1280px;
overflow: hidden;
margin-left: auto;
margin-right: auto;

}

/******************C O N T E N E U R *****************/
#conteneur { /*bloc logo/top menu et contenu)*/
background: url(../images/cerisier.png) bottom right no-repeat;

}
/**********************LOGO********************/
#logo { /*logo*/
margin: 0 auto;
margin-top:20px;
width: 228px;
height: 123px;
background: url(../images/logo.jpg) top left no-repeat;
}

#logo a {/*lien du logo*/

width: 200px;
height: 120px;
display: block;
}


/****************TOP MENU CENTRER*****************/
#topmenu{
height: 40px;
background: url(../images/barre.gif) bottom no-repeat;
list-style: none;
text-align: center;

}
#topmenu li {
display: inline;
margin-right: 5px;
font-size:14px;
line-height: 70px;

}

#topmenu li a {
display: inline-block;
padding: 5px 0px;
text-align: center;
width: 80px;
}

#topmenu li a:hover, #topmenu li.current {

}
#centre { /***mon contenu*/

width:1280px;
}

#footer {

width:1280px;
margin: 0 auto;
padding: 10px;
text-align: center;
background:#494747;
}

Merci d'avance!

[lefabdu51]

Re : Site largeur fixe toujour centré

un lien serais le plus simple.
La il manques des choses pour avoir une reponse

[groomy]

Re : Site largeur fixe toujour centré

oui un lien serait bien ... on ne sais même pas quel template tu utilise ou si tu l'a fait toi même...

[Kadesing]

Re : Site largeur fixe toujour centré

Bonsoir,

Je travail en local donc je n'ai pas de lien. C'est mon 1er template, fais moi même. Entre temps j'ai remédié à mon problème, j'ai fais un site extensible avec un conteneur 85%. Je suis débutante et aimerai avoir vos conseils au sujet des sites extensibles, est-ce une bonne solution? Que me conseillez-vous?

Merci et bonne soirée

[groomy]

Re : Site largeur fixe toujour centré

aie pas evident là, moi je ne fait que des sites en fixe. Je ne travaille plus avec les sites extensibles. Lors de mise en page , d'une resolution a l'autre des fois ca ne veux plus rien dire et ca bug de partout. Je demarre souvent sur des formats en 1024px de large maxi et je place un wrapper de 980px pour le site (ou plus)
Envois moi le template en fichier et je regarderai, je l'installerai sur un de mes espaces et on pourra travailler en ligne si tu veux.

[Kadesing]

Re : Site largeur fixe toujour centré

Ok, donc il est préférable que je revienne à mon 1er template , un site fixe. Deplus, comme c'est mon 1er template, je pense que je ne devrai pas m'aventurer dans un extensible...

Je te remercie pour ta proposition, mais mon 1er template (fixe)fonctionnait bien, le tous étaient bien centré.

Merci encore et bonne soirée!

[groomy]

Re : Site largeur fixe toujour centré

aucun soucis, mais rien ne t'empeche de bosser en paralleles sur une copie de ton template que tu nommerai autrement ...

[lefabdu51]

Re : Site largeur fixe toujour centré

le problème des templates extensible est que tu risque d avoir des déformations ingérables.Et des balises div qui ne se retrouvent pas a la bonne place.

Si tu veux utiliser les % comme unité de mesure, met une taille maximum et minimum sur ton corps (balise body).ce sont les propriétés min-width et max-width.
il faut que tu les mettent ici:
html, body {
height: 100%;
}

Moi j'utilise 800px comme minimumm et 1280px comme maximum.
Après a toi de voir selon le public que tu vise avec ton site

sans cela si tu passe ton site en 640 * 480 tes balises risquent d etre les une en dessous des autres car pas la place d etre alignées, et si tu le passe en 3000 pixels de large, elles risquent d etre les une a coté des autres car trop de place.


Edit:
min-height: 100%; ca ne sert a rien cette propriété. tu dois mettre une valeur et non un pourcentage.

[Kadesing]

Re : Site largeur fixe toujour centré

Merci beaucoup pour tous vos conseils et votre aide!

Bonne soirée.

[Kadesing]

Re : Site largeur fixe toujour centré

Bonjour à tous et toutes,

Il paraît qu'internet explorer 6 ne reconnait pas les propriétés max-width, max-height, min-width,min-height ?

Est-ce vrais? Si oui, que faire?

Merci

[lefabdu51]

Re : Site largeur fixe toujour centré

Bonjour à tous et toutes,

Il paraît qu'internet explorer 6 ne reconnait pas les propriétés max-width, max-height, min-width,min-height ?

Est-ce vrais? Si oui, que faire?

Merci

Bah tu met un plugin qui renvois vers une demande de mise ajour du navigateur...c est le plus simple.
IE6 est une antiquité qui pose de gros soucis...donc moins il en reste en circulation, mieux c est;

[Kadesing]

Re : Site largeur fixe toujour centré

Ok, merci beaucoup !

[lefabdu51]

Re : Site largeur fixe toujour centré

de rien..Et ca t eviteras de gros mal de tete.