28173 sujets

CSS et mise en forme, CSS3

Bonjour,
Je suis en train de créer un album photos en PHP, avec un design assez simple :
- Une barre de titre en haut, qui couvre toute la largeur de la page
- Un bandeau de miniatures sur la gauche
- Et le reste de la page affiche la photo.
Le bandeau est décalé de 47px vers le bas pour laisser de la place en haut de la page (pour le titre).
Le code du bandeau :
#bandeau {
	position:absolute;
	top:47px;
	left:0;
	width:168px;
	bottom:0;
	overflow:auto;
	text-align:center;
}

Ca marche pas trop mal dans Safari et FireFox.
http://img127.imageshack.us/img127/2646/image1nc4.th.png
Par contre, dans IE c'est une autre paire de manches... J'ai testé IE6 et (brièvement) IE7, et le bandeau ne s'affiche pas correctement : IE ne tient pas compte du bottom:0, ni du overflow, du coup le div s'étend en dehors des limites de la page, et fait apparaître la barre de défilement vertical de l'ensemble de la page Smiley decu
http://img222.imageshack.us/img222/4507/image2zb7.th.png
J'ai trouvé cet article :
http://blog.alsacreations.com/2004/05/13/3-height
Effectivement, la méthode semble fonctionner dans IE6, y compris lorsqu'on y ajoute un overflow:auto. Le problème, c'est que bien évidemment la première photo et le haut de la barre de défilement du overflow recouvrent le titre...
http://img50.imageshack.us/img50/4516/image1bc5.th.png
Et quand je remet top:47px à la place du top:0, étant donné que la hauteur est "100% de la page", le bandeau dépasse en bas de 47px... (j'ai essayé de mettre "height:100%-47px", bizarrement ça ne marche pas Smiley biggol )
Bien sûr, je peux décaler la première photo vers le bas, mais pour la barre de défilement, je fais comment ? Smiley ohwell
Modifié par VinDuv (26 Nov 2007 - 22:05)