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 :

Mise en page


Sujet :

CSS

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre averti
    Profil pro
    Inscrit en
    Décembre 2003
    Messages
    46
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Décembre 2003
    Messages : 46
    Par défaut Mise en page
    Bonjour,

    Je dois réaliser une mise en page d'un site web avec un cahier des charges assez strict.
    La page doit être composée :
    - d'un bandeau toujours visible à l'écran
    - d'un pied de page toujours visible également fixé toujours en bas de celle-ci.
    (même quand le navigateur n'est pas en plein écran)

    La ou je galère, c'est que la partie centrale doit être composée de 2 parties indépendantes (voire 3) côte à côte :
    - à gauche un menu
    - une partie contenu disposant d'une barre de scrolling qui lui est propre.
    - éventuellement une partie droite pour des liens ou infos contextuels.
    En fait, les 2 ou 3 parties doivent avoir leur propre barre de scrolling intégrée. (exit donc la barre de scrolling du navigateur).

    Je parviens
    - à fixer les bandeau et pied de page
    - à créer dans une page isolée un div avec un scrolling propre.
    Mais impossible d'assembler le tout pour obtenir le résultat escompté.
    Aussi, j'en appelle à votre aide.

    D'avance merci

  2. #2
    Modérateur

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

    Informations forums :
    Inscription : Janvier 2011
    Messages : 17 212
    Par défaut
    Bonjour,
    pourrais tu nous montrer la structure/css que tu as prévu cela serait une bonne base de départ me semble t-il.

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

    Informations forums :
    Inscription : Décembre 2003
    Messages : 46
    Par défaut
    Bonjour,

    Je suis parti de la structure suivante :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
     
    <div id="container">
       <div id="header"> Bannière </div>
          <div id="content"> 
             Un texte très très long ...
          </div>
          <div id="footer"> Pied de page </div>
    </div>
    avec le 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
    30
    31
    32
    33
    34
    35
    36
     
    html , body  {
    margin:0;
    padding:0;
    height:100%;
    }
     
    #container {
    min-height:100%;
    height:100%;
    width:800px;
    margin:0 auto;
    }
     
    #header {
    position:fixed;
    top: O;
    height:200px; 
    width:800px;
    background:#CCCCCC;
    }
     
    #content {
    padding-top:200px;     /* correspond à la hauteur du header */
    padding-bottom:100px;  /* correspond à la hauteur du footer */
    width:800px;
    background:#DDDDDD;
    }
     
    #footer {
    position:fixed;
    bottom:0;
    background:#CCCCCC;
    height:100px;
    width:800px;
    }
    Ceci marche très bien avec un texte très long, y compris lorsque l'on réduit la surface d'affichage du navigateur en plein écran.
    Avec un texte court, on remarque que la partie centrale (div id="content") n'occupe pas toute la hauteur (décelable via la couleur de fond).

    J'aimerai bien découper la partie centrale en deux (voire 3) parties :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
     
    <div id="content"> 
       <div id="left" class="scrolling"> ... </div>
       <div id="right" class="scrolling"> ... </div>
    </div>
    J'ai essayé des CSS tels que :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
     
    .scrolling {
    height:100%;
    width:400px;
    overflow:auto;
    overflow-x:hidden;
    }
    sans succès.
    A noter que dans la plupart des tentatives, je n'arrive pas à découper le l'espace du milieu en 2 (voire 3) colonnes.

  4. #4
    Membre très actif
    Homme Profil pro
    Inscrit en
    Juin 2012
    Messages
    136
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Nord (Nord Pas de Calais)

    Informations forums :
    Inscription : Juin 2012
    Messages : 136
    Par défaut
    Si tu veux des colonnes cotes a cotes il faut utiliser float je crois.

  5. #5
    Membre averti
    Profil pro
    Inscrit en
    Décembre 2003
    Messages
    46
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Décembre 2003
    Messages : 46
    Par défaut
    Merci.
    On peut effectivement utiliser float.
    Comme par exemple :
    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
     
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
    <head>
       <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
      <style type="text/css">
     
    #content {
    	width: 800px;
    	height: 400px;
    	background:#CCCCCC;
    	display: inline-block;	
    }
     
    #gauche {
    	float: left;
    }
     
    #droite {
    	float:right;
    }
     
    .scrolling {
    	height:100%;
    	width:400px;
    	overflow:auto;
    	overflow-x:hidden;
    	display: block;	
    }
       </style>
    </head>
    <body >
    <div id="content">
       <div class="scrolling" id="gauche"> 
           texte long ...
       </div>
       <div class="scrolling" id="droite"> 
           texte long ...
       </div>
    </div>
    </body>
    </html>
    J'obtiens bien le résultat escompté. Deux parties côte à côte ayant des ascenseurs.
    Mais je ne parviens pas à "intégrer ceci au" / "remplacer le" content du code donné dans mon post précédent afin d'obtenir ce que je souhaite.
    J'ai essayé de jouer avec position:, display:, ... sans parvenir au résultat.
    Et quand j'arrive à obtenir un défilement sur la partie de droite, soit les deux parties sont l'une en dessous de l'autre soit superposée.
    Avec
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    #gauche {
    float: left;
    position: fixed;}
    la partie droite est défilante mais pas la gauche: je suis donc limité en hauteur

  6. #6
    Modérateur

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

    Informations forums :
    Inscription : Janvier 2011
    Messages : 17 212
    Par défaut
    Mais je ne parviens pas à "intégrer ceci au" / "remplacer le" content du code donné dans mon post précédent afin d'obtenir ce que je souhaite.
    je dois admettre que j'ai du mal...

Discussions similaires

  1. [VB6+API][Impression] Mise en page
    Par HPJ dans le forum VB 6 et antérieur
    Réponses: 4
    Dernier message: 06/09/2004, 17h11
  2. [CR.NET][VS.NET] mise en page et sections
    Par guignol dans le forum SDK
    Réponses: 8
    Dernier message: 06/08/2004, 15h07
  3. mise en page (Header and Footer) en XML-XSL.
    Par christine dans le forum XSL/XSLT/XPATH
    Réponses: 4
    Dernier message: 01/03/2004, 16h31
  4. [CR] Mise en page
    Par akolyto dans le forum SAP Crystal Reports
    Réponses: 4
    Dernier message: 14/10/2003, 12h22
  5. [mise en page] pour bien indenter son code
    Par bihorece dans le forum C++Builder
    Réponses: 4
    Dernier message: 06/08/2003, 16h14

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