 |
|
|
|
| centre un site avec div pos:absolute par  faamugol |
dimanche 2 décembre 2007 à 18:38:46 |
Configuration: Windows XP Internet Explorer 7.0
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 ? |
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 */
} |
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> -- |
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. |
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"et 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. -- |
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. |
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 ajouterbody {
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 trouvetext-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 (-; -- |
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://webmaster.lycos.fr/topics/technic/css/css-workshop3/5/ Merci encore mille fois pour votre intervention. |
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 ?) -- |
| 18/03 12h38 | centrer deux div en milieu d'un div | Webmastering | 18/03 13h53 | 10 |
| 11/01 18h06 | Champ de texte en position:absolute en CCS..? | Webmastering | 12/01 19h17 | 6 |
| 06/11 22h03 | probleme pour centrer site | Webmastering | 07/11 00h43 | 20 |
| 25/08 17h52 | Menu avec position:absolute | Webmastering | 30/08 15h35 | 8 |
