Centre un site avec div pos:absolute

faamugol -
Gihef Messages postés 5150 Date d'inscription Statut Contributeur Dernière intervention - 3 déc. 2007 à 18:11

Bonjour,

Avec le contenu suivant , j'aimerais asvoir comment centre mon site de part et et d'autre du navigateur.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<link rel="stylesheet" type="text/css" href="menu_css1.css" />
<style>
.Titre { position: absolute;
left: 100px;
top: 0px;
z-index: 2;
font-size: 36pt;
font-family: Tahoma;
font-weight: 900;
color: #0066DD }
.SousTitre { position: absolute;
left: 130px;
top: 60px;
z-index: 10;
font-size: 14pt;
font-family: Tahoma;
font-variant: small-caps; }

</style>
</HEAD>

<BODY>

<div id="CadreDroit" style="position:absolute; left:8px; top:110px; width:230px; height:480px; background-color: #B1E33C; layer-background-color: #B1E33C; border: 1px none #000000; padding: 12px; line-height: 22pt; font-size: 8pt; font-family: Arial">
<img src="doss.gif"> <a href="">Sommaire</a><br>
<img src="doss.gif"> <a href="">Qu'est-ce qu'Internet ?</a><br>
<img src="doss.gif"> <a href="">Comment s'en servir ?</a><br>
<img src="doss.gif"> <a href="template00.htm">Nous contacter</a><br>
<br>
<CENTER>Ici les animations</CENTER>
</div>
<div style="position:absolute; left:8px; top:95px"><img src="nav_menu_haut.gif"></div>
<div style="position:absolute; left:8px; top:590px"><img src="nav_menu_bas.gif"></div>

<div id="CadrePrincipal" style="position:absolute; left:240px; top:110px; width:490px; height:480px; background-color: #E2F4B7; layer-background-color: #E2F4B7; border: 1px none #000000; padding: 12px" CLASS="Texte">
<img src="logo.gif" align=left><br>
ici le texte et images du site
</div>
<div style="position:absolute; left:240px; top:95px; z-index:-1;"><img src="princip_haut.gif"></div>
<div style="position:absolute; left:240px; top:590px"><img src="princip_bas.gif"></div>

</BODY>
</HTML>

j'ai déjà lu beaucoup sur le net j'ai essayé ce qui suit mais ca ne va pas

#global {
margin-left: auto;
margin-right: auto;
width: 800px;
text-align: left; /* on rétablit l'alignement normal du texte */
}

Afficher la suite

A voir également:

Centre un site avec div pos:absolute
Site comme coco - Accueil - Réseaux sociaux
Site de telechargement - Accueil - Outils
Quel site remplace coco - Accueil - Réseaux sociaux
Site x - Guide
Site pour vendre des objets d'occasion - Guide

9 réponses

Réponse 1 / 9

Gihef Messages postés 5150 Date d'inscription Statut Contributeur Dernière intervention 2 779

Bonjour,

Essaye

#global {
  position : relative;
  margin-left: auto;
  margin-right: auto;
  width: 800px;
  text-align: left; /* on rétablit l'alignement normal du texte */
  }

Pourquoi du absolute ?
Pour centrer en absolute, on peut utiliser les dimensions et une marge en %.
Un exemple récent.

++
Si tu veux laisser des liens vides, fais plutôt

<a href="#">Sommaire</a>

Réponse 2 / 9

s.spark Messages postés 2485 Date d'inscription Statut Contributeur Dernière intervention 618

Salut,

Utiliser la balise code c'est mieux que de mettre en gras, et c'est fait pour !

#global oui et ou est passer la balise avec cette id ?

Réponse 3 / 9

faamugol

Merci por la reponse alors

je met juste apres la balise <body>
<div id="global">

et juste avant </body> </div>

donc:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 
<HTML> 
<HEAD> 
<TITLE> New Document </TITLE> 
<META NAME="Generator" CONTENT="EditPlus"> 
<META NAME="Author" CONTENT=""> 
<META NAME="Keywords" CONTENT=""> 
<META NAME="Description" CONTENT=""> 
<link rel="stylesheet" type="text/css" href="menu_css1.css" /> 
<style> 
.Titre { position: absolute; 
left: 100px; 
top: 0px; 
z-index: 2; 
font-size: 36pt; 
font-family: Tahoma; 
font-weight: 900; 
color: #0066DD } 
.SousTitre { position: absolute; 
left: 130px; 
top: 60px; 
z-index: 10; 
font-size: 14pt; 
font-family: Tahoma; 
font-variant: small-caps; } 


</style> 
</HEAD> 

<BODY> 
<div id="global">

<div id="CadreDroit" style="position:absolute; left:8px; top:110px; width:230px; height:480px; background-color: #B1E33C; layer-background-color: #B1E33C; border: 1px none #000000; padding: 12px; line-height: 22pt; font-size: 8pt; font-family: Arial"> 
<img src="doss.gif"> <a href="">Sommaire</a><br> 
<img src="doss.gif"> <a href="">Qu'est-ce qu'Internet ?</a><br> 
<img src="doss.gif"> <a href="">Comment s'en servir ?</a><br> 
<img src="doss.gif"> <a href="template00.htm">Nous contacter</a><br> 
<br> 
<CENTER>Ici les animations</CENTER> 
</div> 
<div style="position:absolute; left:8px; top:95px"><img src="nav_menu_haut.gif"></div> 
<div style="position:absolute; left:8px; top:590px"><img src="nav_menu_bas.gif"></div> 

<div id="CadrePrincipal" style="position:absolute; left:240px; top:110px; width:490px; height:480px; background-color: #E2F4B7; layer-background-color: #E2F4B7; border: 1px none #000000; padding: 12px" CLASS="Texte"> 
<img src="logo.gif" align=left><br> 
ici le texte et images du site 
</div> 
<div style="position:absolute; left:240px; top:95px; z-index:-1;"><img src="princip_haut.gif"></div> 
<div style="position:absolute; left:240px; top:590px"><img src="princip_bas.gif"></div> 

</div>

</BODY> 
</HTML>

dans ma feiulle css:

#global { 
margin-left: auto; 
margin-right: auto; 
width: 800px; 
text-align: left; /* on rétablit l'alignement normal du texte */ 
}

Réponse 4 / 9

faamugol

Merci Gihef pour ta repnse,

j'utilise absolute car je n'avais autre solution.
Mais je suis tout à fait d'accord avec une autre solution.

Ta proposition m'intereesse mais je la comprends pas tres bien.

Moi je voudrais avoir un site centré avec structure comme suit:

Entete du site une baniere de pub
A auche le menu de navigation
Au milieu le contenu à chque clicck sur un lien du menu
A droite des info en cotinu
En bas de la page, les copy rigth , le contact, webmaster, etc..

Merci de me m'expliquer en details ta proposition, si possible un exemple, celui que tu m'a filé n'est pas explicatif.

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question

Réponse 5 / 9

Gihef Messages postés 5150 Date d'inscription Statut Contributeur Dernière intervention 2 779

Voilà une solution.
Avec du absolute à bon escient.
Tout ce qui est dedans suit le mouvement.

++
Au cas où…

layer-background-color: #B1E33C;

sans “layer-” ça devrait aller

background-color: #b1e33c;

Et, “.Titre” et “.SousTitre” sont inutiles. Il existe des balises qui servent à ça.

Regroupe les styles dans la feuille de styles

<div id="CadreDroit"

style="position:absolute; left:8px; top:110px; width:230px; height:480px; background-color: #B1E33C; border: 1px none #000000; padding: 12px; line-height: 22pt; font-size: 8pt; font-family: Arial, sans-serif">

!!!
Mets tout ça dans un style #CadreDroit. Et ça fera du code en moins dans la balise.

Et puis, “CadreDroit” à 8px de la gauche ???

Essaye de faire tes menus avec des listes comme dans cet exemple.

--

Réponse 6 / 9

faamugol

Merci pour la reponse Gihef,

C'est bien ce que je veux, merci pour ton temps
Ce je ne comprends , qu'est ce qui permet dans le code ce centrer toute la page ?

Je voudrais comprendre comme ca je peux adapder à mes besoins.

#gauche {
position: absolute;
left:0;
width: 150px;

dans ce petit code left:0, signifie que la position zero pixels à partir de la gauche de l'ecran ou non ?
et pourtant il est centré.

et que fait:

.menugauche {
list-style-type: none;
margin: 0;
padding:0;
}
.menugauche li {
margin-bottom: 5px;
}
.menugauche a {
margin: 0 2px;
color: #000000;
text-decoration: underline;
}

Merci d'avance encore une fois.

Réponse 7 / 9

Gihef Messages postés 5150 Date d'inscription Statut Contributeur Dernière intervention 2 779

En fait, “left:0, signifie que la position zero pixels à partir de la gauche…” de son 1er bloc parent positionné en relative.
C'est la règle.
Et donc, ici, quel est le 1er bloc parent de “#gauche” en relative ?
Si rien n'était indiqué (teste-le, annule le “position:relative”), c'est le <body> qui serait pris comme référence, et le “#gauche” se plaçerait à 0 de… ?

Pour centrer l'ensemble, il place tous ses éléments dans un bloc “#conteneur” (qui est comme ton “#global”) auquel il applique

#conteneur {
position: relative;
width: 750px;
margin: 0 auto;  /* 0 en haut et bas, et auto à gauche et droite
                     et comme le “#conteneur” a des dimensions, ça centre */
background-color:#CCCCFF;
}

Pour une compatibilité avec IE6, il aurait pu ajouter

body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 0.8em;
margin: 0;
padding: 0;
text-align : center;
}

C'est pourquoi, dans ton “#global”, on trouve

  text-align: left; /* on rétablit l'alignement normal du texte */

“et que fait:”

.menugauche {
list-style-type: none;  /* annule les puces de la liste utilisée pour le menu */
margin: 0;  /* annule les espacements extérieurs et intérieurs du bloc */
padding:0;   /* ensuite, on contrôle mieux */
}
.menugauche li {
margin-bottom: 5px;  /* ça, ça se comprend, une marge inférieure de 5 px aux éléments de la liste */
}
.menugauche a {
margin: 0 2px;  /* maintenant, tu le sais */
color: #000000;
text-decoration: underline;
}

Pour tester, ajoute successivement une couleur en background à chaque élément.
Comme

.menugauche li {
margin-bottom: 5px;
background-color : #d77;

etc.
Et modifie les différents attributs

.menugauche li {
margin-bottom: 25px;

++
le-positionnement-des-balises
mise-en-page

Maintenant que tu as différentes réponses (Les marges négatives), une proposition d'exercice :
— positionne ton “#global” en absolute… et centre-le (-;

--

Réponse 8 / 9

faamugol

Merci infiniment pour toutes vos réponses,
j'ai déjà beaucoup avancé dans ce que je dois realiser grâve à vous. sooyez en fiers.

J'ai une toute derniere question comment laisser de l'espace entre les differents blocs DIV,
c'est à dire une ligne vide etre gauche et centre.

En plus en voyant le code source des modèles de mise en page en CSS:
http://css.alsacreations.com/Modeles-de-mise-en-page-en-CSS

Je me demande ce qui permet de dire que tel div occupe toute l'entete, tel autre à gauche et la suivante le cente ou la droiite et puis ce qui permet d'aller à la ligne pour la div pied ?

un exemple http://www.lycos.fr

Merci encore mille fois pour votre intervention.

Réponse 9 / 9

Gihef Messages postés 5150 Date d'inscription Statut Contributeur Dernière intervention 2 779

Il semblerait que tu en sois à un moment où tu as besoin de creuser les marges…
http://cjoint.com/data/mdsjGNmSB3.htm

“ce qui permet de dire que tel div”
Leur apparition dans le code de la page et leur positionnement.
“gauche”, “centre”, “droite” arrivent après l'en-tête et avant le pied de page.

Comme “gauche” et “droite” sont en absolute, il suffit de donner des marges au “centre” pour qu'il prenne lisiblement sa place entre les deux.
Essaye en supprimant sa marge droite et en lui donnant une width adaptée.
Essaye de réduire (80px) ses marges (pourquoi passe-t-il en dessous ?)

--

Discussions similaires

C'est quoi le site qui remplace coco chat

Votre réponse

Discussions similaires