Problème d'étirement d'une page web
Résolu
rey-s
Messages postés
74
Date d'inscription
Statut
Membre
Dernière intervention
-
rudak Messages postés 590 Date d'inscription Statut Membre Dernière intervention -
rudak Messages postés 590 Date d'inscription Statut Membre Dernière intervention -
Bonjour,
J'ai un petit soucis, je développe une page web, et en y rentrant du contenu j'arrive au bas de la page et cette dernière ne s'étire pas, pourtant je lui est juste donné une taille minimum genre un min-height:1024px; dans le css.
Voici le css:
---------------------
img{
border:none;
}
body{
background: url(./images/...jpg) 0 0;
}
#page {
background-color: red;
position:relative;
width:1280px;
min-height:1024px; /*permet de mettre un minimum mé pas de maximum du coup la page s'alonge si besoin*/
margin-left:auto;
margin-right:auto;
margin-top: 50px;
}
#header{
width:1280px;
height:50px;
}
#menu2{
background-color: black;
width:1280px;
height:29px;
margin-top: -4px;
}
#menu_top{
font-color:#CCCCCC;
position:absolute;
left:470px;
top:-30px;
width:500px;
height:109px;
}
#menu_top a{ /* j'ai créé sa pour que les lien du menu soi pas sous ligné et qu'il soi en noir*/
color:white;
text-decoration:none;
}
#menu_top a:hover{ /* et ceci pour que les lien lo*/
text-decoration:underline;
}
#footer{
background-color: black;
color: gray;
font-size:6;
width:1280px;
height:28px;
position: absolute;
bottom: 0px;
-----------
J'ai un petit soucis, je développe une page web, et en y rentrant du contenu j'arrive au bas de la page et cette dernière ne s'étire pas, pourtant je lui est juste donné une taille minimum genre un min-height:1024px; dans le css.
Voici le css:
---------------------
img{
border:none;
}
body{
background: url(./images/...jpg) 0 0;
}
#page {
background-color: red;
position:relative;
width:1280px;
min-height:1024px; /*permet de mettre un minimum mé pas de maximum du coup la page s'alonge si besoin*/
margin-left:auto;
margin-right:auto;
margin-top: 50px;
}
#header{
width:1280px;
height:50px;
}
#menu2{
background-color: black;
width:1280px;
height:29px;
margin-top: -4px;
}
#menu_top{
font-color:#CCCCCC;
position:absolute;
left:470px;
top:-30px;
width:500px;
height:109px;
}
#menu_top a{ /* j'ai créé sa pour que les lien du menu soi pas sous ligné et qu'il soi en noir*/
color:white;
text-decoration:none;
}
#menu_top a:hover{ /* et ceci pour que les lien lo*/
text-decoration:underline;
}
#footer{
background-color: black;
color: gray;
font-size:6;
width:1280px;
height:28px;
position: absolute;
bottom: 0px;
-----------
A voir également:
- Problème d'étirement d'une page web
- Supprimer une page word - Guide
- Web office - Guide
- Comment traduire une page web - Guide
- Capturer une page web complète - Guide
- Créer une page web - Guide
12 réponses
Contrairement a max-height, min-height ne peut s'employer seul, il faut spécifier height et max-height
exemple :
Attention, la propriété de feuille de style min-height n'est pas prise en compte par Internet Explorer et pas testée sous safari.
exemple :
#page
{
background-color: red;
position:relative;
width:1280px;
height:90%;
min-height:1024px;
max-height:123500px;
margin-left:auto;
margin-right:auto;
margin-top: 50px;
}
Attention, la propriété de feuille de style min-height n'est pas prise en compte par Internet Explorer et pas testée sous safari.
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
arf je me rapelle aussi avoir eu des soucis avec ca, je vais retourner voir mes sources voir coment j'avais fait
Il suffit de commencer par donner une hauteur fixe au bloc (#bloc).
Cette hauteur sera considée comme un min-height pour IE : elle s'allongera en fonction du contenu.
Par contre, les autres navigateurs vont respecter la hauteur de façon rigoureuse et le contenu
dépassera du bloc.
Il suffit alors de rajouter une instruction non comprise par IE
(html>body #bloc)
et qui rétablira les choses pour ces navigateurs.
essaie ca pour voir ?
Cette hauteur sera considée comme un min-height pour IE : elle s'allongera en fonction du contenu.
Par contre, les autres navigateurs vont respecter la hauteur de façon rigoureuse et le contenu
dépassera du bloc.
Il suffit alors de rajouter une instruction non comprise par IE
(html>body #bloc)
et qui rétablira les choses pour ces navigateurs.
#bloc
{
height: 1024px;
background: #F00;
}
html>body #bloc
{
height: auto;
min-height: 1024px;
}
essaie ca pour voir ?
C'est bon tu avait raison, l'absolute qui faisait foiré le tout..
Maintenant j'ai un bug avec mon menu déroulant vertical il marche sous firefox mais pas sous ie (Il marchait précédemment) et sous firefox Mon contenu se décale lorsqu'il se déroule en bas
---------------
Html:
<div id="menu2">
<div id="menu3">
<ul>
<li><a href="#">Produits</a><ul>
<li><a href="#">Sous-item 1</a></li>
<li><a href="#">Sous-item 2</a></li>
<li><a href="#">Sous-item 3</a></li>
</ul>
</li>
<li><a href="#">Solutions</a>
<ul>
<li><a href="#">Sous-item 1</a></li>
<li><a href="#">Sous-item 2</a></li>
<li><a href="#">Sous-item 3</a></li>
</ul>
</li>
<li><a href="#">Ecologie</a></li>
</ul>
</div>
------------------
Css:
#menu3 ul {
margin:0;
padding:0;
list-style-type:none;
text-align:center;
}
#menu3 li {
float:left;
margin:auto;
padding:0;
background-color:black;
}
#menu3 li a {
display:block;
width:100px;
color:white;
text-decoration:none;
padding:5px;
}
#menu3 li a:hover {
color:red;
}
#menu3 ul li ul {
display:none;
}
#menu3 ul li:hover ul {
display:block;
}
#menu3 li:hover ul li {
float:none;
}
-----------
Le problème ne vient pas du changement dans le footer quand même..?
Maintenant j'ai un bug avec mon menu déroulant vertical il marche sous firefox mais pas sous ie (Il marchait précédemment) et sous firefox Mon contenu se décale lorsqu'il se déroule en bas
---------------
Html:
<div id="menu2">
<div id="menu3">
<ul>
<li><a href="#">Produits</a><ul>
<li><a href="#">Sous-item 1</a></li>
<li><a href="#">Sous-item 2</a></li>
<li><a href="#">Sous-item 3</a></li>
</ul>
</li>
<li><a href="#">Solutions</a>
<ul>
<li><a href="#">Sous-item 1</a></li>
<li><a href="#">Sous-item 2</a></li>
<li><a href="#">Sous-item 3</a></li>
</ul>
</li>
<li><a href="#">Ecologie</a></li>
</ul>
</div>
------------------
Css:
#menu3 ul {
margin:0;
padding:0;
list-style-type:none;
text-align:center;
}
#menu3 li {
float:left;
margin:auto;
padding:0;
background-color:black;
}
#menu3 li a {
display:block;
width:100px;
color:white;
text-decoration:none;
padding:5px;
}
#menu3 li a:hover {
color:red;
}
#menu3 ul li ul {
display:none;
}
#menu3 ul li:hover ul {
display:block;
}
#menu3 li:hover ul li {
float:none;
}
-----------
Le problème ne vient pas du changement dans le footer quand même..?
chez moi il marche tres bien sous IE (après avoir rajouté une balise de fermeture de ta div menu2)
</div>
<div id="menu2">
<div id="menu3">
<ul>
<li><a href="#">Produits</a>
<ul>
<li><a href="#">Sous-item 1</a></li>
<li><a href="#">Sous-item 2</a></li>
<li><a href="#">Sous-item 3</a></li>
</ul>
</li>
<li><a href="#">Solutions</a>
<ul>
<li><a href="#">Sous-item 1</a></li>
<li><a href="#">Sous-item 2</a></li>
<li><a href="#">Sous-item 3</a></li>
</ul>
</li>
<li><a href="#">Ecologie</a></li>
</ul>
</div>
</div>