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 :

Placer un div en bas de page ou de fenêtre


Sujet :

Positionnement en CSS

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Nouveau membre du Club
    Homme Profil pro
    Développeur informatique
    Inscrit en
    Novembre 2011
    Messages
    5
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Haute Savoie (Rhône Alpes)

    Informations professionnelles :
    Activité : Développeur informatique

    Informations forums :
    Inscription : Novembre 2011
    Messages : 5
    Par défaut Placer un div en bas de page ou de fenêtre
    Bonjour,

    j'ai commencé à réaliser un joli petit site Web, presque prêt à être mis en ligne. Une chose mineure que j'aimerais ajouter, c'est une signature en bas de page. Rien de plus facile, il suffit de mettre ladite signature juste avant </body>. Sauf que mes pages sont formées de div placées avec le style "position : fixed", si bien que ce que j'ajoute ensuite se retrouve en haut de la page.

    Qu'à cela ne tienne, j'ai mis ma signature dans un <div> que je vais aussi placer à coups de style. J'ai donc ma page qui a cette tête :
    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
     
    <!DOCTYPE html>
    <body>
    	<div id="divMenu">
    		<div class="menu_horizontal">
    			<!-- contenu du menu -->
    		</div>
    	</div>
    	<div id="divInformations">
    		<div class="informations_horizontal">
    			<!-- contenu du menu -->
    			<div class="signature">
    				<!-- signature -->
    			</div>
    		</div>
    	</div>
    </body>
    et mon fichier style.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
     
    .menu_horizontal, .menu_vertical {
    	position : fixed;
    	top : 0px;
    	left : 0px;
    	display : block;
    	text-align : center;
    	font-size : 160%;
    	vertical-align : middle;
    	background-repeat : no-repeat;
    	background-attachment : fixed;
    }
     
    .informations_horizontal, .informations_vertical {
    	padding-left : 0.5em;
    	padding-right : 0.5em;
    	right : 0px;
    	position : fixed;
    	bottom : 0px;
    	height : auto;
    	display : block;
    	overflow : auto;
    	background-image : url("images/fond_samourai.jpg");
    	background-repeat : no-repeat;
    	background-attachment : scroll;
    }
     
    .menu_horizontal {
    	background-image : url("images/kanji_horizontal_large_h_128_fond.jpg");
    	background-position : center top;
    }
     
    .menu_horizontal, .tab_menu_horizontal {
    	width : 100%;
    }
     
    .informations_horizontal {
    	top : 128px;
    	left : 0px;
    	background-position : center top;
    }
     
    .signature {
    	position : relative;
    	right : 0px;
    	bottom : 0px;
    	font-family : Times serif;
    	font-style : italic;
    	font-size : 70%;
    	text-align : right;
    	padding-right : 0.4em;
    	padding-bottom : 0.4em;
    }
    Avec "position : relative" dans la classe "signature", j'ai bien ma signature en bas de page sur une page dont la hauteur est supérieure à celle de la fenêtre.

    Là où le bât blesse, c'est que je voudrais afficher la signature en bas de la fenêtre sur les pages dont la hauteur est inférieure à celle de la fenêtre. "position : static" donne le même résultat que "position : relative", ce qui me paraît normal.

    "position : fixed" place bien la signature en bas de la fenêtre, mais si le contenu dépasse le bas de la fenêtre, la signature est superposée. Et "position : absolute" a le même comportement, sauf que la signature est décalée un peu vers la gauche quand la page contient un ascenseur, pour ne pas se superposer avec. Or, le W3C affirme, dans sa sagesse, que "position : absolute" place un élément par rapport à son "containing block". Il me semble que dans ce cas, le "containing block" devrait être ce fichu div dont la classe est "informations_horizontal".

    (Et j'ai vérifié à l'aide de "background-color" que même sur une page dont le contenu n'est pas plus haut que la fenêtre, le div de classe "informations_horizontal" descend jusqu'en bas de la fenêtre.)

    Ai-je mal compris la notion de "containing block" ? Serait-ce un bug Firefox, ce dont je doute parce que Safari a le même comportement ? En huit mots, pouvez-vous m'aider, s'il vous plaît ?

  2. #2
    Membre éprouvé
    Avatar de Emyleen
    Femme Profil pro
    Webmaster
    Inscrit en
    Mars 2010
    Messages
    151
    Détails du profil
    Informations personnelles :
    Sexe : Femme
    Âge : 40
    Localisation : France, Aveyron (Midi Pyrénées)

    Informations professionnelles :
    Activité : Webmaster
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Mars 2010
    Messages : 151
    Par défaut
    Le bloc conteneur d'un bloc en position absolu doit être en position relative. Essaye de mettre position:relative; dans ton .informations_horizontal.
    Personnellement je n'utilise pas les position:fixed; je vais aller me renseigner.

  3. #3
    Nouveau membre du Club
    Homme Profil pro
    Développeur informatique
    Inscrit en
    Novembre 2011
    Messages
    5
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Haute Savoie (Rhône Alpes)

    Informations professionnelles :
    Activité : Développeur informatique

    Informations forums :
    Inscription : Novembre 2011
    Messages : 5
    Par défaut
    Merci pour la réponse ! Malheureusement, je viens d'essayer et ce n'est pas ce que je souhaite faire.

    En ayant remplacé "position : fixed" par "position : relative" dans le style de ".informations_horizontal, .informations_vertical", j'ai toujours la signature juste après le texte dans les pages dont la hauteur n'excède pas celle de la fenêtre. Quant aux pages plus hautes que la fenêtre, la zone information recouvre le menu quand je descends l'ascenseur vertical.

Discussions similaires

  1. Placer un élément en bas de page
    Par fd_ifce dans le forum BIRT
    Réponses: 1
    Dernier message: 20/01/2014, 16h35
  2. [CSS 2.1] div en bas de page
    Par ledisciple dans le forum Mise en page CSS
    Réponses: 3
    Dernier message: 29/05/2013, 19h45
  3. placer le footer en bas de page et 3 autres éléments en haut
    Par nicolas_isi dans le forum Mise en page CSS
    Réponses: 8
    Dernier message: 09/06/2009, 18h04
  4. Positionner un div en bas de page "ou plus bas"
    Par roro06 dans le forum Mise en page CSS
    Réponses: 7
    Dernier message: 29/06/2007, 09h19
  5. Comment puis-je placer un div toujours en bas d'un autre div
    Par pierrot10 dans le forum Mise en page CSS
    Réponses: 6
    Dernier message: 12/12/2006, 16h04

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