[HTML-CSS] div float 100%, footer pied de page.
Bonjour, je suis un petit newbie quand on parle de HTML-CSS.
Alors je pense avoir 2 questions a vous faires.
Voici mon code HTML:
Code:
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
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Unamed</title>
<link rel="stylesheet" type="text/css" href="site.css" />
<link rel="shortcut icon" href="favicon.ico" />
</head>
<body>
<div id="page">
<div id="banner">
<div id="logo">
<center>Unamed</center>
</div><!-- end logo -->
<div id="slogan">
<center>Slogan</center>
</div><!-- end slogan -->
</div><!-- end banner -->
<div id="bar">
</div><!-- end bar -->
<div id="filter">
<font size="2" color="white">Filtre</font>
</div><!-- end filter -->
<div id="main">
<div id="menu1">
<center>
<div id="navigation">
<!-- navigation button -->
</div><!-- end navigation -->
<div id="stats">
Guest:10000
</div><!-- end stats -->
</center>
</div><!-- end menu1 -->
<div id="content">
Content Website
</div><!-- end content -->
<div id="menu2">
<div id="separator">
</div><!-- end seperator -->
<div id="pub">
<center>Pub. & Partners</center>
</div><!-- end pub -->
</div><!-- end menu2 -->
</div><!-- end main -->
<div id="footer">
<div id="copyright" >
</div><!-- end copyright -->
</div><!-- end footer -->
</div><!-- end page -->
</body>
</html> |
Voici mon code CSS:
Code:
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
|
body
{
width:100%;
height:100%;
margin:inherit;
padding:inherit;
background-image: url('Image/texture/bg_steam.jpg');
background-repeat: repeat;
}
#page
{
height:100%;
}
#banner
{
width:1024px;
height:100px;
margin-left:auto;
margin-right:auto;
/* margin-top:auto;
margin-bottom:auto; */
background-color:#980000;
}
#logo
{
float:left;
width:300px;
height:100px;
}
#slogan
{
float:right;
width:724px;
height:100px;
}
#bar
{
width:100%;
height:5px;
background-color:#e11212;
}
#filter
{
width:1024px;
margin-left:auto;
margin-right:auto;
background-color:#e11212;
}
#main
{
width:1024px;
height:100%;
min-height:300px;
margin-left:auto;
margin-right:auto;
/* margin-top:auto;
margin-bottom:auto; */
background-color:white;
}
#menu1
{
float:left;
width:200px;
height:100%;
background-color:silver;
}
#navigation
{
}
#stats
{
}
#content
{
float:left;
width:674px;
height:100%;
background-color:lime;
}
#menu2
{
float:right;
width:150px;
height:100%;
background-color:yellow;
}
#separator
{
float:left;
height:100%;
width:2%;
margin-top:10%;
margin-bottom:10%;
}
#pub
{
float:right;
height:100%;
width:98%;
background-color:aqua;
}
#footer
{
width:100%;
height:13px;
clear:both;
background-color:#e11212;
}
#copyright
{
width:1024px;
margin-left:auto;
margin-right:auto;
color:white;
} |
Mes Questions :
1. Je voudrais que toutes les div a l'interieur de la div main est un height de 100%, occupant toute la hauteur que main presente, si une div a un height plus grand que celui du main, que celui grandisse.
2. Que footer sois tourjours en bas, meme quand le site n'occupe pas toutes la hauteurs, que le footer se trouve le plus en bas possible.
Avez vous des idées ?
Car jusqu'a maintenant aucune reussite de mon cote.
Merci de votre aide.