begin process at 2012 02 14 08:06:24
  Trouver un code source :
 
dans
 
[ Dernières recherches ]
Accueil > Forum > 

Javascript / DHTML / Ajax

 > 

JavaScript Orienté objet (POO)

 > 

Function & Méthodes

 > 

positionner une div à top=0 et la centrer

Derniers messages déposésPoser une question dans le forum ou lancer une discussion

positionner une div à top=0 et la centrer

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
jeudi 9 juillet 2009 à 12:10:10 | Re : positionner une div à top=0 et la centrer

thony64270

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.

 <body  cellpadding="0px" cellspacing="0px" valign="top" style="padding:0px;margin:0px;border:0px;">

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 +


Cette discussion est classée 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 hauteur de div auto [ par aFauchere ] bonjour, J'ai un petit soucis, voici un code html qui contiens quelques divs et un formulaire. Pour le moment le div conteneur a une hauteur fixe, ma Problême affichage menu sous chrome et firefox. [ par stef1010 ] Bonjour, j'ai décidé de franchir le grand pas : créé mon site. J'ai récupéré un code sources de se site avec un menu qui réagis quand la souris se pos problème avec jQuery jqGalScroll [ par guignia65 ] Bonjour, je suis juste amateur et j'essaie de faire un site avec dans ma page "jQuery jqGalScroll". J'ai essayé de modifier un code récupéré sur le ne Colonnes HTML bordure #B5E655 [ par HACKANDROID ] Bonjours, Je me pose une question : comment mettre une bordure autour de la colonne? Capture de la page : [url=http://nsa27.casimages.com/img/2011 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


Nos sponsors


Sondage...

CalendriCode

Février 2012
LMMJVSD
  12345
6789101112
13141516171819
20212223242526
272829    

Consulter la suite du CalendriCode

Photothèque

Photo Underwater View of the Ocean With LIght Shining Through the WavePhoto Beautiful woman in a bikini meditating on the beach
Photo Landscape of a Sunrise in Kauai Hawaii 

Visiter la photothèque
 
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

Google Coop CodeS-SourceS Google Coop CodeS-SourceS
Temps d'éxécution de la page : 0,468 sec (3)

Nous contacter | Annoncer sur CodeS-SourceS | Mentions légales
Outils Convertisseur VB/C# Snippets et scripts Outils en ligne La ToolBox
Communauté Programmation Photographie Technologie Newsgroups Emploi Forum Blogs
Guide d'achat Téléphonie mobile Image et son Informatique Bureautique Jeux vidéo
Logiciels Internet & Réseau Développement Market Android Jeux & Loisirs Graphisme Multimédia Sécurité Pilotes
Loisirs Cartes virtuelles Vidéos droles Jeux en ligne Géoguide AndroLib (Android Market)