Forum |  HardWare.fr | News | Articles | PC | S'identifier | S'inscrire | Shop Recherche
2709 connectés 

  FORUM HardWare.fr
  Programmation
  HTML/CSS

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

 



 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

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

n°2112381
toum_toum
Vivons masqués
Posté le 14-11-2011 à 19:22:46  profilanswer
 

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
mood
Publicité
Posté le 14-11-2011 à 19:22:46  profilanswer
 

n°2112382
Skopos
Titilleur de nombrils...
Posté le 14-11-2011 à 20:24:21  profilanswer
 

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

---------------
userstyles HFR : alléger l'accueil du forum; réduire les img https des quotes. Script AHK ImageFloodHFR
n°2112383
toum_toum
Vivons masqués
Posté le 14-11-2011 à 20:28:41  profilanswer
 


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
n°2112384
Terminapor
I'll see you rise.
Posté le 14-11-2011 à 20:29:53  profilanswer
 

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
n°2112385
toum_toum
Vivons masqués
Posté le 14-11-2011 à 20:32:15  profilanswer
 

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)

n°2112386
toum_toum
Vivons masqués
Posté le 14-11-2011 à 20:36:31  profilanswer
 


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
n°2112387
Skopos
Titilleur de nombrils...
Posté le 14-11-2011 à 21:25:50  profilanswer
 


: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:


---------------
userstyles HFR : alléger l'accueil du forum; réduire les img https des quotes. Script AHK ImageFloodHFR
n°2112388
toum_toum
Vivons masqués
Posté le 14-11-2011 à 22:21:04  profilanswer
 


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

n°2112389
toum_toum
Vivons masqués
Posté le 18-11-2011 à 15:25:33  profilanswer
 

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
n°2112390
toum_toum
Vivons masqués
Posté le 18-11-2011 à 15:49:58  profilanswer
 

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
mood
Publicité
Posté le 18-11-2011 à 15:49:58  profilanswer
 

n°2112391
toum_toum
Vivons masqués
Posté le 18-11-2011 à 16:09:00  profilanswer
 

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
n°2112392
Skopos
Titilleur de nombrils...
Posté le 19-11-2011 à 08:53:45  profilanswer
 

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


---------------
userstyles HFR : alléger l'accueil du forum; réduire les img https des quotes. Script AHK ImageFloodHFR

Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  HTML/CSS

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

 

Sujets relatifs
VBAccess Problème requête paramétrée Formulaireproblème chemin sur un simplewiewer
Où trouver les spécifications des navigateurs sur la gestion des imageprobleme structure
Problème avec firefox et IE[OpenGL] Problème d'aliasing entre les triangles
problème exercice tableauProblème étrange d'inclusion de header
Plus de sujets relatifs à : Problème image d'un header qui se décale sous IE


Copyright © 1997-2018 Hardware.fr SARL (Signaler un contenu illicite / Données personnelles) / Groupe LDLC / Shop HFR