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

HTML Discussion :

[HTML] Position fixe tableau


Sujet :

HTML

  1. #1
    Membre averti
    Profil pro
    Inscrit en
    Décembre 2008
    Messages
    15
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Décembre 2008
    Messages : 15
    Par défaut [HTML] Position fixe tableau
    Bonjour,
    J'ai enfin réussi à ce qu'un calque garde sa position selon la résolution de l'écran...
    Par contre, j'aimerai imbriquer dans ce calque un tableau où j'écrirai des mots qui vont vers des liens. Or, dès que je passe par tableau, la mise en forme ne suit pas le calque dans lequel il est, et donc mon tableau se balade selon la résolution de l'écran.
    Comment faire pour qu'un tableau ou autre ait les mêmes propriétés que ce calque, c'est-à-dire qu'il ait une position fixe?
    Je sais pas si je me suis bien fait comprendre.. si oui, vos conseils sont les bienvenus, je galère!
    Merci

  2. #2
    Modérateur
    Avatar de blueice
    Homme Profil pro
    Développeur Web
    Inscrit en
    Mars 2003
    Messages
    3 494
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 50
    Localisation : France, Alpes Maritimes (Provence Alpes Côte d'Azur)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Multimédia et Internet

    Informations forums :
    Inscription : Mars 2003
    Messages : 3 494
    Par défaut
    Non pas compris, un lien ou le code de la page serait d'une aide précieuse.

  3. #3
    Membre averti
    Profil pro
    Inscrit en
    Décembre 2008
    Messages
    15
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Décembre 2008
    Messages : 15
    Par défaut
    voilà le code du calque où est inséré un tableau:

    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
    <div id="comp">
      <div align="center">
        <table width="100%" height="100%" border="0" align="center" onMouseOver="MM_showHideLayers('comp','','show')" onMouseOut="MM_showHideLayers('comp','','hide')" id="tabcomp">
          <tr>
            <td height="18"><div align="left"><a href="#"> B&acirc;timent</a></div></td>
          </tr>
     
          <tr>
            <td height="18" scope="row"><div align="left"><a href="#">Terrassement</a></div></td>
          </tr>
          <tr>
            <td height="18" scope="row"><div align="left"><a href="#">R&eacute;seaux</a></div></td>
          </tr>
          <tr>
            <td height="18" scope="row"><div align="left"><a href="#">Ouvrages d'art</a> </div></td>
          </tr>
          <tr>
            <td height="18" scope="row"><div align="left"><a href="#">Location</a></div></td>
          </tr>
        </table>
      </div>
    </div>

  4. #4
    Membre chevronné Avatar de GihefBey
    Profil pro
    Inscrit en
    Avril 2006
    Messages
    366
    Détails du profil
    Informations personnelles :
    Localisation : France, Paris (Île de France)

    Informations forums :
    Inscription : Avril 2006
    Messages : 366
    Par défaut
    Bonjour,

    Le peu de code que tu montres semble inutilement compliqué pour fabriquer ce qui ressemble à un menu.
    Quel est l'intérêt de ces <div> sans identifiants qui ne servent qu'à aligner ? Les deuxièmes pour contrer la première.

    Comme beaucoup d'autres, blueice préférerait le code complet de la page.
    Tout son code HTML et, bien sûr, les CSS qui y sont liées.
    Il préférerait encore un lien www vers cette page et sa feuille de styles.
    Comme beaucoup.

    -

  5. #5
    Membre Expert Avatar de HiRoN
    Homme Profil pro
    Développeur Web
    Inscrit en
    Août 2007
    Messages
    2 035
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Var (Provence Alpes Côte d'Azur)

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : Août 2007
    Messages : 2 035
    Par défaut
    Citation Envoyé par GihefBey Voir le message
    Tout son code HTML et, bien sûr, les CSS qui y sont liées.
    +1... De plus, tu utilises pas mal de balises maintenant devenus obsolètes.
    Si tu as une feuille de style, il sera bon de refaire une passe afin d'en externaliser bien plus...
    Pensez à utiliser les ressources disponibles en Dev. Web :
    (x)HTML : Cours (X)HTML / FAQ (X)HTML
    CSS : Cours CSS / FAQ CSS / Galerie CSS
    Javascript : Cours / FAQ / Sources
    Mon site : Développeur Web Freelance

  6. #6
    Membre averti
    Profil pro
    Inscrit en
    Décembre 2008
    Messages
    15
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Décembre 2008
    Messages : 15
    Par défaut
    J'ai finalement fait autrement pour le menu, mais j'ai toujours ce problème de fixation de calque qui bouge selon la résolution de l'écran.

    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
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Plan</title>
    <style type="text/css">
    <!--
    body {
            background-color: #0000FF;
    }
    #Layer1 {
            position:absolute;
            width:100%;
            height:380px;
            z-index:1;
            top: 25px;
            left: 8%;
    }
    #Layer2 {
            position:absolute;
            width:44%;
            height:85%;
            z-index:2;
            top: 8%;
            right: 10%;
    }
    .Style1 {font-size: small}
    #Layer3 {
            position:absolute;
            width:40%;
            height:89%;
            z-index:1;
            top: 3%;
            left: 7%;
    }
    .Style2 {
            font-size: 18px;
            font-weight: bold;
    }
    #Layer4 {
            position:absolute;
            width:44%;
            height:85%;
            z-index:3;
            top: 8%;
            left: 10%;
    }
    -->
    </style>
    <script type="text/JavaScript">
    <!--
    function MM_openBrWindow(theURL,winName,features) { //v2.0
      window.open(theURL,winName,features);
    }
    //-->
    </script>
    </head>
     
    <body>
    <div align="center">
      <div id="Layer4">
        <table width="100%" border="0" align="left" cellpadding="0" cellspacing="0">
          <tr>
            <td><div align="left">Nos coordonn&eacute;es </div></td>
          </tr>
          <tr>
            <td><div align="left"></div></td>
          </tr>
          <tr>
            <td><div align="left">27 rue Jules Ferry </div></td>
          </tr>
          <tr>
            <td><div align="left">T&eacute;l:</div></td>
          </tr>
          <tr>
            <td><div align="left">Fax:</div></td>
          </tr>
          <tr>
            <td><div align="left">Mail:</div></td>
          </tr>
          <tr>
            <td><div align="left"></div></td>
          </tr>
          <tr>
            <td><div align="left"></div></td>
          </tr>
          <tr>
            <td><div align="left">St Julien </div></td>
          </tr>
          <tr>
            <td><div align="left">T&eacute;l</div></td>
          </tr>
    	    <tr>
            <td><div align="left">Fax:</div></td>
          </tr>  <tr>
            <td><div align="left">Mail:</div></td>
          </tr>
        </table>
      </div>
    <img src="../images/cadre.jpg" width="914" height="400" border="0" /></div>
    <div id="Layer1"></div>
    <div id="Layer2">
      <div align="center">
        <p><img src="../images/plan_modane2.gif" width="407" height="309" border="0" onclick="MM_openBrWindow('plan_centre.html','Plan','width=600,height=550')" /></p>
        <p class="Style1">Cliquez sur l'image pour agrandir </p>
      </div>
    </div>
    </body>
    </html>



    C'est surtout pour le calque layer4 qu'il y a problème: sur un grand écran, son contenu est trop à gauche, en dehors du cadre blanc, alors qu'il est dedans sur un écran de + petite taille. Et j'aimerai qu'il soit toujours à la même place...

  7. #7
    Membre averti
    Profil pro
    Inscrit en
    Décembre 2008
    Messages
    15
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Décembre 2008
    Messages : 15
    Par défaut
    Mmmm ayé je crois avoir trouvé la solution: il faut mettre une valeur en pixel dans margin-left.

  8. #8
    Membre chevronné Avatar de GihefBey
    Profil pro
    Inscrit en
    Avril 2006
    Messages
    366
    Détails du profil
    Informations personnelles :
    Localisation : France, Paris (Île de France)

    Informations forums :
    Inscription : Avril 2006
    Messages : 366
    Par défaut
    Si ça te convient et que ça fonctionne, ça marche.

    Mais il serait plus simple que toutes les complications que tu as mises en œuvre soient évitées, de faire un peu plus logiquement tout en utilisant l'existant

    J'obtiens un effet que j'imagine correct en remplaçant la <div align="center"> par <div id="conteneur"> et en lui appliquant
    Code CSS : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    #conteneur {
       position: relative;
       margin : 0 auto;
       width : 904px;
       height : 400px;
    /*   background: #00f url(../images/cadre.jpg) no-repeat center top;*/
      }
    Tu as remarqué que l'image de fond a été mise en commentaire.
    Tu pourrais supprimer l'image du 2e tableau si tu lui donnais les bonnes dimensions à l'origine et si tu la plaçais en arrière-plan de ce bloc.

    Et puis, donne des noms évocateurs à tes styles "#Layer1 .Style2..." ne sont pas parlants, on ne sait pas à quoi ça se réfère.
    Et, comme tu utilises un tableau, tous ces blocs en absolute sont inutiles**.
    Place tes données dans les <td> de ce tableau.

    Ne laisse pas traîner ton adresse e-mail en clair comme ça.
    Gare aux spams.


    **
    En fait, c'est le tableau qui est inutile.

    -

  9. #9
    Membre averti
    Profil pro
    Inscrit en
    Décembre 2008
    Messages
    15
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Décembre 2008
    Messages : 15
    Par défaut
    ok, merci beaucoup d'avoir pris le temps de me répondre!

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. Première colonne tableau position:fixed sur firefox
    Par dragonfly dans le forum Mise en page CSS
    Réponses: 5
    Dernier message: 09/03/2015, 10h13
  2. Tableau HTML taille fixe
    Par shuyun dans le forum Balisage (X)HTML et validation W3C
    Réponses: 7
    Dernier message: 28/08/2009, 15h35
  3. Tableau html position en css
    Par Tor_XIII dans le forum Mise en page CSS
    Réponses: 3
    Dernier message: 04/10/2006, 13h52
  4. Centrer une <div> en position fixe sous IE
    Par Jorus dans le forum Mise en page CSS
    Réponses: 8
    Dernier message: 23/09/2004, 15h29

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