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

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

  7. #7
    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
    C'est à dire, obtenir ce que je souhaite : décrit dans le premier post de cette discussion (18/07 à 18h16)

    Pour arriver à mes fins, j'ai décomposé mon besoin en deux problématiques :
    1- bandeau et pied de page fixés en haut et en bas.
    2- deux blocs cote à cote (avec scrolling) dans un container de taille fixe.

    Pour la problématique n°1 (bandeau et pied), j'ai résolu au moyen du code indiqué dans le post du 19/07 à 10h36. Mais je n'arrive pas dans le partie centrale (<div id="content">) à mettre les deux blocs avec barre de défilement.

    Je parviens à faire 2 blocs avec barre de scrolling dans une page séparée mais cela ne marche pas si j'ajoute le code à mon template précédent.

    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
    <!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">
     
    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;
    height:100%;
    display: inline-block;	
    }
     
    #footer {
    position:fixed;
    bottom:0;
    background:#CCCCCC;
    height:100px;
    width:800px;
    } 
     
    #gauche {
    	float: left;
    	width:400px;
    }
     
    #droite {
    	float:right;
    	width:400px;
    }
     
    .scrolling {
    	height:100%;
    	overflow:auto;
    	overflow-x:hidden;
    	display: block;	
    }
    </style>
    </head>
     
    <body >
     
    <div id="container">
       <div id="header"> Bannière </div>
          <div id="content"> 
    			   <div class="scrolling" id="gauche"> 
    			   	texte tres long ...
    		   	</div>
       			<div class="scrolling" id="droite"> 
       				texte tres long ...
       			</div>
          </div>
          <div id="footer"> Pied de page </div>
    </div>
     
    </body>
    </html>
    La partie centrale passe en dessous du bandeau et/ou pied de page.

  8. #8
    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
    essaies avec ce gabarit
    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
    <!DOCTYPE HTML>
    <html lang="fr">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>[...]</title>
    <style type="text/css">
    #page {
      width:100%;
    }
    #header {
      background:none repeat scroll 0 0 #E0E0E0;
      height:40px;
      margin:auto;
      width:800px;
    }
    #content {
      background:none repeat scroll 0 0 #CCCCCC;
      height:400px;
      margin:auto;
      width:800px;
    }
    #footer {
      background:none repeat scroll 0 0 #E0E0E0;
      height:40px;
      margin:auto;
      width:800px;
    }
    #gauche {
      float:left;
    }
    #droite {
      float:right;
    }
    .scrolling {
      height:100%;
      overflow-x:hidden;
      overflow-y:scroll;
      width: 400px;
    }
    </style>
    </head>
    <body>
    <div id="page">
      <div id="header">HEADER</div>
      <div id="content">
        <div class="scrolling" id="gauche">
          <p>Quare hoc quidem praeceptum, cuiuscumque est, ad tollendam amicitiam valet; illud potius praecipiendum fuit, ut eam diligentiam adhiberemus in amicitiis comparandis, ut ne quando amare inciperemus eum, quem aliquando odisse possemus. Quin etiam si minus felices in diligendo fuissemus, ferendum id Scipio potius quam inimicitiarum tempus cogitandum putabat.</p>
        </div>
        <div class="scrolling" id="droite">
          <p>Quare hoc quidem praeceptum, cuiuscumque est, ad tollendam amicitiam valet; illud potius praecipiendum fuit, ut eam diligentiam adhiberemus in amicitiis comparandis, ut ne quando amare inciperemus eum, quem aliquando odisse possemus. Quin etiam si minus felices in diligendo fuissemus, ferendum id Scipio potius quam inimicitiarum tempus cogitandum putabat.</p>
          <p>Rogatus ad ultimum admissusque in consistorium ambage nulla praegressa inconsiderate et leviter proficiscere inquit ut praeceptum est, Caesar sciens quod si cessaveris, et tuas et palatii tui auferri iubebo prope diem annonas. hocque solo contumaciter dicto subiratus abscessit nec in conspectum eius postea venit saepius arcessitus.</p>
          <p>Quare hoc quidem praeceptum, cuiuscumque est, ad tollendam amicitiam valet; illud potius praecipiendum fuit, ut eam diligentiam adhiberemus in amicitiis comparandis, ut ne quando amare inciperemus eum, quem aliquando odisse possemus. Quin etiam si minus felices in diligendo fuissemus, ferendum id Scipio potius quam inimicitiarum tempus cogitandum putabat.</p>
          <p>Rogatus ad ultimum admissusque in consistorium ambage nulla praegressa inconsiderate et leviter proficiscere inquit ut praeceptum est, Caesar sciens quod si cessaveris, et tuas et palatii tui auferri iubebo prope diem annonas. hocque solo contumaciter dicto subiratus abscessit nec in conspectum eius postea venit saepius arcessitus.</p>
        </div>
      </div>
      <div id="footer">FOOTER</div>
    </div>
    </body>
    </html>

  9. #9
    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 beaucoup.
    C'est ce que je souhaite obtenir comme Gabarit à un petit détail près :
    Cela doit occuper toute la hauteur du navigateur (pied de page fixé en bas et partie prenant toute la hauteur entre le bandeau et le pied de page)

    J'ai ajouté
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
     html , body  {
    height:100%;
    }
    et fait quelques tentatives :
    - height:100% / auto sur le content
    - bottom:0px; position:fixed sur le footer.
    sans succès

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