18073 sujets

Questions générales et questions de débutants

[resolu] Centrer menu et bloc en CSS ?

Bonjour

J'ai deja poser la question a plusieurs endroit mais ont veux pas me repondre donc ... Smiley lol

J'ai fais un site pour mon tpe et je me suis dit "Pour une fois je vais le faire totalement aux normes" mais apres avoir fais ca j'ai le menu et le bloc de texte qui ne sont pas du tout centrer (j'ai utiliser la methode que vous décriver dans un tutos) et je veux pas reutiliser de tableau .

Donc Pleasseee comment les centrer ??

www.best-of-fire.info/tpe2006/

PS : Sous Ie c'est encore pire j'ai le menu a coté du header Smiley sweatdrop
Modifié par FireMax (22 Jan 2006 - 18:21)
Dans ta CSS, il faut mettre :
#menu {
float: left;
background-image: url(images/fmenu.gif);
width: 225px;
height: 305px;
border: 1px solid #000000;}
philippe84 a écrit :
Dans ta CSS, il faut mettre :
#menu {
float: left;
background-image: url(images/fmenu.gif);
width: 225px;
height: 305px;
border: 1px solid #000000;}


Nan j'ai tester et c'est toujours pareil Smiley ohwell
Bonjour FireMax et bienvenue sur Alsacréations,

Il faudrait que tu donnes une largeur à ta classe conteneur (.center) du genre:

.center{
width:80%;
margin: 0 auto;
}


Et pour IE ne pas oublier de préciser pour le sélecteur body:

body{
text-align:center;
}


ps: tes images n'ont d'attribut alt et c'est mal Smiley cligne .

@philippe84: Merci d'éditer ton post et de présenter lisiblement ton code comme demandé dans les règles.
FireMax a écrit :
merci ca fonctionne Smiley lol

De rien. Un petit résolu pour fêter çà

FireMax a écrit :
Mais pourquoi etre obliger de specifier une largeur ?

La valeur auto permet de calculer des marges automatiquement et à besoin pour cela d'une largeur pour les répartir équitablement.
argg nan ca fonctionne pas avec IE Smiley sweatdrop

Bon ben du coup c'est pas resolu Smiley lol

Please help Smiley rolleyes

EDIT : il y a de l'evolution : www.best-of-fire.info/tpe2006/ mais j'ai toujours pas reussi mettre le bloc a cote du menu Smiley sweatdrop

REEDIT : Maintenant manque plus qu'a savoir comment regler le probleme de IE Smiley sweatdrop
Modifié par FireMax (22 Jan 2006 - 15:35)
Coucou Smiley smile

J'ai téléchargé ta page et ton fichier css ...

Après avoir regardé un peu, j'ai trouvé la source du problème !

#bloc {
	margin-left: 240px;
	background-image:url(images/fbloc.gif);
	background-repeat:repeat-y;
	[#red]width: 659px;[/#]
	height: 305px;
	border: solid 1px #000000;
}


En effet, si tu enlèves cette ligne, tu t'aperçois que ton bloc se positionne corectement !

Bon alors après l'affichage n'est pas encore correct car le bloc principal ne s'étend pas jusqu'au bout.

Alors je te propose ma méthode, si tu la suis tout marchera nikel Smiley smile Le but de ceci est d'afficher correctement le design de ton site, mais la manière dont tu l'as centré ne me paraît pas très correcte, donc nous allons supprimer toute ta classe CENTER Smiley biggol

Donc tout d'abord : le fichier INDEX.html !
Supprime les lignes suivantes :
<div class="center">
</div>

Le </div> étant celui qui ferme ce bloc avant le /body


Ensuite nous retournons dans le fichier STYLES.CSS
Nous allons commencer par supprimer la ligne inutile et qui pose un problème :
Dans #bloc {...}, supprime la ligne width: 659px;

Ensuite nous allons recadrer le design au centre de la page :
Dans body {...}, remplace la ligne margin: 0; par margin: auto;

Et toujours dans body {...}, assure toi que la ligne width: 899px; est bien présente !! ( je me souvient plus si c'est moi qui l'ai rajouté ou si elle y était déjà ^^ Mais je pense qu'elle n'y était pas ! )


Voila, normalement tout marche Smiley biggol
Pour finir, hum je te conseille juste de ne pas "imposer" de taille au bloc principal, étant donné qu'il prend tout seul toute la place qu'il reste dans les limites du width: 899px; qui se trouve dans body {...} Smiley smile

Voilà, bonne continuation pour ton TPE ^^


PS : ( si tout fonctionne tu peux supprimer ta classe .center dans le fichier CSS, tu n'en as normalement plus besoin ^_^ )
Modifié par Most (22 Jan 2006 - 17:11)
Sujet clos
Aller à