centrer un bloc sur la hauteur

15 sept. 2005, 22:50

salut a tous
je voudrais savoir comment on fait pour centrer un bloc sur la hauteur. Je m'explique un peu plus sur mon site : j'ai fait un bloc pour le haut de la page qui ne bouge jamais dedans; il y'a a gauche le logo et a droite la baniere de pub pour alligner la pub a droite. J'ai fait <div align="center"> parce que, en css, ca marchait pas, (demandez pas pouquoi c'est peut etre IE je ne sais pas) mais bon ca c'est resolu. Je cherche maintenant une technique pour centrer sur la hauteur (je sais que je peux marranger en mettant un margin-top en calculant que ca se centre, mais je veux pas: je veux savoir comment on fait c'est tout)

merci d"avance pour vos reponses

15 sept. 2005, 23:28

Salut
Voudrais-tu s'il te plait éditer ton message et ajouter une ponctuation ? C'est particulièrement pénible à lire ton sujet.

15 sept. 2005, 23:33

il est invité, il peut pas éditer.

Pour son PB, il y a un tutau sur Alsace Création qui explique comment faire.

15 sept. 2005, 23:44

T'as raison, j'ai édité pour le faire moi-même.

Pour le tuto alsacreations, c'est ICI

16 sept. 2005, 00:17

desole de vous deranger encore, mais ce qu'il explique dans alsacecration, c'est comment centrer tout le bloc et de tous les cotes; mais mon probleme a moi c'est que je veu juste centrer sur la hauteur, j'ai essaye vite fait de changer les parameres donnes mais ca n'a pas marche.
si quelqu'un pourrait me dire exactement quoi mettre juste pour centrer sur la hauteur ce serait sympa

width=468 height=60 (c'est une baniere de pub dans un bloc de 100% de largeur et 100px de hauteur).

ps: desole pour la ponctuation j'ai toujours tendance a ecrire vite et c'est vrai que ca devient dure a relire apres.

16 sept. 2005, 08:32

pour centrer un bloc dans sa hauteur, tu NE dois PAS utiliser le XHTML. en effet, il n'accepte plus la valeur height: 100%; donc c'est rapé ! si toutefois tu utilises du HTML 4, le bout de code donné plus haut couplé à un valign="middle" devrait résoudre ton probleme !

16 sept. 2005, 14:25

desole vaedan jutilise bien le html 4.01 mais le valign="middle" ne marche pas

16 sept. 2005, 15:44

Tu peux l'aligner avec une feuille de style: La dimension en hauteur est fixée d'avance, c'est d'autant plus facile. Supposons que ta bannière doive se trouver centrée verticalement sur la page:

Code : Tout sélectionner

#banniere {
    position: relative;
    width: 468px;
    height: 60px;
    top: 50%;          /* On positionne le haut de la bannière à la moitié de la page (en hauteur) */
    margin-top: -30px; /* On met une marge négative de la moitiée de la hauteur de la bannière */
}

Et ton élément bannière pour que ça fonctionne doit avoir un attribut id="banniere".

Essaye ça et reviens nous dire ce qu'il en est.

16 sept. 2005, 16:45

ben ca marche a merveille sur IE, pas du tout sur opera et sur mozilla ben jai toujours eu un probleme sur mozzila: c'est qu'il me met une ligne en plus en haut du site alors que j'ai bien mis le margin:0; et padding:0; bon bref la cette fois ci il me sort la baniere a moitie coupee: le haut on le voit pas et le bas de la baniere est dans lespace au dessus du site et rentre legerement dans mon haut de page !!

16 sept. 2005, 16:55

Si tu as cette page en ligne quelque part, on pourra faire des tests, mais là, c'est difficile de travailler sur de l'asbtrait.

16 sept. 2005, 17:10

voila le site est encore en construction donc c'est normal sil n'ya pas de contenu

http://betises.fr.st.free.fr/aaa/index1.htm

16 sept. 2005, 20:47

Bon, le problème vien de la dimension du contenant #entete fixé à 100px:

Corrige donc le code pour le iframe comme ceci:

Code : Tout sélectionner

#en_tete iframe
{
    float: right;
    width: 468px; 
    height: 60px; 
    margin-top: 20px;
}

Ça devrait corriger le problème et tu peux enlever l'attribut align dans la balise <div>, le float right va mettre la bannière à droite.

17 sept. 2005, 22:21

ouais ca marche nikel c'est super bien, j'avais oublié que je pouvais faire ce float right, j'avais plutot pense a un align:right; mais apparemment ca ne marche que sur du texte et pas sur les block

bon lessentiel c'est que maintenan ya plus de probleme un grand merci a toi cyrano

centrer un bloc sur la hauteur

Qui est en ligne