[CSS] Bug alignement en bas

Discussion dans 'Développement d'un site Web ou d'une appli mobile' créé par Albataur, 11 Février 2006.

  1. Albataur
    Albataur WRInaute discret
    Inscrit:
    27 Août 2005
    Messages:
    50
    J'aime reçus:
    0
    Salut,

    J'ai déja mis le même message sur le forum alsacréations, mais j'ai pas encore réussi à le resoudre donc j'essaye ici ;)

    Tout fonctionne bien avec mon site mis à part un bug de positionnement qui apparait à la fois sur IE et FF.
    Voici le problème : http://img470.imageshack.us/img470/9656 ... re13ht.jpg

    Voici le site sur lequel il y a le problème : -www.narguile.info

    L'image remontée est normalement collée en bas, voici le code css que j'ai utilisé pour la positionner :

    .foot img{
    position: absolute;
    bottom: 0px;
    right: 0px;
    }

    L'image est dans une div avec class="foot", vous l'aurez deviné. :)

    Ce problème ne semble apparaitre que sur certaines pages.
    Ce que j'ai constaté c'est que lorsque la page est déja en cache, il n'y a pas de problème.
    Lorsqu'il y le bug et que l'on déroule le menu déroulant le foot se repositionne correctement. Peut-être que c'est lié à ça.
    J'ai essayé plusieurs bricolages pour corriger ça mais rien de concluant.
    Pour le moment ce que je fais c'est qu'un des menus est en display:block et le javascript le cache lors de l'évènement onload. Ca fonctionne mais ca laisse le menu ouvert pendant tout le chargement de la page, moyen quoi confus

    Quelqu'un sait t'il d'où cela pourrait venir ?

    Merci d'avance !

    a+ 8)
     
  2. fra_arf
    fra_arf WRInaute occasionnel
    Inscrit:
    22 Novembre 2005
    Messages:
    390
    J'aime reçus:
    0
    Bonsoir, je comprend pas pourquoi tu met ton image en image alors que tu pourai la mettre en background et cela pourrai corriger pas mal de problème je pense.
     
  3. jOoL
    jOoL WRInaute occasionnel
    Inscrit:
    5 Mai 2005
    Messages:
    388
    J'aime reçus:
    0
    pour régler ton problème, tu remplace le code du bas de ta page:

    Code:
    ...
    	</div>
    	
    	<img src="img/bas.png" alt="Foot" class="foot">
    	
    	<p class="signature">
    	Site déclaré à la cnil n°1106493 - <a href="infos.php">Crédits</a> -      <a href="contacts">Contacts</a>
    
    	</p>
    	
    	
    </div>
    
    

    par celui-ci:

    Code:
    ...
    	</div>
    	
          <div id="footer">
    	      <img src="img/bas.png" alt="Ceci est une description qui contient des mots-clés">
    	      <p class="signature">Site déclaré à la cnil n°1106493 - <a href="infos.php">Crédits</a> -      <a href="contacts">Contacts</a>
                  </p>
           </div>
    	
    	
    </div>
    
    
    ensuite, dans ta css, tu enlèves la class ".foot img", et tu mets cette définition la:


    Code:
    
    /* FOOTER */
    
    #footer{
       position:absolute;
       bottom:0;
       width:750px;
       margin:auto;
       text-align:center;
    }
    
    et ça devrait résoudre ton affaire.

    jOoL



    [/code]
     
  4. Albataur
    Albataur WRInaute discret
    Inscrit:
    27 Août 2005
    Messages:
    50
    J'aime reçus:
    0
    Merci à fra_arf et jOol pour vos réponses :)

    fra_arf >

    En fait c'est pas si évident que ça de le mettre en fond ...
    Je pourrais mettre l'image en fond de quel div ?
    Celle qui englobe tout a déja pour fond une ligne d'1px qui fait le fond principal étirable.

    jOol >

    J'ai fait exactement ce que tu m'as dit (mis à part les mots clés).
    La bonne nouvelle c'est que ça met bien le foot à l'endroit qu'il faut. La mauvaise c'est que ça ne corrige pas le bug :?


    Cependant je crois que j'ai trouvé l'origine du problème et l'explication me semble assez logique.

    Je pense que le bug vient du fait que je ne spécifie pas les dimensions des images et en particulier leur hauteur.
    Du coup lors du chargement de la page et du calcul des positionnements des éléments de ma page, le navigateur n'arrive à savoir où placer le foot pour qu'il soit tout en bas.
    Il me semble que le navigateur calcule la hauteur totale de la div étirable en faisant la somme de tous les éléments de cette div.
    Or il fait ce calcul une fois qu'il a reçu tout le html et à ce moment là il ne connait pas encore la hauteur des images puisqu'elle sont chargées ensuite.

    Ca pourrait expliquer également pourquoi ça remet tout en ordre lorsqu'on déroule le menu déroulant. Le navigateur doit "rafraichir" la page en recalculant toutes les hauteurs, et vu que l'image est en cache, il connait sa hauteur et peut faire le calcul correctement.

    En tout cas, j'ai modifié mon code php pour mettre des attributs de hauteur sur les images et ça a l'air de ne plus faire le bug :D
     
  5. jOoL
    jOoL WRInaute occasionnel
    Inscrit:
    5 Mai 2005
    Messages:
    388
    J'aime reçus:
    0
    en fait c'est tout bête.

    Tu laisses le <div id="footer">

    et dans la css, tu enlèves simplement les valeurs:

    Code:
    position:absolute;
    bottom:0;
    Tu ajoutes la valeur:

    Code:
    clear:both;
    et ton div footer sera toujours en bas.

    Cette fois c'est sur, ça va marcher.


    En fait, le position absolute, bottom:0, se calcule a partir du bas de l'écran. Hors, si ta page est plus longue que l'écran, ton footer n'est pas en bas de la page.
    :)
     
  6. Albataur
    Albataur WRInaute discret
    Inscrit:
    27 Août 2005
    Messages:
    50
    J'aime reçus:
    0
    :)

    C'est loin d'être aussi simple malheureusement.
    Regarde l'image foot, elle doit recouvrir en partie la div de contenu (étirable) pour que l'arrondi se mette sur les bords du cadre.
    Je ne peux donc pas le laisser dans le flux normal.
     
  7. jOoL
    jOoL WRInaute occasionnel
    Inscrit:
    5 Mai 2005
    Messages:
    388
    J'aime reçus:
    0
    mmm...

    je dois partir now, mais envoie moi un mp, et je verrai si je peux t'aider demain ou lundi
     
  8. Albataur
    Albataur WRInaute discret
    Inscrit:
    27 Août 2005
    Messages:
    50
    J'aime reçus:
    0
    Merci de m'avoir proposé ton aide. :)
    J'ai résolu le problème spécifiant dans toutes les images l'attribut height.

    J'ai essayé vraiment beaucoup de solutions mais aucune n'a fonctionné :?
     
Chargement...
Similar Threads - [CSS] Bug alignement Forum Date
[CSS] Application (non souhaitée) d'un effet au parent via :not(:hover) Développement d'un site Web ou d'une appli mobile 17 Novembre 2020
[CSS] Alignement de cadre. Développement d'un site Web ou d'une appli mobile 24 Mai 2013
[CSS] Aligner une image à coté d'une div en display:table-cell ? Développement d'un site Web ou d'une appli mobile 2 Mai 2012
[CSS] Alignement vertical du texte Développement d'un site Web ou d'une appli mobile 20 Avril 2011
[css] Petit souci pour le menu du jour! Développement d'un site Web ou d'une appli mobile 29 Août 2010
[css] Comment centrer un bloc css? Développement d'un site Web ou d'une appli mobile 25 Août 2010
[CSS] Comment faire apparaître le sous-menu ? Développement d'un site Web ou d'une appli mobile 22 Juillet 2010
[CSS] Overflow, float:right, et internet explorer Développement d'un site Web ou d'une appli mobile 10 Août 2009
[css] <li> image en vertical-align:bottom Développement d'un site Web ou d'une appli mobile 18 Juillet 2009
[CSS] bouton non cliquable Développement d'un site Web ou d'une appli mobile 16 Juillet 2009
[CSS] IE8 Développement d'un site Web ou d'une appli mobile 15 Juillet 2009
[CSS] decalage image et texte Développement d'un site Web ou d'une appli mobile 18 Juin 2009
[CSS] : scroller overflow et ie6 :-( Développement d'un site Web ou d'une appli mobile 12 Mai 2009
[CSS] bouton submit + image arriere plan Développement d'un site Web ou d'une appli mobile 20 Avril 2009
[CSS]Positionner la colonne centrale en haut du source Développement d'un site Web ou d'une appli mobile 29 Mars 2009
[Résolu] [CSS] Lien sur tout un div Développement d'un site Web ou d'une appli mobile 23 Février 2009
[CSS] L'élément body Développement d'un site Web ou d'une appli mobile 21 Décembre 2008
[CSS] : menus déroulants Développement d'un site Web ou d'une appli mobile 15 Décembre 2008
[CSS] : problème de mise en page FF3 Développement d'un site Web ou d'une appli mobile 31 Août 2008
[CSS] (encore!) pas compatible FF Développement d'un site Web ou d'une appli mobile 30 Juin 2008