Positionner une div à top=0 et la centrer [Résolu]

Signaler
Messages postés
166
Date d'inscription
mercredi 27 juin 2007
Statut
Membre
Dernière intervention
31 mars 2014
-
Messages postés
13
Date d'inscription
samedi 24 juin 2006
Statut
Membre
Dernière intervention
9 juillet 2009
-
Bonjour, j'ai un soucis qui me semble tout bête mais m'énerve comme c'est pas permis

Voilà, je souhaite placer sur mon site une sorte de bandeau tout en haut du navigateur (à top=0) et centré.

Ma première idée toute simple:
<center>
bla bla
</center>, mais cela ne marche pas !!
C'est la gauche de la div qui se trouve centrée donc le bloc lui-même est sur la droite

2ème idée avec CSS:
#gb{
margin-left: auto;
margin-right: auto;
width:700;
}
puis de suite après le body:
bla bla bla
, ne marche toujours pas !!
La div n'est pas positionnée en top=0 mais à quelques pixels du bord (ni si je rajoute top:0; dans le CSS) et la div n'est pas centrée du tout.

3ème idée après avoir cherché sur le web:
body{text-align: center;}
#gb{margin-left: auto;margin-right: auto;width: 700;text-align: left;}
puis
bla bla bla

Mais là, si la div est bien centrée, le top n'est toujours pas à 0, puis tous les autres élements de ma page sont centrés eux aussi !! Il semblerait que pour éviter cela je dois spécifier text-align:left à tous les élement de ma page

Bref, je pensais pas du tout me retrouver bloqué à ce stade, mais je n'arrive pas à centrer et positionner tout en haut du navigateur ce bandeau.
Je suis ouvert à tout aide et pardonnez-moi si la solution est vraiment enfantine.

Merci d'avance et à bientôt.
PS: j'utilise IE7 (je sais..)

Signé Sagat

3 réponses

Messages postés
3426
Date d'inscription
lundi 26 décembre 2005
Statut
Membre
Dernière intervention
14 janvier 2011
13
Bonjour,
voir du coté des marges négatives...avec un DIV en position absolute
exemple :
<html>
<head>
<style type="text/css">
div {
  position : absolute;
  top : 0;
  /* la partie qui centre */
  left : 50%;
  margin-left : -350px;
  margin-right : -350px;

  width : 700px;
  height : 200px;
  border : 1px solid blue;
}
</style>
</head>

blablablablabla

</html>
;O)
Messages postés
166
Date d'inscription
mercredi 27 juin 2007
Statut
Membre
Dernière intervention
31 mars 2014
1
Merci PetoleTeam, tout marche niquel.

L'utilisation de marge négative, c'est bête tellement c'est logique...

Merci encore.

Signé Sagat
Messages postés
13
Date d'inscription
samedi 24 juin 2006
Statut
Membre
Dernière intervention
9 juillet 2009

Bonjour,


Le code de Petrol team n'est pas tres propre, il est dommage d'utiliser de la position absolu alors que ce n'est qu'une question de marge du document.


Il suffit de mettre les marge a zero sur le Body.





 





Ensuite, n'oubli pas de mattre le style du div pour enlever les marges. Si tu utilise un table aussi.

Bref j'ai poster ce message pour ce qui rechercherai sur le site.

a +