IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

Mise en page CSS Discussion :

[CSS][HTML] Pb avec FF : ancre et barre de nav horizontal


Sujet :

CSS

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre confirmé
    Inscrit en
    Février 2005
    Messages
    79
    Détails du profil
    Informations forums :
    Inscription : Février 2005
    Messages : 79
    Par défaut [CSS][HTML] Pb avec FF : ancre et barre de nav horizontal
    Bonjour.
    J'ai un problème un poil tordu sous firefox.
    Alors voila j'explique.
    Sur le site dont je m'occupe il y avait un glossaire constitué de 3 frames.
    Un frame pour un menu horizontal (les lettres), une frame à gauche pour un menu (les mots) et une frame à droite pour les définitions.

    Bon moi les frames ca m'énerve car c'est plus facile en apparence mais quand on veut maintenir le site c'est l'angoisse.

    Bref j'ai ré-écris tout ca hier et hop plus de frame.
    Pour ca j'ai utilisé la propriété fixed et le hack de IE pour que la page garde la même apparence.
    Et ca marche la partie droite avec les définitions scrolle bien et le reste ne bouge pas (j'ai un effet de passage sous le menu de lettre sous firefox mais rien de bien méchant apparement... mais j'y viens justement).

    Seulement voila.
    il y a des balises <a id=> (des ancres) dans cette page pour que quand on clique sur un mot (partie gauche) on se positionne directement sur la bonne définition (partie droite) mot.
    Sous IE tout va bien.
    Mais sous firefox ca va pas
    En effet pour IE la partie droite de la page (que je vais appeler "content") commence juste après la barre de navigation horizontal (grace au padding-top). Mais sous firefox la partie droite commence bien en haut de la page (l'ascenseur va jusqu'en haut, le padding-top n'affecte que le texte contrairement à IE) et donc quand je clique sur un mot le début de la définition de ce mot est caché par ma barre de navigation horizontal....

    Est ce quelqu'un connait un moyen de faire marcher le padding-top sous firefox avec le même comportement que sous ie ?
    Ou de changer la position de l'ancre ? (que l'ancre n'aille pas en haut de la page sous firefox)

    Voila un exemple illustrant le problème :
    http://batraciens.net/css-astuces/zone-fixe-3.htm

    Sous IE le texte "s'arrete" au moment ou le menu horizontal commence.
    Sous firefox le texte "glisse" sous le menu horizontal (du coup avec une ancre dans la page ca ne marche pas bien)

    (j'espere que j'ai ete clair...)

  2. #2
    Membre Expert Avatar de franculo_caoulene
    Profil pro
    Inscrit en
    Octobre 2003
    Messages
    2 880
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Octobre 2003
    Messages : 2 880
    Par défaut
    Je pense avoir compris ton problème mais je ne comprends pas l'illustration que tu donnes.

  3. #3
    Membre confirmé
    Inscrit en
    Février 2005
    Messages
    79
    Détails du profil
    Informations forums :
    Inscription : Février 2005
    Messages : 79
    Par défaut
    Sur l'exemple que je donne on voit que l'ascenseur sur IE et sur firefox n'ont pas la même taille.
    Sous IE l'ascenseur s'arrete sous la zone figée en haut tandisque que sous firefox la barre va jusqu'en haut de la page.

    Alors apparement ca fait pareil sous IE et firefox car la zone figée en haut à une couleur de fond et sous firefox le texte glisse dessous (donc on ne le voit plus il est masqué par la couleur de fond).
    Si il n'y avait pas cette couleur de fond on verrait le texte passer sous la zone figée en haut de l'ecran (effet que l'on n'a pas sous IE).

    Mais c'est vrai que l'exemple est pas forcément très bon car la zone figée du haut n'est pas tres grande et qu'il n'y a pas d'ancre...
    Mais je n'en ai pas d'autre sous la main

  4. #4
    Membre Expert Avatar de franculo_caoulene
    Profil pro
    Inscrit en
    Octobre 2003
    Messages
    2 880
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Octobre 2003
    Messages : 2 880
    Par défaut
    hum... J'ai compris que les deux premières lignes... Mais je tente quand même une réponse

    Essaye ça:
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
     
    html {
        overflow: hidden;
        height: 100%;
    }
     
    body {
        overflow: auto;
        height: 100%;
      margin: 22px 0% 0% 10% ;
      padding:0
    }
     
    .content  {
      height: 100%;
      overflow: auto}
     
    .menu1   {
      position: absolute;
      top: 0;
      left: 0;
      width: 111%;
      height: 20px;
      background-color:#AFB7D3;
      border-bottom: solid black 1px ;
      text-align:center}
     
    .menu2   {
      position: absolute;
      top: 20px;
      left: 0;
      width: 10%;
      height: 100%;
      background-color:#AFB7D3;
      border-right: solid black 1px}
     
    .menu-coin   {
      position: absolute;
      top: 10px;
      left: 0;
      width: 10%;
      height: 31px;
      background-color:#AFB7D3}
    Sans faire de distinction entre IE et FF, si tu veux le même comportement.

  5. #5
    Membre confirmé
    Inscrit en
    Février 2005
    Messages
    79
    Détails du profil
    Informations forums :
    Inscription : Février 2005
    Messages : 79
    Par défaut
    Merci
    je vais essayer ca cette semaine (je suis un poil débordé )

  6. #6
    Membre confirmé
    Inscrit en
    Février 2005
    Messages
    79
    Détails du profil
    Informations forums :
    Inscription : Février 2005
    Messages : 79
    Par défaut
    J'ai essayé et ca marche pas
    ou bien je n'ai pas réussi à mettre ca en oeuvre.

    Voila le code de ma page (expurgé au maximum)
    La page glossaire2.html
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
     
    <html>
    <head>
      <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
      <link rel="STYLESHEET" type="text/css" href="test.css">
     <!--[if IE]>
     <LINK href="test_IE.css" type=text/css rel=stylesheet>
     <![endif]-->
    </head>
    <body style="PADDING-TOP:55px">
    <!--element fixe horizontal (barre du haut) -->
    <div class="fixed" bgcolor="White" style="z-index:4">
     <table style="position:absolute;top:-2px;" width="100%" bgcolor="White">
       <tr><td style="background:#F9F9FB;border-bottom:1px solid gray;>
          <font color="black">Vous êtes ici : </font><font color="red">Glossaire</font>
        </td></tr>
     </table>
     <div  class="onglets-niveau3" bgcolor="White" style="top:30px;">
      <table  border="0" width="400" cellspacing="0" cellpadding="0">
       <tr><td align="center">A</td></tr>
       <!--liste des lettres, ce sont des liens normalement-->
      </table>     
     </div>
    </div> 
    <!-- element fixe vertical (barre de gauche) -->
    <div class="fixed" style="top:60px">
        <div  class="glossaire-mots">
          <a href="glossaire2.html#mot1" target=_self>mot 1</a><br>
          <a href="glossaire2.html#mot2" target=_self>mot 2</a><br>
          <a href="glossaire2.html#mot3" target=_self>mot 3</a><br>
          <a href="glossaire2.html#mot4" target=_self>mot 4</a><br>
        </div> 
    </div> 
    <!-- zone pouvant "bouger" -->
    <div class="content" style="z-index:0">
      <div class="onglets-niveau3" style="position:absolute;left:300px;border-left:1px solid gray;">
      <div  style="position:relative;left:5px;">
      <ul><a id="mot1">Mot 1</a></ul>
      <p>1er def<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br></p>
      <ul><a id="mot2">Mot 2</a></ul>
      <p>2eme def<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br></p>
      <ul><a id="mot3">Mot 3</a></ul>
      <p>3eme def<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br></p>
      <ul><a id="mot4">Mot 4</a></ul>
      <p>4eme def<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br></p>
      </div>
      </div>
    </div>
    </body>
    le code de cimd.css :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
     
    @media screen {
      body>div.fixed {
        position: fixed;
      }
    }
    div.fixed {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
    }
    .onglets-niveau3 {
      position:absolute;
      left:10px;
      right:15px;
      margin:0px;
      z-index:1;
      text-align:justify;
     }
    .glossaire-mots {
      position:absolute;
      top:15px;
      left:30px;
      right:10px;
      margin:0px;
      z-index:1;
      text-align:left;
     }
    Et enfin de test_IE.css (css qui ne s'execute que sous IE) :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
     
    body {
      overflow-y: hidden;
      margin: 0;
     PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; PADDING-TOP: 34px 
    }
    div.content {
      height: 100%;
      overflow: auto;
    }
    .onglets-niveau3 {
      position:absolute;
      top:0x;
      left:10px;
      right:15px;
      margin:0px;
      z-index:1;
    }
    .imageIE {
     z-index:-1;
    }
    J'espere que ca sera plus clair comme ca (j'aurais du commencer par la d'ailleurs)

    Sous IE ca marche très bien mais on voit bien le probleme avec les ancres sous firefox

Discussions similaires

  1. Réponses: 2
    Dernier message: 04/08/2006, 11h08
  2. [CSS] [HTML] bgcolor avec ma propre couleur
    Par Steff1985 dans le forum Mise en page CSS
    Réponses: 4
    Dernier message: 23/11/2005, 16h46
  3. [html+css] problème menu avec liens display:block
    Par Cypselos dans le forum Mise en page CSS
    Réponses: 5
    Dernier message: 28/08/2005, 09h39
  4. [CSS][HTML] Mise en page : Avec ou sans tableaux ?
    Par arno2000 dans le forum Mise en page CSS
    Réponses: 4
    Dernier message: 09/08/2005, 02h34

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo