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 :

Hauteur de page à 100% [CSS 2.1]


Sujet :

Dimensionnement en CSS

  1. #1
    Membre averti
    Homme Profil pro
    Développeur Web
    Inscrit en
    Juin 2011
    Messages
    22
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : Santé

    Informations forums :
    Inscription : Juin 2011
    Messages : 22
    Par défaut Hauteur de page à 100%
    Bonjour,

    Dans cet exemple :
    http://www.neurodynamique.fr/FindND/...ezidon%20Canon
    comment faire pour que la deuxième rangée du tableau soit variable, c'est à dire qu'elle s'adapte à la fenêtre du navigateur ?
    Je voudrai que la carte soit adaptée à la résolution du navigateur ?
    Je voudrai que soient visibles : le header (titre), le content et le footer...

    Merci de votre aide.

  2. #2
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    17 213
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 17 213
    Par défaut
    Bonjour,
    le moins que l'on puisse dire c'est que la source est brouillon, plusieurs fois le même code javascript ?? du style inline et en fichier et surtout un usage abusif de TABLE in TABLE...mais bon...

    Il te faut revoir la mise en page sur base de DIV

    Je te mets un exemple de ce que cela pourrait donner à partir d'un squelette dispo sur mon disque, aménagé pour ton cas
    Code html : 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
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>[...]</title>
    <style type="text/css">
    html, body {
      height : 100%;
      margin : 0;
      padding :0;
      font-family : Verdana;
      font-size : 1em;
    }
    .larg {
      width : 1024px;
      margin : 0;
      margin-left : auto;
      margin-right : auto;
    }
    #main_page {
      top : 0px;
      height : 100%;
      background-color : #e0fee0;
      bottom : 30px; /* hauteur pied de page */
    }
    #tete_page{
      height : 70px;
      background-color : #e0e0fe;
    }
    #menu_page{
      padding : 10px;
      height : 50px;
      background-color : #f0e0ee;
    }
    #pied_page{
      margin-top : -30px; /* - hauteur pied de page */
      line-height : 30px;
      clear : both;
      background-color : #fee0e0;
      text-align : center;
    }
    #map_canvas{
      position : absolute;
    /*  display : none; /* juste pour voir les emplacements */
      top : 120px; /* hauteur tete_page + menu_page */
      min-height : 500px;
      bottom : 30px;  /* hauteur pied de page */
    }
    </style>
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
    <script type="text/javascript">
    function initialize(){
      // definition options map
      var mapOptions = {
        zoom : 6,
        center : new google.maps.LatLng( 46.9041736, 1.6352488),
        backgroundColor : "white",
        mapTypeId: google.maps.MapTypeId.ROADMAP
      }
      // creation de la carte
      var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
    }
    google.maps.event.addDomListener(window, 'load', initialize);
    </script>
    </head>
    <body>
      <div id="main_page" class="larg">
        <div id="tete_page">
          <b>Le TITRE</b>
        </div>
        <div id="menu_page">
          <b>le Menu</b>
        </div>
        <div id="map_canvas" class="larg">
          <b>Zone MAP</b>
        </div>
      </div>
      <!-- n'appartient pas a main_page -->
      <div id="pied_page" class="larg">
        copyright &copy; 2011
      </div>
    </body>
    </html>
    je te laisse décortiquer, si tu as des questions n'hésite pas...

    J'en profite pour un ou deux remarques
    - l'API Google Map V2.x a été déclaré obsolète, autant passer à la V3.x
    - le type de menu que tu utilises peut se réaliser entièrement en CSS
    - penses à valider tes pages Markup Validation Service, cela aide parfois à supprimer des anomalies d'affichage

    tiens finalement il y en à 3

  3. #3
    Membre averti
    Homme Profil pro
    Développeur Web
    Inscrit en
    Juin 2011
    Messages
    22
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : Santé

    Informations forums :
    Inscription : Juin 2011
    Messages : 22
    Par défaut
    Merci pour cette exemple :

    Quelques questions/observations :

    1/ Le charset "utf8" n'est pas franchement supporté sur le site car les appels SQL et l'affichage/renvois sont plus complexes (??).
    2/ Je savais que l'usage des tables n'était pas très opportun.
    3/ La carte est dynamique et fait appel à une BDD.

    Je vais me mettre au travail pour rendre plus propre le code.

  4. #4
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    17 213
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 17 213
    Par défaut
    1/ Le charset "utf8" n'est pas franchement supporté sur le site car les appels SQL et l'affichage/renvois sont plus complexes (??).
    voir Passez à l'UTF-8 sans manquer une étape
    2/ Je savais que l'usage des tables n'était pas très opportun.
    juste un problème de sémantique (X)HTML, une TABLE sert à contenir des données tabulaires justement mais pas à faire de la mise en page même si cela a beaucoup été utilisé.
    3/ La carte est dynamique et fait appel à une BDD.
    qu'elle soit dynamique ou non ce qui compte c'est la DIV qui la reçoit, l'endroit ou GoogleMap mets les résultats.

  5. #5
    Membre averti
    Homme Profil pro
    Développeur Web
    Inscrit en
    Juin 2011
    Messages
    22
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : Santé

    Informations forums :
    Inscription : Juin 2011
    Messages : 22
    Par défaut
    Merci pour tous ces renseignements.
    Je vais appliquer ces modifications dès que possible.

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

Discussions similaires

  1. Réponses: 6
    Dernier message: 13/11/2006, 18h31
  2. Hauteur de tableau à 100%
    Par olivier4020 dans le forum Balisage (X)HTML et validation W3C
    Réponses: 1
    Dernier message: 25/04/2006, 18h24
  3. Mise en page 100% impossible
    Par Rekiem dans le forum Balisage (X)HTML et validation W3C
    Réponses: 9
    Dernier message: 19/09/2005, 17h31
  4. [CSS]Hauteur de page variable.
    Par gege2061 dans le forum Mise en page CSS
    Réponses: 6
    Dernier message: 16/03/2005, 12h48

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