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

HTML Discussion :

pb positionnement en bas d'une div


Sujet :

HTML

  1. #1
    Membre du Club Avatar de bogsy15
    Profil pro
    Inscrit en
    Mai 2006
    Messages
    147
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Mai 2006
    Messages : 147
    Points : 53
    Points
    53
    Par défaut pb positionnement en bas d'une div
    bonjour,

    Après de multiples manips et de recherches, je n'est toujours pas résolu mon problème.

    En fait ce que je voudrais c'est faire afficher une balise div en bas d'une autre balise div.

    voici le code du fichier index.php :
    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
     
     
    <div id="conteneur">
    	<div id="banniere">BIONORMA</div>
    	<div id="contenu">
    		<div id="menu">
    			<div id="titre_menu">Accueil</div><br><br>
    			<p align="center">
    				<a href="index.php">Accueil</a><br>
    				<a href="index.php?page=horaire">Horaires</a><br>
    	  		</p>
    			<div id="titre_menu">Menu</div><br><br>
    			<p align="center">
    				<a href="">Lien</a><br>
    				<a href="">Lien</a><br><br><br>
    	  		</p>
    			<div id="titre_menu">Menu</div><br><br>
    			<p align="center">
    				<a href="">Lien</a><br>
    				<a href="">Lien</a><br><br><br><br>
    	 		</p>
    		</div>
    		<div id="centre">
    			<?php
                                    if(isset($_GET['page']) AND file_exists($_GET['page'].'.php'))
                                    {
                                            include $_GET['page'].'.php';
                                    }
                                    else
                                    {
                                            //include 'index.php';
                                    }
                            ?>
    		</div>
    	</div>
    	<div id="barre_bas"></div>
    </div>
    et voici le code du 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
     
     
    #conteneur {
    	position:relative;
    	left:50%;
    	margin-top: 16px;
    	margin-left: -400px;
    	width:800px;
    	background-color: #66FF99;
    	visibility: visible;
    }
     
    #contenu {
    	position:relative;
    	width:800px;
    	top:200px;
    	min-height:575px;
    	background-color:#66FF99;
    }
     
    #barre_bas {
    	height:16px;
    	background-image:url(Images/barre_bas.JPG);
    	background-repeat:no-repeat;
    }

    Si quelqu'un pouvais m'aider, il sera le bienvenu.
    Je vous remercie d'avance pour vos réponses.

  2. #2
    Membre à l'essai
    Profil pro
    Inscrit en
    Juillet 2006
    Messages
    10
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Juillet 2006
    Messages : 10
    Points : 11
    Points
    11
    Par défaut
    Bonjour,

    J'ai eu ce problème moi aussi. Après beaucoup d'essais j'en suis arrivé aux conclusions suivantes:
    - La hauteur du conteneur doit être spécifiée,
    - La position du contenu doit être Absolute (bizarre),
    - Le contenu doit être positionné avec Bottom (ça c'est logique).

    Ce qui implique les modifs suivantes sur ta feuille de styles:

    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
    #conteneur {
       position:relative;
       left:50%;
       Height:100px;
       margin-top: 16px;
       margin-left: -400px;
       width:800px;
       background-color: #66FF99;
       visibility: visible;
    }
    
    #contenu {
       position:Absolute;
       width:800px;
       Bottom:0px;
       min-height:575px;
       background-color:#66FF99;
    }
    Bonne continuation!

  3. #3
    En attente de confirmation mail
    Profil pro
    Étudiant
    Inscrit en
    Juillet 2006
    Messages
    30
    Détails du profil
    Informations personnelles :
    Âge : 35
    Localisation : France

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : Juillet 2006
    Messages : 30
    Points : 38
    Points
    38
    Par défaut
    Tu est sur d'absolute :
    - La position du contenu doit être Absolute
    Ca me parait vraiment bizarre, pas logique, ce serait plutor float et, et la hauteur pas forcée ...

  4. #4
    Membre du Club Avatar de bogsy15
    Profil pro
    Inscrit en
    Mai 2006
    Messages
    147
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Mai 2006
    Messages : 147
    Points : 53
    Points
    53
    Par défaut
    C'est vrai que c'est bizarre.
    La solution que tu m'a donné ne marche pas. C'est bizarre de mettre une hauteur fixe pour le conteneur.
    Moi je voudrais que la hauteur du conteur soit fonction de la hauteur de son contenu.

  5. #5
    Membre du Club Avatar de bogsy15
    Profil pro
    Inscrit en
    Mai 2006
    Messages
    147
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Mai 2006
    Messages : 147
    Points : 53
    Points
    53
    Par défaut
    j'ai réussi a la placer a peu près la où je voulais. Mais quand j'inclue une page, mon div=barre_bas passe par dessus lla page incluse.

    Je voudrais qu'elle descende en fonction de la hauteur de la page incluse.

  6. #6
    Membre du Club Avatar de bogsy15
    Profil pro
    Inscrit en
    Mai 2006
    Messages
    147
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Mai 2006
    Messages : 147
    Points : 53
    Points
    53
    Par défaut
    J'ai remodifié le code comme ceci :

    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
     
    <div id="conteneur">
    	<div id="banniere">BIONORMA</div>
    	<div id="contenu">
    		<div id="menu">
    			<div id="titre_menu">Accueil</div><br><br>
    			<p align="center">
    				<a href="index.php">Accueil</a><br>
    				<a href="index.php?page=horaire">Horaires</a><br>
    				<a href="index.php?page=prive">test</a><br>
    				<a href="index.php?page=prive/prive">test</a><br>
    				<a href="index.php?page=chemin">Lien</a><br><br><br>
    	  		</p>
    			<div id="titre_menu">Menu</div><br><br>
    			<p align="center">
    				<a href="">Lien</a><br>
    				<a href="">Lien</a><br>
    				<a href="">Lien</a><br>
    				<a href="">Lien</a><br><br><br>
    	  		</p>
    			<div id="titre_menu">Menu</div><br><br>
    			<p align="center">
    				<a href="">Lien</a><br>
    				<a href="">Lien</a><br>
    				<a href="">Lien</a><br>
    				<a href="">Lien</a><br><br><br><br>
    	 		</p>
    		</div>
    		<div id="centre">
    			<?php
                                    if(isset($_GET['page']) AND file_exists($_GET['page'].'.php'))
                                    {
                                            include $_GET['page'].'.php';
                                    }
                                    else
                                    {
                                            //include 'index.php';
                                    }
                            ?>
    		</div>
    		<div id="barre_bas"></div>
    	</div>
     
    </div>
    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
     
    #conteneur {
    	position:absolute;
    	left:50%;
    	margin-top: 16px;
    	margin-left: -400px;
    	width:800px;
    	background-color: #66FF99;
    	visibility: visible;
    }
    #banniere {
    	position:absolute;
    	width:800px;
    	height:167px;
    	background-color: #6699FF;
    	background-image:url(Images/fond_banniere.jpg);
    	text-align: right;
    	font-size: 20px;
    	font-style: italic;
    	font-weight: bold;
    	letter-spacing: 5px;
    	line-height : 40px;
    }
     
    #contenu {
    	position:absolute;
    	top:200px;
    	background-color:#9900CC;
    }
     
    #menu {
    	background-color:#66FF99;
    	position:absolute;
    	width:150px;
     
    }
    #titre_menu {
    	position:absolute;
    	background-image:url(Images/BOUTON-2.jpg);
    	width:150px;
    	height:24px;	
    	text-align: center;
    	font-weight: bold;
    	line-height : 20px;
     
    }
    #centre {
    	position:absolute;
    	background-color:#66FF99;
    	left:178px;
    	width:587px;
    }
     
    #barre_bas {
    	height:16px;
    	background-image:url(Images/barre_bas.JPG);
    	width:800px;
     
    }
    Maintenant mon div barre_bas est positionné en haut de mon div contenu. Je n'arrive pas a le positionner en bas de contenu.
    Quelqu'un a une idée ?

  7. #7
    Membre confirmé Avatar de masu
    Inscrit en
    Février 2004
    Messages
    428
    Détails du profil
    Informations forums :
    Inscription : Février 2004
    Messages : 428
    Points : 484
    Points
    484
    Par défaut
    Si tu souhaite une hauteur qui se modifie avec le contenu il faut eviter les position:absolute.

    Voici ton css modifié
    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
    #conteneur {
    	position:absolute;
    	left:50%;
    	margin-top: 16px;
    	margin-left: -400px;
    	width:800px;
    	background-color: #66FF99;
    	visibility: visible;
    }
    #banniere {
    	/*position:absolute;*/
    	width:800px;
    	height:167px;
    	background-color: #6699FF;
    	background-image:url(Images/fond_banniere.jpg);
    	text-align: right;
    	font-size: 20px;
    	font-style: italic;
    	font-weight: bold;
    	letter-spacing: 5px;
    	line-height : 40px;
    }
    
    #contenu {
    	/*position:absolute;
    	top:200px;*/
    	margin-top: 33px;
    	background-color:#9900CC;
    }
    
    #menu {
    	background-color:#66FF99;
    	/*position:absolute;*/
    	width:150px;
    	float:left;
    
    }
    #titre_menu {
    	/*position:absolute;*/
    	background-image:url(Images/BOUTON-2.jpg);
    	width:150px;
    	height:24px;	
    	text-align: center;
    	font-weight: bold;
    	line-height : 20px;
    
    }
    #centre {
    	/*position:absolute;*/
    	background-color:#66FF99;
    	/*left:178px;*/
    	margin-left: 150px;
    	/*width:587px;*/
    }
    
    #barre_bas {
    	height:16px;
    	background-image:url(Images/barre_bas.JPG);
    	width:800px;
    	clear:both;
    
    }

  8. #8
    Membre du Club Avatar de bogsy15
    Profil pro
    Inscrit en
    Mai 2006
    Messages
    147
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Mai 2006
    Messages : 147
    Points : 53
    Points
    53
    Par défaut
    Super ca marche. Merci bcp.

    Le résultat est exactemement celui que je voulais.

    Merci à tous.

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

Discussions similaires

  1. Se positionner en bas d'une div pour rajouter ours
    Par epeichette dans le forum jQuery
    Réponses: 2
    Dernier message: 26/04/2011, 16h42
  2. Ascenceur en bas d'une div automatiquement
    Par dest dans le forum Général JavaScript
    Réponses: 2
    Dernier message: 09/11/2007, 11h52
  3. Positionnement d'images dans une <div>
    Par djef80_12 dans le forum Mise en page CSS
    Réponses: 6
    Dernier message: 20/12/2006, 14h44
  4. [CSS] Positionner 2 tableaux dans une div
    Par Rei Itchido dans le forum Mise en page CSS
    Réponses: 9
    Dernier message: 12/05/2006, 19h27
  5. positionner un bloc <p> tout en bas d'une div
    Par barok dans le forum Balisage (X)HTML et validation W3C
    Réponses: 5
    Dernier message: 18/04/2006, 14h37

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