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] Pb header footer et div scrollable


Sujet :

CSS

  1. #1
    Membre éprouvé
    Profil pro
    Inscrit en
    Août 2005
    Messages
    115
    Détails du profil
    Informations personnelles :
    Âge : 40
    Localisation : France

    Informations forums :
    Inscription : Août 2005
    Messages : 115
    Par défaut [CSS] Pb header footer et div scrollable
    Bonjour,
    j'ai longuement recherché et trouvé des débuts de réponse sur ce forum mais en vain impoosoble de mettre la mian sur la réponse.

    J'ai une page dont une entéte (header) fixe un pied fixe (footer) et entre les deux un main.
    Le footer et le header doit être toujours respectivement en haut et en bas même quand l'utilisateur modifie la taille de son navigateur.
    De plus le main doit donc se redimensionner automatiquement et offrir une scrollbar lorsqu'il le faut.

    Pour le moment header et footer toujours à leur place respective ça marche.
    PAr contre problème pour toujours avoir un main à 100% avec une scrollbar quand il le faut

    J'espère que vous avez compris mon problème et espère que vous trouverai une solution

    Merci d'avance !

  2. #2
    Membre expérimenté Avatar de Crazyblinkgirl
    Profil pro
    Inscrit en
    Janvier 2003
    Messages
    341
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Janvier 2003
    Messages : 341
    Par défaut
    Bonjour,

    Peux-tu montrer ton code stp?

  3. #3
    Membre éprouvé
    Profil pro
    Inscrit en
    Août 2005
    Messages
    115
    Détails du profil
    Informations personnelles :
    Âge : 40
    Localisation : France

    Informations forums :
    Inscription : Août 2005
    Messages : 115
    Par défaut
    ok
    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
    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
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
     
    html, body {
      height: 100%;
      padding: 0;
      margin: 0;
    }
     
    body {
      font: 11px Verdana, sans-serif;
      text-align: center;
      background-image:url(images/fond.jpg);
      background-repeat:repeat-x;
    }
     
    #conteneur_page {
      margin: 0 auto;
      width: 750px;
      background: #DDD;
      text-align: left;
      position: relative;
      min-height: 100%;
      max-height: 100%; 
      height: 100%; 
    }
     
    #haut {
    	background-color:#151515;
    	width:100%;
    	background-image:url(images/haut.jpg);
    	background-position:left;
    	background-repeat:no-repeat;
    	height: 50px;
    }
     
    #menu
    {
    	height:20px;
    	background-color:#FFFFFF;
    	vertical-align:middle;
    }
     
    a.menu
    {
    	color:#000000;
    	text-decoration: none;
    	font-size:11px;
    	font-weight: bold;
    	text-align: center;
    	padding-left:20px;
    	padding-right:20px;
    	line-height:20px;
    }
     
    a.menu:hover {
      background-color:#E3E3E3;
    }
     
    #conteneur {
      padding: 0 0 40px 1em;
    }
     
    #conteneur:after {
      clear: both;
      display: block;
      font: 1px/0px serif;
      content: ".";
      height: 0;
      visibility: hidden;
    }
     
    #princ {
     
    	float : right;
    	width :80%;
    }
     
    #princ_texte {	
    	position:absolute;
    	overflow-y:scroll;
    	overflow-x:hidden;
     
    }
     
    #menu_context {
    	float : left;
    	width : 18%;
    }
     
    #bas {
      width: 100%;
      background-color:#333333;
      position: absolute;
      bottom: 0 !important;
      bottom: -1px;
      height: 20px;
      padding: 0 0em;
      line-height: 20px;
     
    }
     
    a.bas{
    	color:#FFFFFF;
    	text-decoration: none;
    	font-size:11px;
    	font-weight: bold;
    	text-align: center;
    	padding-left:20px;
    	padding-right:20px;
    	line-height:20px;
    }
     
    .titre {
    	font-size: 16px;
    	color: #CCCCCC;
    	font-weight: bold;
    	line-height:40px;
    }
     
    table
    {
    	font: 11px Verdana, sans-serif;
    	text-align:left;
    }
    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
    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
     
    <HTML>
    	<HEAD>
    		<title>Effect Software</title>
    		<LINK href="style.css" type="text/css" rel="stylesheet">
    			<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    	</HEAD>
    	<body>
    		<div id="conteneur_page">
    			<div id="haut"></div>
    			<div id="menu"><A class="menu" href="index.aspx">Accueil</A> <A class="menu" href="index.aspx?cat=prod">
    					Produits</A> <A class="menu" href="index.aspx?cat=ser_for">Services &amp; Formations</A> <A class="menu" href="#">
    					Education</A><A class="menu" href="#">Support &amp; téléchargement</A>
    			</div>	
    			<div id="conteneur">
     
     
    	<div id="princ">
     
     
    			  	<div id="princ_texte">
    		<ul>  
              <li>sqdqsdqsd</li>
    	      <li>sqdqsdqsd</li>
    	      <li>sqdqsdqsdqsdsqd</li>
    	      <li>ezrezrezrzerezrezrezrezr</li>
    	      <li>ezrezrzerzerzerezrr</li>
    	      <li>ezrzerzer</li>
    	      <li>sdfdsfdsfdsfsdfsdf</li>
    	      <li>sdfdsfdsfdsfsdfsdf</li>
    	      <li>sdfdsfdsfdsfsdfsdf</li>
    	      <li>sdfdsfdsfdsfsdfsdf</li>
    	      <li>sdfdsfdsfdsfsdfsdf</li>
    	      <li>sdfdsfdsfdsfsdfsdf</li>
    	      <li>sdfdsfdsfdsfsdfsdf</li>
    	      <li>sdfdsfdsfdsfsdfsdf</li>
    	      <li>sdfdsfdsfdsfsdfsdf</li>
    	      <li>sdfdsfdsfdsfsdfsdf</li>
    	      <li>sdfdsfdsfdsfsdfsdf</li>
    	      <li>sdfdsfdsfdsfsdfsdf</li>
    	      <li>sdfdsfdsfdsfsdfsdf</li>
    	      <li>sdfdsfdsfdsfsdfsdf</li>
     <li>sdfdsfdsfdsfsdfsdf</li>
     <li>sdfdsfdsfdsfsdfsdf</li>
     <li>sdfdsfdsfdsfsdfsdf</li>
     <li>sdfdsfdsfdsfsdfsdf</li>
     <li>sdfdsfdsfdsfsdfsdf</li>
     <li>sdfdsfdsfdsfsdfsdf</li>
     <li>sdfdsfdsfdsfsdfsdf</li>
     <li>sdfdsfdsfdsfsdfsdf</li>
     <li>sdfdsfdsfdsfsdfsdf</li>
     <li>sdfdsfdsfdsfsdfsdf</li>
     <li>sdfdsfdsfdsfsdfsdf</li>
     <li>sdfdsfdsfdsfsdfsdf</li>
     <li>sdfdsfdsfdsfsdfsdf</li>
     <li>sdfdsfdsfdsfsdfsdf</li>
     <li>sdfdsfdsfdsfsdfsdf</li>
     <li>sdfdsfdsfdsfsdfsdf</li>
     <li>sdfdsfdsfdsfsdfsdf</li>
     <li>sdfdsfdsfdsfsdfsdf</li>
     <li>sdfdsfdsfdsfsdfsdf</li>
     <li>sdfdsfdsfdsfsdfsdf</li>
     <li>sdfdsfdsfdsfsdfsdf</li>
     <li>sdfdsfdsfdsfsdfsdf</li>
     <li>sdfdsfdsfdsfsdfsdf</li>
     <li>sdfdsfdsfdsfsdfsdf</li>
     <li>sdfdsfdsfdsfsdfsdf</li>
     <li>sdfdsfdsfdsfsdfsdf</li>
     <li>sdfdsfdsfdsfsdfsdf</li>
    </ul>
     
    	  </div>
      </div>
     
    </div>
    			<div id="conteneur_bas">
    				<div id="bas"><A class="bas" href="#">A propos d'</A> <A class="bas" href="#">
    						Contactez-nous</A>
    				</div>
    			</div>
    		</div>
    	</body>
    </HTML>

  4. #4
    Membre éclairé Avatar de Davboc
    Profil pro
    Inscrit en
    Novembre 2005
    Messages
    266
    Détails du profil
    Informations personnelles :
    Âge : 41
    Localisation : France, Ille et Vilaine (Bretagne)

    Informations forums :
    Inscription : Novembre 2005
    Messages : 266
    Par défaut
    dans ton css pour avoir la scrollbar qui apparait en cas de besoin
    je crois pas que ce soit 100% qu'il faille mettre vu qu'il ne doit faire qu'une partie de la page... peut être que 100%-70px ça marche... a tenter j'ai de gros doute qd meme

    voila c tout ce que je peux te dire...

  5. #5
    Membre expérimenté Avatar de Crazyblinkgirl
    Profil pro
    Inscrit en
    Janvier 2003
    Messages
    341
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Janvier 2003
    Messages : 341
    Par défaut
    Bonjour,

    Essaies :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
     
    #conteneur { 
      padding: 0 0 40px 1em; 
      overflow:auto;
      height:482px;
    } 
    #princ_texte {    
       position:absolute;     
    }

  6. #6
    Membre éprouvé
    Profil pro
    Inscrit en
    Août 2005
    Messages
    115
    Détails du profil
    Informations personnelles :
    Âge : 40
    Localisation : France

    Informations forums :
    Inscription : Août 2005
    Messages : 115
    Par défaut
    pour la solution :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
     
    #conteneur {
      padding: 0 0 40px 1em;
      overflow:auto;
      height:482px;
    }
    L'affichage ne sera pas dynamique selon la taille du navigateur.

    je vais testé ça et je vous dit quoi...

  7. #7
    Membre éprouvé
    Profil pro
    Inscrit en
    Août 2005
    Messages
    115
    Détails du profil
    Informations personnelles :
    Âge : 40
    Localisation : France

    Informations forums :
    Inscription : Août 2005
    Messages : 115
    Par défaut
    Non ça ne fonctionne pas.
    Franchement si une personne trouve, ça serait vraiment trop cool !!

    Je continue de chercher de mon côté.

  8. #8
    Membre éprouvé
    Profil pro
    Inscrit en
    Août 2005
    Messages
    115
    Détails du profil
    Informations personnelles :
    Âge : 40
    Localisation : France

    Informations forums :
    Inscription : Août 2005
    Messages : 115
    Par défaut
    c bon j'y suis arrivé en utilisant du javascript...

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

Discussions similaires

  1. Réponses: 2
    Dernier message: 18/08/2009, 10h58
  2. Réponses: 10
    Dernier message: 06/04/2009, 00h28
  3. [CSS] Problème de taille de div
    Par meda dans le forum Mise en page CSS
    Réponses: 6
    Dernier message: 24/08/2005, 14h30
  4. Div scrollable avec taille en %
    Par Oluha dans le forum Balisage (X)HTML et validation W3C
    Réponses: 3
    Dernier message: 08/04/2005, 11h09
  5. cellule d'une table visible avec focus dans div scrollable
    Par echecetmat dans le forum Général JavaScript
    Réponses: 2
    Dernier message: 17/03/2005, 10h57

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