Problème image d'un header qui se décale sous IE

Problème image d'un header qui se décale sous IE - HTML/CSS - Programmation

Marsh Posté le 14-11-2011 à 19:22:46    

Salut à vous.
 
 
Je m'étais lancé voici quelques mois dans la construction d'un site de peintures.
Je reprends les travaux en ce moment  , mais me suis rendu compte d'un petit soucis au sujet de mon entête.  
 
En effet, j'avais créé (ou réorganisé) plusieurs divs pour cet entête, dans l'ordre :
- une div "blocNavigation" : qui servait à mettre mon menu (à double niveau)
- une div "header" : qui sert à afficher la grande image du haut du site
- une div "conteneur_logo" qui servait à ajouter, sous l'image du dessus, un petit logo puis un sous-titre de site...
 
Tout ça fonctionnait bien en avril dernier, mais j'étais sous IE7 et Firefox.
Avec IE8/IE9, c'est différent et il y a un problème : l'image de mon en-tête apparaît décalée, "sortant du cadre du site", et à la suite du menu de "blocNavigation" (au lieu d'être en dessous)
 
Voici le lien du site en question : http://xxxxxx.jimdo.com/  
 
PS : pour rappel c'est ok sous firefox, mais pas bon sous IE8 et 9
Rien de bien grave je pense, mais c'est surtout que tout ça (le CSS) m'est un peu ressorti de la tête :sweat:


Message édité par toum_toum le 14-11-2011 à 22:21:23

---------------
“Et maintenant, la météo" - Soloviev 2022-2024
Reply

Marsh Posté le 14-11-2011 à 19:22:46   

Reply

Marsh Posté le 14-11-2011 à 20:24:21    

Salut,
Vire le float:left sur blocNavigation et ça doit marcher.

 

Le pourquoi de cette différence par contre je sais pas trop. Peut-être un problème de débordement des flottants sous IE...


Message édité par Skopos le 14-11-2011 à 20:24:37
Reply

Marsh Posté le 14-11-2011 à 20:28:41    


Ok, je tente ça...
 
 
Edit : impecc', et un grand merci  :jap:  
 
PS : tu utilises quel "outil" pour faire un diagnostique sur IE ?


Message édité par toum_toum le 14-11-2011 à 20:31:18

---------------
“Et maintenant, la météo" - Soloviev 2022-2024
Reply

Marsh Posté le 14-11-2011 à 20:29:53    

J'me demande, pourquoi tu t'es servi de balises <p></p> vident pour faire un saut de ligne ? les <br> ne suffisent pas ? (surtout qu'il me semble qu'elle ont pas besoin d'être refermés)


---------------
Perhaps you don't deserve to breathe
Reply

Marsh Posté le 14-11-2011 à 20:32:15    

Terminapor a écrit :

J'me demande, pourquoi tu t'es servi de balises <p></p> vident pour faire un saut de ligne ? les <br> ne suffisent pas ? (surtout qu'il me semble qu'elle ont pas besoin d'être refermés)


 
Non ça ce n'est pas moi, c'est la gestion des articles sans doute (ça fonctionne un peu comme un gros blog, mais avec des possibilités d'édition du header notamment assez intéressantes)


---------------
“Et maintenant, la météo" - Soloviev 2022-2024
Reply

Marsh Posté le 14-11-2011 à 20:36:31    


Ca marche même mieux qu'avant : car j'avais été obligé de monter la hauteur du "blocNavigation" un peu artificiellement, à 70px, pour permettre l'affichage possible d'un bloc de nav secondaire (car sinon il était masqué je crois, de mémoire...). Du coup là le clic sur ce menu secondaire fait descendre le header, ce qui est normal et logique, mais ça n'était pas le cas auparavant...
 
 :jap: Merci Skopos


Message édité par toum_toum le 14-11-2011 à 20:37:11

---------------
“Et maintenant, la météo" - Soloviev 2022-2024
Reply

Marsh Posté le 14-11-2011 à 21:25:50    


:jap:

toum_toum a écrit :


Ok, je tente ça...
 
 
Edit : impecc', et un grand merci  :jap:  
 
PS : tu utilises quel "outil" pour faire un diagnostique sur IE ?


L'outil fourni dans IE, un firebug-like (via le menu outils ou f12) :spamafote:

Reply

Marsh Posté le 14-11-2011 à 22:21:04    


Ah oui c'est vrai...  (je ne suis sous cette version d'IE que depuis hier :D )


---------------
“Et maintenant, la météo" - Soloviev 2022-2024
Reply

Marsh Posté le 18-11-2011 à 15:25:33    

Salut à vous,
 
Je reviens avec ma question et le même site.
Mon problème d'image du header était résolu, mais j'ai parlé un peu trop vite, car dès qu'on passe sur une rubrique  
où mon "menu secondaire" apparaît, le décalage se fait de nouveau...
Un petit coup de main là-dessus ?
 
PS : j'oublie de rappeler que le problème se pose sous IE8 ou IE9. Mes blocs y sont comme "figés", du coup l'apparition  
du menu "secondaire" fait que les blocs du dessous, au lieu de descendre un peu (comme ça se passe sous Firefox, par ex),
restent figés et contraignent mon image d'entête à se décaler sur le côté (au lieu de descendre un peu elle aussi...).


Message édité par toum_toum le 18-11-2011 à 21:49:35

---------------
“Et maintenant, la météo" - Soloviev 2022-2024
Reply

Marsh Posté le 18-11-2011 à 15:49:58    

Ci-joint le morceau de code où ça se passe... :
 
 
 

Code :
  1. ...
  2. #container
  3. {
  4.     margin:20px auto 20px auto;
  5.     width:918px;
  6.     background:white;
  7. }
  8. #header
  9. {
  10.     padding:17px 17px 7px 17px;
  11. }
  12. #header h1,
  13. #header a
  14. {
  15.     padding:0;
  16.     font-family:"Helvetica","Lucida Sans Unicode",Tahoma,Verdana,Arial,Helvetica,sans-serif;
  17.     font-size:30px;
  18.     font-weight:normal;
  19.     text-decoration:none;
  20.     line-height:1.3em;
  21.     color:#666666;
  22.     text-align:right;
  23. }
  24. #header a:hover { text-decoration:none;  }
  25. #blocNavigation
  26. {
  27.     width:850px;
  28.     height:40px;
  29. }
  30. #navigation1
  31. {
  32.     float:left;
  33.     width:800px;
  34.     padding:17px 17px 0px 14px;
  35. }
  36. #navigation2
  37. {
  38.     float:left;
  39.     width:800px;
  40.     padding:0px 17px 5px 14px;
  41. }
  42. #sidebar
  43. {
  44.     padding-top:10px;
  45. }
  46. #content
  47. {
  48.     width:820px;
  49.     padding:17px 17px 17px 45px;
  50. }
  51. #footer
  52. {
  53.     clear:both;
  54.     margin-top:10px;
  55.     background-color: #8f8880;
  56.     height:65px;
  57. }
  58. ...


 
 
 
et la partie HTML consacrée à.. :
 
<div id="container">
 
    <div id="blocNavigation">
        <div id="navigation1">
            <var>navigation[1|2|3]</var>
        </div>
 
        <div id="navigation2">
            <var>navigation[1|2|3]</var>
        </div>
    </div>
 
    <div id="header">
        <img src="entete01c.png" alt="" />
    </div>
 
    <div id="conteneur_logo">
        <div id="logo">
            <img src="logo01a.png" alt="" />
        </div>
 
        <div id="titre03">
            Blabla
        </div>
    </div>
 
    <div id="sidebar">
        <var>sidebar</var>
    </div>
 
    <div id="content">
        <var>content</var>
    </div>
 
    <div id="footer">
            <var>footer</var>
        </div>
    </div>
</div>
 
 
 
 
(Edit : je suis sur une solution, en enlevant les float:left également sur les 2 divs #navigation ...)


Message édité par toum_toum le 18-11-2011 à 15:59:11

---------------
“Et maintenant, la météo" - Soloviev 2022-2024
Reply

Marsh Posté le 18-11-2011 à 15:49:58   

Reply

Marsh Posté le 18-11-2011 à 16:09:00    

Je pense que c'est à peu près résolu  : en enlevant les 2 float:left, puis en ajoutant un padding-top à #blocNavigation pour le redescendre un peu et "centrer" un peu le menu principal, c'est à peu près ok.
 
Ceci dit je trouve que ca reste un peu rigide tout ça, quand on passe d'un menu simple aux 2 lignes de menus (si menu "secondaire). Cad que j'aurais préféré voir les blocs situés en dessus descendre un peu avec l'apparition du menu secondaire. Là ils restent figés, et ai été obligé d'ajuster un peu tout pour que ca reste dans les bons alignements...


Message édité par toum_toum le 18-11-2011 à 16:09:17

---------------
“Et maintenant, la météo" - Soloviev 2022-2024
Reply

Marsh Posté le 19-11-2011 à 08:53:45    

Ce sujet a été déplacé de la catégorie Graphisme vers la categorie Programmation par Skopos

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed