Pbme pour centrer un site en css

Recherche :

Mot : Pseudo : Filtrer
Bas de page
Auteur	Sujet : Pbme pour centrer un site en css

Transistor

Bonjour,
Histoire de vouloir bien faire, j'essaye de réaliser une mise
en page avec des div full css.
J'ai récupéré un modèle sur alsacreations.com que j'essaye d'adapter pour
centrer le contenu. J'ai rajouté un div (celui en rouge) permettant de centrer
tout le reste. Mais maintenant le div "partie centrale" s'est décalée vers le
bas (en fait s'aligne sous le div du menu de gauche). J'avoue que je suis un peu
perdu avec les positions absolutes et relatives, mais bon je désespère pas !
Si quelqu'un pouvait m'éclairé de ses lumières !
Merci à vous :hello:

voici le code html de la page :

<!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: 100px;
background-color: #99CCCC;
}

#CentreConteneur{
width:100%;
position: absolute;
background-color:red;
text-align:center;
}

#conteneur {
text-align:left;
width: 600px;
background-color:#CCCCFF;
}
#centre {
background-color:#9999CC;
margin-left: 150px;
margin-top:0px;
}
#gauche {

left:0;
width: 150px;
}
#pied {
height: 30px;
background-color: #99CC99;
}

.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;}
</style>
</head>

<body>
<div id="CentreConteneur">le 1er div qui permet de centrer le "conteneur"
<div id="conteneur">

<div id="header">header <a href="http://css.alsacreations.com/Modeles-de-mise-en-page-en-CSS">(voir tous les

modèles)</a>

</div>

<div id="gauche"><p>menu</p>
<p>largeur fixe : 150px</p>

<ul class="menugauche">
<li><a href="">Menu 1</a></li>
<li><a href="">Menu 2</a></li>
<li><a href="">Menu 3</a></li>

<li><a href="">Menu 4</a></li>
</ul>

</div>

<div id="centre">
partie centrale qui "pousse" les colones vers le bas.<br />
partie avec du contenu occupant le reste de la largeur<br />

partie avec du contenu occupant le reste de la largeur<br />
partie avec du contenu occupant le reste de la largeur<br />
partie avec du contenu occupant le reste de la largeur<br />
partie avec du contenu occupant le reste de la largeur<br />
partie avec du contenu occupant le reste de la largeur<br />
partie avec du contenu occupant le reste de la largeur<br /> partie avec du contenu occupant le reste de la largeur<br />
partie avec du contenu occupant le reste de la largeur<br />
partie avec du contenu occupant le reste de la largeur<br />
partie avec du contenu occupant le reste de la largeur<br />
partie avec du contenu occupant le reste de la largeur<br />
partie avec du contenu occupant le reste de la largeur<br />

</div>

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

</div>
</body>
</html>

Publicité

kirua_sama

Learn sciences with senses

FlorentG

Unité de Masse

kirua_sama a écrit :

:lol: :lol: :lol:

masklinn

í dag viðrar vel til loftárása

1- ton div "centreconteneur" ne sert strictement à rien
2- ajoutes à ton CSS

dans #conteneur

margin: 0 auto;

Ca va mettre les marges latérales en automatique, donc elles seront égales, donc elles vont centrer ton conteneur... sauf dans MSIE qui ne comprend pas trop

Donc on va ajouter dans le CSS de body:

text-align: center;

Qui, pour une raison inconnue, amène MSIE à centrer le contenu.

Message édité par masklinn le 23-06-2005 à 17:06:59

---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody

FlorentG

Unité de Masse

Sauf IE5 et IE6 (en mode Quirks uniquement) [:aloy]

masklinn

í dag viðrar vel til loftárása

FlorentG a écrit :

Sauf IE5 et IE6 (en mode Quirks uniquement) [:aloy]

:heink:

---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody

Transistor

masklinn a écrit :

1- ton div "centreconteneur" ne sert strictement à rien
2- ajoutes à ton CSS

dans #conteneur

margin: 0 auto;

Ca va mettre les marges latérales en automatique, donc elles seront égales, donc elles vont centrer ton conteneur... sauf dans MSIE qui ne comprend pas trop

Donc on va ajouter dans le CSS de body:

text-align: center;

Qui, pour une raison inconnue, amène MSIE à centrer le contenu.

Pourquoi faire compliqué quand on peut faire simple !
Merci et je vais regarder du coté des marges...N'empeche que c'était quand même plus simple de faire la mise en forme avec des tableaux (pour les novices) !

gatsusat

tu rigoles ???
les tableaux c'est la pire chose qui puisse exister pour la mise en page

masklinn

í dag viðrar vel til loftárása

Transistor a écrit :

Il n'y a pas de complexité, juste 2 règles dont il faut se souvenir, les marges automatiques pour presque tout le monde et text-align: center pour MSIE [:spamafote]

Et dans la mesure où on ne centre habituellement que le corps du document (quand on le centre), ça fait 2 lignes de CSS et 0 de HTML [:pingouino]

gatsusat a écrit :

tu rigoles ???
les tableaux c'est la pire chose qui puisse exister pour la mise en page

stfu

Message édité par masklinn le 23-06-2005 à 17:52:13

---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody

FlorentG

Unité de Masse

masklinn a écrit :

:heink:

IE6, avec un doctype Strict, gère le margin: 0 auto;

Publicité

masklinn

í dag viðrar vel til loftárása

FlorentG a écrit :

IE6, avec un doctype Strict, gère le margin: 0 auto;

Ahhh ok

---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody

gatsusat

Débutantttttttttttttttttt tu savais meme po ca

FORUM HardWare.fr

Programmation

HTML/CSS

Pbme pour centrer un site en css

Sujets relatifs
Probleme dans le centrage de mon site	Donnez moi vos avis sur mon site
Une idée pour créer un site populaire?	site elastique
Besoin d'aides pour un site	Qui veut m'aider a faire un site web ?
Question bizarre : comment faire pour logger quelqu'un sur mon site ?	[design+css] Besoin de conseils pour un 1er site perso
site sur le xml en java	je recherche un site pour apprendre le visual basic
Plus de sujets relatifs à : Pbme pour centrer un site en css

Page générée en 0.055 secondes