28173 sujets

CSS et mise en forme, CSS3

Bonjour

j'ai un petit soucis de pied de page, qui ne reste pas en place (placer en bas de la page si le contenu est court, ou en bas du contenu si celui ci ne tiens pas dans la page), lorsque la page est dynamique.

Je ne suis pas sur que "dynamique" soit le mot exact, donc le mieux est de vous dire comment cette page est faite.
Elle contient 4 partie (effectifs, matchs, infos, photos) que j'affiche une par une via un menu et une fonction javascript (grace aux propriete display). Mon probleme viens du fait que les 4 partie (div) ont des hauteurs variables.

Au chargement de la page, tout est ok, le pied de page est bien positionné. Le problème apparais lorsque on veut afficher une nouvelle rubrique (un autre div) via le menu: Le pied de page ne bouge pas.
Si le contenu de la nouvelle rubrique est plus court, le pied de page se retrouve a errer seul, au fin fond de la page Smiley ohwell . Si au contraire le contenu est plus grand le pied de page se superpose. Smiley fache

Je suis d'accord que de faire apparaitre a tour de rôle 4 div, n'est peut être pas trés "standards" comme méthode, pourtant mon problème ne se manifeste que sous IE6, sous FF le pied de page se repositionne des que le contenu de la fenêtre change.

J'ajoute que le conteneur général de la fenêtre dans lequel se trouve le pied de page lui se redimensionne parfaitement sous IE6.

la page se trouve là:

http://www.sjlobasket.com/equipes.php

Si vous savez comment l'on peut forcer la reapplication du CSS a la page, sans reactualiser cette derniere, ou que vous avez des idées ou solutions qui pourrais m'aider je suis tout ouïe Smiley biggrin

Merci d'avance.
Modifié par Nauar (01 Feb 2007 - 18:11)
Bonjour,

Page inaccessible !! Sinon met ton css pour ton pied de page dans le code html !

La page était inaccessible lors de mon premier essai, pour le 2eme c'est ok mais pas de bug détecté !!
Modifié par ghost (02 Feb 2007 - 03:02)
Bonjour Ghost, et merci pour ta reponse.

Qu'entends tu par page inaccessible? tu veut parler du code CSS ou carrement de la page?

sinon voici le code CSS que tu souhaite voir:


body, html {
	height:100%;
	margin:0;
	padding:0;
	min-width: 760px;
	}
#conteneur {
	background: repeat url(../images/fond.png);
	_background: repeat url(../images/fond.gif);
	_height:100%;
	min-height: 100%;
	position:relative;
}

....

#piedPage {
	position:absolute;
	background: url(../images/footer.png) repeat-x;
	_background: url(../images/footer.gif) repeat-x;
	line-height:46px;
	width:100%;
	margin:0;
	bottom:0;
	}
Bonsoir,

Pas constaté de bug avec IE 6.0 pour ma part. Ni avec IE 7, d'ailleurs.

Deux recommandations tout de même :
- Pour viser uniquement IE6, passer par des commentaires conditionnels et non pas par le hack CSS du underscore. Les hacks ne sont pas des dispositifs fiables, contrairement aux commentaires conditionnels (plus d'information sur les hacks et les commentaires conditionnels dans la FAQ du forum).
- Il peut être utile de préciser également le positionnement horizontal pour le pied de page. C'est à dire : rajouter un left: 0 (ou right: 0, d'ailleurs...). Il me semble avoir vu des cas où, avec certains navigateurs, se contenter d'un bottom: 0 pour positionner un pied de page en absolu pouvait provoquer des décalages horizontaux.

Sinon, pas vu de bug sur le site. Par contre, aussi bien avec Firefox 2 qu'avec IE6, j'ai trouvé le site très peu réactif. Peut-être un problème de Javascript, ou bien de répétition d'image de fond aux dimensions trop réduites (cf. image de fond de l'en-tête et surtout du pied de page... les navigateurs ont du mal à être rapides comme l'éclair lorsqu'il leur faut répéter 1000 fois une image de 1px de large).
Modifié par Florent V. (02 Feb 2007 - 00:43)
Merci pour ta réponse Florent V.

Effectivement, le bug que je décris ne se produit pas toujours. Je suis en 1280*800 pour la résolution, et il est vrai que ca bug uniquement avec une équipe (les poussins). Si tu est avec une grande résolution c'est cette équipe qu'il faut aller voir ('choisissez une autre équipe' en haut a droite), ou bien réduire sa résolution.

Pour le left:0; sur le pied de page je n'ai observé aucun décalage, mais tu as raison, ca ne coute rien de le mettre et peut éviter des surprises.

Quand a la réactivité, merci de me le signaler. Je trouvais mon site trés peu réactif sous IE6, et j'avais poser la question sur ce forum. Suite au conseils du forum (peut être deja les tiens, non?), j'avais redimensionné mon image de fond, de 5*5px à 100*100. Sur ma machine, le site étais devenu aussi réactif sous IE6 que sous FF. Je ne m'en faisais donc plus pour la réactivité. mais si tu me dit que chez toi c'est peu réactif, je vais agrandir aussi, la largeur de mon entête et de mon pied de page! Smiley biggrin
Nauar a écrit :
mais si tu me dit que chez toi c'est peu réactif, je vais agrandir aussi, la largeur de mon entête et de mon pied de page! Smiley biggrin

Disons que c'est peu réactif chez moi sous Firefox 2 sous linux (Firefox étant moins optimisé pour Windows, on a parfois des petites surprises de ce genre sur certains sites, avec certains scripts Javascript, etc.), et c'est catastrophique avec IE6 et IE7 via Wine (une sorte d'émulateur windows pour linux... pas tip top niveau performances). Donc c'est pas une référence, mais ça ne coute rien de corriger aussi pour les images d'en-tête et de pied de page (20px de large au lieu de 5 ou 1px, par exemple).
Nauar a écrit :
Effectivement, le bug que je décris ne se produit pas toujours. Je suis en 1280*800 pour la résolution, et il est vrai que ca bug uniquement avec une équipe (les poussins). Si tu est avec une grande résolution c'est cette équipe qu'il faut aller voir ('choisissez une autre équipe' en haut a droite), ou bien réduire sa résolution.

Je n'ai pas de bug en chargeant une page ou en passant d'une page à l'autre. Par contre, j'obtiens un bug d'affichage lorsque je redimensionne la fenêtre d'Internet Explorer 7 (quelle que soit la résolution) sans recharger la page. Pas de bug avec IE6.

Si tu as un comportement différent, tu pourrais faire des captures d'écran ?

Quoi qu'il en soit, je commencerais par corriger les hacks (utilisation de commentaires conditionnels à la place), rajouter le left: 0, modifier les images, etc., avant de m'arracher les cheveux sur cette histoire. Qui sait, les problèmes sont peut-être liés...
Me voici de retour. Merci Florent V. pour tes réponses et tes nombreux conseils. Je m'attaque au correction que tu suggerre de suite. Je vais faire un petit tour sur les tutos car je ne me suis jamais servi des commentaires conditionnels. Je vais donc découvrir tout ca.
Pour ce qui est des impressions d'écran, voici un aperçu du bug sous IE6.

Pas de bug sur la presentation de l'effectif (1), le pied de page est bien positionné. On passe au calendrier. Le pied de page ne bouge pas (2). il est donc positionné au beau milieu de la page, pardessus le contenu (3) lorsque l'on descend l'ascenseur.

upload/10560-alsa.jpg
Le contenu n'est pas flottant ou positionné en absolu ?

Les commentaires conditionnels fonctionnent-ils correctement pour IE6 (à tester avec une couleur de fond bien vive pour voir si c'est appliqué) ?

Edit : test à l'instant avec IE6, aucun problème. Si ce n'est toujours cette lenteur qui me semble liée -- en partie -- aux répétitions des images du bandeau et du pied de page.
Modifié par Florent V. (06 Feb 2007 - 00:58)