Vous ne trouvez pas de réponse à votre problème ? Alors posez la question dans le forum. Souvenez-vous qu'il n'y a jamais de question bête, mais rester dans l'ignorance parce que l'on n'ose pas poser une question, ça c'est une erreur !

Sujet : positionner une div à top=0 et la centrer [ JavaScript Orienté objet (POO) / Function & Méthodes ] (sagat06)

lundi 13 octobre 2008 à 17:25:18 | positionner une div à top=0 et la centrer

sagat06

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><div style='position:absolute;top:0;'>bla bla</div></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: <div id='gb'>bla bla bla</div>, 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 <div id='gb'>bla bla bla </div>
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


lundi 13 octobre 2008 à 19:22:42 | Re : positionner une div à top=0 et la centrer

PetoleTeam

Membre Club
Réponse acceptée !
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>
<body>
<div>blablablablabla</div>
</body>
</html>

;O)

mardi 14 octobre 2008 à 11:07:28 | Re : positionner une div à top=0 et la centrer

sagat06

Merci PetoleTeam, tout marche niquel.

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

Merci encore.

Signé Sagat



Cette discussion est classé dans : left, top, div, bla, margin


Répondre à ce message

Sujets en rapport avec ce message

bouger une balise div [ par rico21 ] rico21Je foudrait faire varier la valeur TOP et LEFT d'une baliseDIV ou LAYEREX: function fuite() { i++;if (i > 6) return;document.all["Layer1"].le Un div qui suit le curseur [ par xavier1041 ] Bonjour, je cherche de plus près de 3h un script permettant de placer un div en fonction du curseur : je voudrai que le div suive le curseurmais j'ai chgt de style suivant la resolution ? [ par seabird ] Salut, J'ai optimisé mes pages pour un affichage en 1024x 768.J'ai donc rajouté un div pour la centrer si éventuellement la résolution est plus grande mes div ne font pas ce que je leurs dis !#? sale gosses :) [ par frvfrvfrvfrv ] voici a quoi resemble mon script :une partie est ok...... grace a vous tous...... MERCI !donc: html margin-left valeur..... [ par abdoulax ] Bonjour, Je cherche comment récuperer la valeur d'un margin-left et margin-top pour la sauvegarder, puis modifier ces valeurs par l'intermédiere de j Problème d'affichage [ par rachidphp93 ] bonjour tout le monde, j(ai un problème d'affichage d'un menu à gauche, (je sais ce n'est pas trop du Probleme de refresh [ par MrCapo ] Je développe un site et je rencontre un problème.Mon problem est : comment rafraichier deux page à la fois.L'index.php contient trois frames : topFram Ajouter un preload au chargement d'un div [ par renaud2006 ] Bonjour, voila j'utilise une simple fonction de chargement de div en javascript , le petit soussis c'est que j'aimerai y rajouter un préload de charge OPEN DOCUMENT [ par Stater ] Jais une page WEB avec 3 FRAMES (TOP,LEFT) 1 FRAME (TOP) frame static (logo,...) 2 FRAME (LEFT) menu dynamique avec lien sur des documents se trouv coucou , je suis dans la M...... [ par frvfrvfrvfrv ] salut à tous,j'essaye de faire bouger des div , de facon auto , j'ai deja avancer grace à vous tous. Mais pour la suite j'arrive pas a faire la logiqu


Nos sponsors

Sondage...

CalendriCode

Juillet 2009
LMMJVSD
  12345
6789101112
13141516171819
20212223242526
2728293031  

Consulter la suite du CalendriCode

Téléchargements

Logiciels à télécharger sur le même thème :

Comparez les prix Nouvelle version

Photothèque Nouveau !



Développement réalisé par Nicolas SOREL (Nix) avec l'aide de : Cyril DURAND et Emmanuel (EBArtSoft), Merci à Vincent pour ses précieux conseils
CodeS-SourceS.com© Toute reproduction même partielle est interdite sauf accord écrit du Webmaster
CodeS-SourceS.com© est une marque déposée tous droits réservés
Temps d'éxécution de la page : 0,515 sec

Google Coop CodeS-SourceS Google Coop CodeS-SourceS


Certaines images présentes sur le site (notament certains avatars) sont issues des collections IconShock, donc si vous souhaitez utiliser ces icons vous devez les acheter, ne les copiez pas et ne utilisez pas dans vos sites et applications sans les avoir commandé.