Positionnement css
Bonjour,
J'ai créé un site et je souhaiterai qu'il soit centré VERTICALEMENT et horizontalement au milieu de la page... Malheureusement, lorsque je réduis la taille de mon écran ou lorsque j'utilise un ultra-portable, le haut de la page disparait ! Pourquoi ?
Merci par avance pour vos réponses;
Extrait code css :
* {
margin: 0;
padding: 0;
}
body {
margin: auto;
padding: auto;
width: 728px;
background-color: #5984b5;
font-family: Lucida Sans Unicode;
}
#blanc {
position: absolute;
background-color: #ffffff;
top: 50%;
height: 747px;
width: 728px;
margin-top: -374px;
margin-left: auto;
border: 1px solid #000000;
}
#gauche {
line-height: 25px;
margin: 10px;
width: 140px;
float: left;
}
#sommaire {
background-image: url(menu/menu.jpg);
background-repeat: no-repeat;
background-color: #ffffff;
color: black;
line-height: 25px;
padding: 5px 10px 0px 10px;
border: 1px solid #000000;
width: 130px;
float: left;
}
#langues {
background-image: url(menu/menu.jpg);
background-repeat: no-repeat;
background-color: #ffffff;
color: black;
margin: 10px 0 0 0;
line-height: 25px;
padding: 5px 10px 0px 10px;
border: 1px solid #000000;
width: 130px;
float: left;
padding: 5px 10px 0px 10px;
}
#langues a:hover {
text-decoration: underline;
}
#citation {
text-align: center;
}
#banniere {
margin: 0px;
padding: 0px;
height: 214px;
border: 0 0 1px 0 solid #000000;
J'ai créé un site et je souhaiterai qu'il soit centré VERTICALEMENT et horizontalement au milieu de la page... Malheureusement, lorsque je réduis la taille de mon écran ou lorsque j'utilise un ultra-portable, le haut de la page disparait ! Pourquoi ?
Merci par avance pour vos réponses;
Extrait code css :
* {
margin: 0;
padding: 0;
}
body {
margin: auto;
padding: auto;
width: 728px;
background-color: #5984b5;
font-family: Lucida Sans Unicode;
}
#blanc {
position: absolute;
background-color: #ffffff;
top: 50%;
height: 747px;
width: 728px;
margin-top: -374px;
margin-left: auto;
border: 1px solid #000000;
}
#gauche {
line-height: 25px;
margin: 10px;
width: 140px;
float: left;
}
#sommaire {
background-image: url(menu/menu.jpg);
background-repeat: no-repeat;
background-color: #ffffff;
color: black;
line-height: 25px;
padding: 5px 10px 0px 10px;
border: 1px solid #000000;
width: 130px;
float: left;
}
#langues {
background-image: url(menu/menu.jpg);
background-repeat: no-repeat;
background-color: #ffffff;
color: black;
margin: 10px 0 0 0;
line-height: 25px;
padding: 5px 10px 0px 10px;
border: 1px solid #000000;
width: 130px;
float: left;
padding: 5px 10px 0px 10px;
}
#langues a:hover {
text-decoration: underline;
}
#citation {
text-align: center;
}
#banniere {
margin: 0px;
padding: 0px;
height: 214px;
border: 0 0 1px 0 solid #000000;
13 réponses
-
super alors ^^
-
Finalement, j'ai testé le code aujourd'hui... et ça marche à la perfection !
Je n'ai plus qu'a prendre un peu de temps pour rajouter les <table>, les <tr> et les <td> dans chaque page (j'aurai dû utiliser des require) !
Merci pour ton aide. -
ok
-
J'ai pas encore eu le temps d'essayer, je le ferrai ce week-end. Je te tiens au courant.
-
sa marche ou pas ?
-
merci
-
-
Oui bon... Le JavaScript, je n'y connais rien...
-
ba deja faut virer ça et ensuite je pense que tu devrai le faire en javascript en captant la resolution de l'ecran du client et avec calcul
-
Merci pour la proposition.
Si je supprime le margin-top: -374px; et que je modifie le top: 50%, le site ne sera plus centré verticalement. N'y a t'il pas une autre solution ? -
et le top aussi ^^ ou modifie le
-
ouai jai trouver ta fait une grosse erreur
margin-top: -374px;
supprime sa ^^ -
Ba ton site est trop grand pour ton ultra portable, je peux voir le site stp ?