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 :

div pas jusqu'en bas


Sujet :

CSS

  1. #1
    Membre éclairé
    Inscrit en
    Décembre 2008
    Messages
    483
    Détails du profil
    Informations forums :
    Inscription : Décembre 2008
    Messages : 483
    Par défaut div pas jusqu'en bas
    Bonjour, voici mon problème

    Mon site est structuré comme ceci :

    Entete

    Menu Horizontal

    Menu Vertical Contenu
    Il y a un div conteneur qui englobe toute la page.

    Voici une partie du 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
    body
    {
    	background:#CCCCCC;
    	background-repeat:repeat-y;
    	margin:10px 0;
    	padding:0;
    	text-align:center;
    	font-family:Verdana, Geneva, sans-serif;
    	font-size:11px;
    }
     
    #conteneur
    {
    	width:750px;
    	margin:0 auto;
    	text-align:left;
    	border:1px solid #000000;
    	background:#FFFFFF;
    }
     
    #menutop /* Ensemble du menu */
    {
    	font-weight : bold;
    	font-family : Arial;
    	font-size : 10.5px;
    	float:right;
    	padding : 0;
    	margin : 0;
    }
     
    #menuleft
    {
    	margin:0;
    	padding:0;
    	width:150px;;
    	float:left;
    	background:#FFFF99;
    	background-repeat:repeat-y;
    	display:block;
    }
     
    #contenu
    {
    	margin-top:40px;
    	margin-left:180px;
    }
    J'aimerai que la couleur de mon menu gauche descende tout en bas du cadre du conteneur. Car le problème est que la couleur du menuleft va jusqu'au dernier élément du menu qu'il contient or je voudrais qu'il aille jusqu'en bas.



    MErci

  2. #2
    Membre confirmé
    Profil pro
    Inscrit en
    Mai 2009
    Messages
    101
    Détails du profil
    Informations personnelles :
    Localisation : France, Ille et Vilaine (Bretagne)

    Informations forums :
    Inscription : Mai 2009
    Messages : 101
    Par défaut
    Bonjour,
    rajoute un height:100%; dans ton menuleft cela forcera le menu gauche a prendre toute la hauteur du conteneur dont il est le fils(si c'est bien cela que j'ai compris)

  3. #3
    Membre éclairé
    Inscrit en
    Décembre 2008
    Messages
    483
    Détails du profil
    Informations forums :
    Inscription : Décembre 2008
    Messages : 483
    Par défaut
    justement j'ai essayer et impossible de faire descendre la couleur tout en bas

  4. #4
    Membre confirmé
    Profil pro
    Inscrit en
    Mai 2009
    Messages
    101
    Détails du profil
    Informations personnelles :
    Localisation : France, Ille et Vilaine (Bretagne)

    Informations forums :
    Inscription : Mai 2009
    Messages : 101
    Par défaut
    pourrais-tu nous mettre ton code html ?

  5. #5
    Membre éclairé
    Inscrit en
    Décembre 2008
    Messages
    483
    Détails du profil
    Informations forums :
    Inscription : Décembre 2008
    Messages : 483
    Par défaut
    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
    <body>
    <div id="conteneur">
     
    	<div id="entete">
     
    	</div>
     
    	<div  id="menutop">
     
    	</div>
     
    	<div id="menuleft">
     
    	</div>
     
    	<div id="contenu">
     
    	</div>
     
    	<div class="clear"></div>
     
    </div>
     
    </body>

  6. #6
    Membre chevronné Avatar de Poulpynette
    Femme Profil pro
    Développeur informatique
    Inscrit en
    Juin 2006
    Messages
    349
    Détails du profil
    Informations personnelles :
    Sexe : Femme
    Âge : 48
    Localisation : France, Hérault (Languedoc Roussillon)

    Informations professionnelles :
    Activité : Développeur informatique

    Informations forums :
    Inscription : Juin 2006
    Messages : 349
    Par défaut
    Bonjour, essaie ceci sur body, conteneur et menuleft :

    Attention pour IE :


  7. #7
    Membre éclairé
    Inscrit en
    Décembre 2008
    Messages
    483
    Détails du profil
    Informations forums :
    Inscription : Décembre 2008
    Messages : 483
    Par défaut
    Fonctionne pas

    Je vois pas d'ou ça vient

  8. #8
    Membre chevronné Avatar de Poulpynette
    Femme Profil pro
    Développeur informatique
    Inscrit en
    Juin 2006
    Messages
    349
    Détails du profil
    Informations personnelles :
    Sexe : Femme
    Âge : 48
    Localisation : France, Hérault (Languedoc Roussillon)

    Informations professionnelles :
    Activité : Développeur informatique

    Informations forums :
    Inscription : Juin 2006
    Messages : 349
    Par défaut
    Enlève peut-être le "auto" sur le margin du conteneur ?

    (pas testé mais je vois pas autre chose)

  9. #9
    Membre éclairé
    Inscrit en
    Décembre 2008
    Messages
    483
    Détails du profil
    Informations forums :
    Inscription : Décembre 2008
    Messages : 483
    Par défaut
    le margin auto du conteneur me permet de centrer ma page, je veux donc pas l'enlever^^

    Si le texte qu'il y a dans le contenu "dépasse" la hauteur du menu vertical à gauche(menuleft) le texte ne se place pas sous le menu...
    Sauf que pour verifier, j'ai mis une couleur de fond au conteneur, et je vois que ce conteneur se place sous le menuleft...et c'est bien ça le problème

    Il ne doit pas y avoir grand chose pourtant

  10. #10
    Membre chevronné Avatar de Poulpynette
    Femme Profil pro
    Développeur informatique
    Inscrit en
    Juin 2006
    Messages
    349
    Détails du profil
    Informations personnelles :
    Sexe : Femme
    Âge : 48
    Localisation : France, Hérault (Languedoc Roussillon)

    Informations professionnelles :
    Activité : Développeur informatique

    Informations forums :
    Inscription : Juin 2006
    Messages : 349
    Par défaut
    Citation Envoyé par piero53 Voir le message
    Sauf que pour verifier, j'ai mis une couleur de fond au conteneur, et je vois que ce conteneur se place sous le menuleft...et c'est bien ça le problème
    Normal tu as mis un display: block à ton menuleft, du coup le contenu passe en-dessous.

  11. #11
    Membre éclairé
    Inscrit en
    Décembre 2008
    Messages
    483
    Détails du profil
    Informations forums :
    Inscription : Décembre 2008
    Messages : 483
    Par défaut
    je viens de l'enlever ce display, et le conteneur passe toujours dessous

    Pour bien verifier qu'il n'y avait pas de problème j'ai essayé: height:800px; pour le menuleft et il se met bien en bas et en 800px...le propriété min-height ne s'applique pas donc...

  12. #12
    Membre chevronné Avatar de Poulpynette
    Femme Profil pro
    Développeur informatique
    Inscrit en
    Juin 2006
    Messages
    349
    Détails du profil
    Informations personnelles :
    Sexe : Femme
    Âge : 48
    Localisation : France, Hérault (Languedoc Roussillon)

    Informations professionnelles :
    Activité : Développeur informatique

    Informations forums :
    Inscription : Juin 2006
    Messages : 349
    Par défaut
    Pardon, mais c'est le "conteneur" ou le "contenu" qui passe en-dessous de menuleft ?

    Tu testes sous quel navigateur ?

  13. #13
    Membre confirmé
    Profil pro
    Inscrit en
    Mai 2009
    Messages
    101
    Détails du profil
    Informations personnelles :
    Localisation : France, Ille et Vilaine (Bretagne)

    Informations forums :
    Inscription : Mai 2009
    Messages : 101
    Par défaut
    tu as une div clear, mais on a pas le css correspondant, pourrais tu nous le fournir (again )

  14. #14
    Membre éclairé
    Inscrit en
    Décembre 2008
    Messages
    483
    Détails du profil
    Informations forums :
    Inscription : Décembre 2008
    Messages : 483
    Par défaut
    voici pour le div clear
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
     
    .clear
    {
    	clear:both;
    }
    Sinon pardon c'est bien le contenu qui passe en dessous,
    le conteneur lui englobe tout.

  15. #15
    Expert confirmé
    Avatar de 12monkeys
    Homme Profil pro
    Webmaster
    Inscrit en
    Novembre 2006
    Messages
    4 093
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 48
    Localisation : France, Puy de Dôme (Auvergne)

    Informations professionnelles :
    Activité : Webmaster
    Secteur : Service public

    Informations forums :
    Inscription : Novembre 2006
    Messages : 4 093
    Par défaut
    Bonsoir

    Je ne comprends pas trop ce que tu veux faire... Peut tu expliquer avec un dessin ?

    Actuellement tu as "menutop" au même niveau que "menuleft" à sa droite, et "contenu" en dessous de cette ligne contenant tes deux menus, où veux tu le placer ?

  16. #16
    Membre éclairé
    Inscrit en
    Décembre 2008
    Messages
    483
    Détails du profil
    Informations forums :
    Inscription : Décembre 2008
    Messages : 483
    Par défaut
    Voici un schéma que je viens de faire vite fait sous word...




    Ce que je veux c'est que menuleft descende jusqu'en bas même si il n'y a plus de texte. Car ce menuleft "s'arrête" si il n'y a plus d'élément dans le menu.

    J'ai peur de pas être trop clair là

  17. #17
    Expert confirmé
    Avatar de 12monkeys
    Homme Profil pro
    Webmaster
    Inscrit en
    Novembre 2006
    Messages
    4 093
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 48
    Localisation : France, Puy de Dôme (Auvergne)

    Informations professionnelles :
    Activité : Webmaster
    Secteur : Service public

    Informations forums :
    Inscription : Novembre 2006
    Messages : 4 093
    Par défaut
    Comme ça :

    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
    <!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-FR">
    <head>
    <title>Tests</title>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
    <style type="text/css">
    body
    {
    	background:#CCCCCC;
    	background-repeat:repeat-y;
    	margin:10px 0;
    	padding:0;
    	text-align:center;
    	font-family:Verdana, Geneva, sans-serif;
    	font-size:11px;
    }
     
    #conteneur
    {
    	width:750px;
    	margin:0 auto;
    	text-align:left;
    	border:1px solid #000000;
    	background:#FFFFFF;
    }
     
    #menutop /* Ensemble du menu */
    {
    	font-weight : bold;
    	font-family : Arial;
    	font-size : 10.5px;
    	padding : 0;
    	margin : 0;
    }
     
    #corps {
    	background:#FFFF99;
    	overflow:hidden;
    }
    #menuleft
    {
    	margin:0;
    	padding:0;
    	width:150px;;
    	float:left;
    	background-repeat:repeat-y;
    }
    #contenu
    {
    	background-color: #FFFFFF;
    	float:left;
    	width: 600px;
    	argin-top:40px;
    	argin-left:180px;
    }
     
    </style>
    </head>
     
    <body>
     
    <div id="conteneur">
     
    	<div id="entete">
    		entete
    	</div>
     
    	<div  id="menutop">
    		menutop
    	</div>
     
    	<div id="corps">
    		<div id="menuleft">
    		menuleft
    		</div>
     
    		<div id="contenu">
    		contenu<br /><br />
    		</div>
    	</div>
     
     
     
    </div>
     
    </body>
    </html>
    Sur menutop suppression du float:right; ajout d'un float:left, suppression des marges et ajout d'une largeur sur contenu.

    Ca c'est pour ton premier problème...

    Pour le second c'est ce qu'on appelle des colonnes factices... J'ai rajouté un div corps qui englobe menuleft et contenu auquel on donne la couleur d'arrière plan qu'avait menuleft et on donne une couleur d'arrière plan différente à contenu, on rajoute aussi overflow:hidden pour donner un contexte de formatage pour que corps prenne tout la hauteur de contenu, ce qui permet de supprimer .clear et sa div associée.

    Et le tour est joué...

  18. #18
    Membre éclairé
    Inscrit en
    Décembre 2008
    Messages
    483
    Détails du profil
    Informations forums :
    Inscription : Décembre 2008
    Messages : 483
    Par défaut
    Tout d'abord merci.

    Ton code seul marche, mais impossible de l'adapter à mon code.
    Le problème est que mon menu left, même en mettant un float:left se colle a droite du menutop

    Je comprends vraiment pas

    Surtout que je pense pas être très loin de la solution...

  19. #19
    Membre éclairé
    Inscrit en
    Décembre 2008
    Messages
    483
    Détails du profil
    Informations forums :
    Inscription : Décembre 2008
    Messages : 483
    Par défaut
    Code beaucoup plus complet :

    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
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
     
    <!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=UTF-8" />
    <title>Titre</title>
    <link href="design.css" rel="stylesheet" type="text/css" media="screen" />
    </head>
     
    <body>
    <div id="conteneur">
     
    	<div id="entete">
    		<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" width="750" height="96" id="header" align="middle">
    		<param name="allowScriptAccess" value="sameDomain" />
    		<param name="movie" value="images/ban3.swf" /><param name="quality" value="high" /><param name="wmode" value="transparent" /><param name="bgcolor" value="#ffffff" /><embed src="images/ban3.swf" quality="high" wmode="transparent" bgcolor="#ffffff" width="750" height="96" name="header" align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
    		</object>
    	</div>
     
    	<div  id="menutop">
    		<ul>
    			<li>
    					<a href="#">Menu 1</a>
    					<ul>
    							<li><a href="#">Sous-menu 1</a></li>
    							<li><a href="#">Sous-menu 2</a></li>
    					</ul>
    			</li>
    			<li>
    					<a href="#">Menu 2</a>
    					<ul>
    							<li><a href="#">Sous-menu 1</a></li>
    							<li><a href="#">Sous-menu 2</a></li>
    					</ul>
    			</li>
    			<li>
    					<a href="#">Menu 3</a>
    					<ul>
    							<li><a href="#">Sous-menu 1</a></li>
    							<li><a href="#">Sous-menu 2</a></li>
    					</ul>
    			</li>
    			<li>
    					<a href="#">Menu 4</a>
    					<ul>
    							<li><a href="#">Sous-menu 1</a></li>
    							<li><a href="#">Sous-menu 2</a></li>
    					</ul>
    			</li>
    			<li>
    					<a href="#">Menu 5</a>
    					<ul>
    							<li><a href="#">Sous-menu 1</a></li>
    							<li><a href="#">Sous-menu 2</a></li>
    					</ul>
    			</li>
    		</ul>
    	</div>
     
    	<div id="menuleft">
    	<img src="images/nousvous2.jpg" alt="image" width="150px" height="50px">
    		<h3 class="ascenseur"><img src="images/flecheMenu.gif">Menu 1</h3>
    		<div>
    		<ul>
    			<li><a href="#">Sous-menu 1</a></li>
    			<li><img src="images/flecheSousMenu.gif"><a href="#">Sous-menu 2</a></li>
    		</ul>
    		</div>
    		<h3 class="ascenseur">Menu 2</h3>
    		<h3 class="ascenseur"><img src="images/flecheMenu.gif">Menu 3</h3>
    		<div>
    		<ul>
    			<li><a href="#">Sous-menu 1</a></li>
    			<li><a href="#">Sous-menu 2</a></li>
    		</ul>
    		</div>
    		<h3 class="ascenseur">Menu 4</h3>
    		<div>
    		<ul>
    			<li><a href="#">Sous-menu 1</a></li>
    		</ul>
    		</div>
    		<br><br><br>
    		<span class="menuSousGauche">
    			<h3 >MenuSous1</h3>
    			<h3 >MenuSous2</h3>
    			<h3 >MenuSous3</h3>
    			<h3 ><a href="#">MenuSous4</a></h3>
    		</span>
    	</div>
     
    	<div id="chemin">
    		<span class="chemin"><p>>chemin navigation :</p></span>
    		<span class="imprimer"><a href="JavaScript:print()"><img src="images/imprimer.gif" align="right" alt="imprimer"/></a></span>
    	</div>
     
    	<div id="contenu">
    		<br><br><br><br><br><br>contenu<br><br><br><br><br><br><br>contenu<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>contenu<br><br><br><br><br><br><br><br><br><br><br><br><br><br>contenu
    	</div>
    	<div class="clear"></div>
    </div>
    <p id="pied">Copyright ©2009 - Tous droits réservés</p>
     
    </body>
    </html>
    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
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    142
    143
    144
    145
    146
    147
    148
    149
    150
    151
    152
    153
    154
    155
    156
    157
    158
    159
    160
    161
    162
    163
    164
    165
    166
    167
    168
    169
    170
    171
    172
    173
    174
    175
    176
    177
    178
    179
    180
    181
    182
    183
    184
    185
    186
    187
    188
    189
    190
    191
    192
    body
    {
    	background:#CCCCCC;
    	background-repeat:repeat-y;
    	margin:10px 0;
    	padding:0;
    	text-align:center;
    	font-family:Verdana, Geneva, sans-serif;
    	font-size:11px;
    }
    body a
    {
    	text-decoration:none;
    }
     
    #conteneur
    {
    	width:750px;
    	margin:0 auto;
    	text-align:left;
    	border:1px solid #000000;
    	background:#FFFFCC;
    }
     
    /*/////////////////////////////////////
    		    L'en-tête
    /////////////////////////////////////*/
    #entete
    {
    	height:96px;
    }
     
    /*/////////////////////////////////////
    		    Le chemin
    /////////////////////////////////////*/
    .chemin
    {
    	margin:5px;
    	color:#FF9900;
    	float:left;
    }
    .imprimer img
    {
    	float:right;
    	margin:5px;
    	text-decoration:none;
    	border:none;
    }
     
    /*/////////////////////////////////////
    		    Le menu horizontal
    /////////////////////////////////////*/
    #menutop, #menutop ul /* Liste */     
    {
    	padding : 0;
    	margin : 0;
    	list-style : none; 
    	line-height : 18px; /* hauteur pour chaque élément */
    	text-align : center; /*centre le texte qui se trouve dans la liste */
    }
    #menutop /* Ensemble du menu */
    {
    	font-weight : bold;
    	font-family : Arial;
    	font-size : 10.5px;
    	float:right;
    }
    #menutop li ul li a
    {
    	font-weight : normal;
    }
    #menutop a /* Contenu des listes */
    {
    	display : block; /*liens deviennent des balises de type block */
    	padding : 0;
    	background : #66FFFF;     
    	color : #006699;
    	text-decoration : none;
    	width : 119px;
    }
    #menutop a:hover 
    {
    	color: #000000;
    	background: #66CCFF;
    }
    #menutop li /* Elements des listes */      
    { 
    	float : left; 
    	/* pour IE qui ne reconnaît pas "transparent" */
    	border-right : 1px solid #fff; /*bordure blanche à droite de chaque élément */
    }
    /* IE ne reconnaissant pas le sélecteur ">" */
    html>body #menu li
    {
    	border-right: 1px solid #fff ; /*bordure transparente à droite de chaque élément */
    }
    #menutop li ul /* Sous-listes */
    { 
    	position: absolute;
    	width: 144px;
    	left: -999em;
    }
    #menutop li ul li
    {
    	font-size : 10.5px;
    }
    /* IE ne reconnaissant pas le sélecteur ">" */
    html>body #menutop li ul li                
    {
    	border-top : 1px solid #fff; /*bordure transparente en haut de chaque élément */
    }
    #menutop li:hover ul, #menutop li.sfhover ul /* Sous-listes lorsque la souris passe sur un élément de liste*/
    {
    	left: auto;
    	min-height: 0; /* Corrige bug sous IE */
    }
     
    /*/////////////////////////////////////
    		    Le menu vertical à gauche
    /////////////////////////////////////*/
    #menuleft
    {
    	margin:0;
    	padding:0;
    	width:150px;
    	float:left;
    	background:#FFFF99;
    }
    #menuleft li, #menuleft li a
    {
    	list-style :none;
    	text-decoration:none;
    }
    #menuleft h3, #menuleft h3 a
    {
    	font-size:10.5px;
    	color:#000000;
    }
    #menuleft h3 a:hover
    {
    	color:#FF9900;
    }
     
    .ascenseur
    {
    	cursor:pointer;
    }
    #menuleft li a:hover
    {
    	color:#FF9900;
    }
    .menuSousGauche
    {
    	margin:0;
    	padding:0;
    }
    .urgent
    {
    	color:#CC6633;
    }
     
    /*/////////////////////////////////////
    		    Le contenu
    /////////////////////////////////////*/
    #contenu
    {
    	margin-top:40px;
    	padding-top:15px;
    	margin-left:180px;
    	margin-right:15px;
    }
    #contenu h3
    {
    	text-align:center;
    	font-family:Arial;
    	font-size:16px;
    }
    .clear
    {
    	clear:both;
    }
     
    /*/////////////////////////////////////
    		    Le pied de page
    /////////////////////////////////////*/
    #pied
    {
    	width:770px;
    	margin:0 auto;
    	font-size:10px;
    	text-align:center;
    }
    J'ai mis plein de <br> pour montrer que le menu ne se prolonge pas lorsque le contenu est assez long.

  20. #20
    Rédacteur
    Avatar de Macmillenium
    Homme Profil pro
    Développeur front-end
    Inscrit en
    Mars 2008
    Messages
    2 333
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 40
    Localisation : France, Paris (Île de France)

    Informations professionnelles :
    Activité : Développeur front-end
    Secteur : High Tech - Produits et services télécom et Internet

    Informations forums :
    Inscription : Mars 2008
    Messages : 2 333
    Par défaut
    Bonsoir,

    #menutop est en float:right, son adjacent directe #menuleft est en float:left, l'alignement cote à cote des deux blocs est donc logique.

    Enlever le float:right sur #menutop et lui attribuer un overflow:hidden afin qu'il ne soit pas impacté par son adjacent flottant #menuleft, pourrait corriger le problème.

Discussions similaires

  1. [CR XI] Bodures verticales ne descendent pas jusqu'en bas de mon tableau
    Par Marye6 dans le forum Débuter
    Réponses: 8
    Dernier message: 24/03/2015, 12h55
  2. DIV cote à cote : Le fond ne se prolonge pas jusqu'en bas
    Par Dsphinx dans le forum Mise en page CSS
    Réponses: 4
    Dernier message: 21/04/2013, 00h40
  3. [CSS 2] Couleur de fond ne descend pas jusqu'en bas
    Par mikael2235 dans le forum Mise en page CSS
    Réponses: 6
    Dernier message: 27/10/2010, 21h42
  4. div qui ne descend pas jusqu'en bas
    Par grinder59 dans le forum Mise en page CSS
    Réponses: 1
    Dernier message: 15/02/2008, 11h35
  5. [CSS][Débutant]Alonger un bloc div jusqu'en bas de la page
    Par Thomzz dans le forum Mise en page CSS
    Réponses: 2
    Dernier message: 07/09/2005, 23h58

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