28173 sujets

CSS et mise en forme, CSS3

[Résolu] Problème alignement vertical via marges négatives

Bonjour tout le monde,
Après avoir lu votre excellent tutoriel sur l'alignement vertical via les marges négatives, j'ai un petit souci avec internet explorer :
Lorsque j'affiche plusieurs barres d'outils en haut du navigateur(ex: celle de google, yahoo,...), ces barres d'outils chevauchent (= cachent) la partie supérieure du div à centrer !!! Smiley decu
En d'autres termes, lorsque je rajoute 4 ou 5 barres d'outils en même temps, la fenêtre disponible retrécit(normal!), mais en même temps ces barres d'outils cachent une partie du div positionné avec marges néfgatives!
Question: Comment alors faire en sorte que le div(contenu à centrer) soit affiché en bas des barres d'outils, et non pas cachés par ces derniers ?
Merci d'avance pour votre réponse Smiley cligne
Modifié par mamy (02 Sep 2006 - 20:13)
Bonsoir mamy,

C'est le problème classique quand on utilise cette technique pour centrer un site. Ça ne touche pas qu'Internet Explorer, et pas seulement quand il y a des barres d'outils d'ajoutées : par exemple les utilisateurs ayants une plus petite résolution. Enfin, quelques soient les raisons, le mécanisme de défilement n'est plus efficace.

Une autre technique pour centrer verticalement peut être l'utilisation d'un tableau conteneur à une cellule qui ferait 100%*100%.

Sans tableau et en gardant cette technique des marges négatives, il y aurait une solution très simple avec les navigateurs modernes, mais pour Internet Explorer 5 et 6, c'est plus compliqué vu que min-height n'est pas implémenté.

Il faudrait alors un élément qui servirait de « cale » et, à cause de IE 5, ajouter un conteneur global plutôt que de styler « body ».

Cela donnerait quelque chose comme : 
html {
	height: 100%;	
}
body {
	margin: 0;
	padding: 0;
	height: 100%;
}
#conteneur {
	height: 100%;
	min-height: 400px;
	min-width: 700px;
	position: relative;
}
#cale {
	height: 400px;
	width: 700px;
}
<body>
<div id="conteneur">
<div id="cale"></div>
	<div id="site">
	...
	</div>
</div>
</body>

700px et 400px étant à modifier selon la largeur ou la hauteur du site à centrer

Il y aurait d'ailleurs moyen de se passer de cette #cale en utilisant le modèle de boîte de microsoft pour IE5 et en stylant « body » pour IE6, mais bon.. (ou encore en utilisant Javascript)
Modifié par Alan (02 Sep 2006 - 18:23)
mille merci pour votre réponse,
Je viens d'essayer votre solution, mais je n'arrive pas à l'appliquer Smiley decu
Voici en gros mon code :

<html>
<body>
<div id="divMere" style"position: relative; width:1000px; height:600px">
Contenu du site
</div></body></html>


Mon problème est que, en essayant votre solution, #divMere n'est pas verticalement au centre, mais décalé beaucoup plus en bas dans la page(il faut scroller pour la voir).L'élément #cale prend toute la place, au centre de la page
Merci d'avance pour votre réponse éclairée Smiley cligne
Modifié par mamy (02 Sep 2006 - 19:35)
Je vois qu'il y a dans votre code 
 style"position: relative; width:1000px; height:600px"

Il faudrait supprimer cette position relatve pour utiliser un positionnement absolu sinon tout sera décalé de la hauteur de la « div#cale ».

Je n'avais pas précisé cela car je pensais que vous utilisiez une position absolue comme dans le tutoriel.

Ceci dit, est-ce que le centrage vertical est si important avec une hauteur aussi grande ? Avec ma résolution je ne verrais pas la différence (à moins de passer en plein écran). Et comme vous le voyez, cela complique pas mal les choses.

Voici ce que cela pourrait donner : 

html {
	height: 100%;	
}
body {
	margin: 0;
	padding: 0;
	height: 100%;
}
#conteneur {
	height: 100%;
	min-height: 600px;
	min-width: 1000px;
	position: relative;
}
#cale {
	height: 600px;
	width: 1000px;
}
#divMere {
	position:absolute;
	left: 50%;
	top: 50%;
	width: 1000px;
	height: 600px;
	margin-top: -300px; /* moitié de la hauteur */
	margin-left: -500px; /* moitié de la largeur */
	background-color: orange;
}

<body>
<div id="conteneur">
<div id="cale"></div>

<div id="divMere">
	contenu du site
</div>

</div>
</body>

Modifié par Alan (02 Sep 2006 - 20:17)
Youpiiiiiiiiiiii Smiley lol
ça marche !!!!!!
Merci Alan.....Champion du monde, hein!!!!!
Cette histoire m'a pourri l'existence depuis quelques jours.
Grâce à ce fabuleux forum, j'ai enlevé une grosse épine du pieds !!!
J'espère que d'autres Alsacréationiens Smiley ravi pourront profiter de la solution d'Alan.
Merci encore Smiley cligne
Modifié par mamy (02 Sep 2006 - 20:47)
Sujet clos
Aller à