La couleur de fond ne couvre pas la page

Vous pouvez consulter mon petit site here. J'ai deux problèmes:La couleur de fond ne couvre pas la page

J'utilise le gradient css pour colorier mon arrière-plan. Lorsque vous travaillez avec des résolutions élevées (1366 * 768 par exemple), seule la moitié de la page est peinte.
Mon "andale" bouton sur le fond n'est pas cantered. J'ai remarqué lors de l'inspection du code que le <div> qui contient le bouton couvre le conteneur, et je ne sais pas pourquoi.

Aussi, si vous ne l'aimez pas jsFiddle, voici mon code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
<head> 
<title>Rock-paper-scissers</title> 
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1"> 
<script src="rps.js"></script> 
<style type="text/css"> 
body{ 
    height: 100%; 
    font: 100.01% "Trebuchet MS",Verdana,Arial,sans-serif; 
    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#93e1d1), to(#d4c87c)); 
    background-image: -webkit-linear-gradient(left, #93e1d1, #d4c87c); 
    background-image: -moz-linear-gradient(top, #93e1d1, #d4c87c); 
    background-repeat: no-repeat; 
} 
div#container { 
    text-align: center; 
    width: 80%; 
    margin: 0 auto; 
} 
div.InnerLeft { 
    width: 50%; 
    position: relative; 
    float: left; 
} 
div.InnerRight { 
    width: 50%; 
    position: relative; 
    float: right; 
} 
select { 
    background: transparent; 
    margin-top: 15px; 
    width: 220px; 
    font-size: 16px; 
    -webkit-appearance: none; 
    border: 0px; 
    height: 34px; 
} 
</style> 
</head> 
<body> 
<div id="container"> 
<img src="header.png"> 
<div class="InnerLeft"> 
<img src="uno.png"><br> 
<select id="p1" onchange="change('p1','rpsleft')"> 
<option value=0>Choose your weapon</option> 
<option value=1>Rock</option> 
<option value=2>Paper</option> 
<option value=3>Scissors</option> 
</select> 
<p><img src="rpsL.png" id="rpsleft"></p> 
</div> 
<div class="InnerRight"> 
<img src="dos.png"><br> 
<select id="p2" onchange="change('p2','rpsright')"> 
<option value=0>Choose your weapon</option> 
<option value=1>Rock</option> 
<option value=2>Paper</option> 
<option value=3>Scissors</option> 
</select> 
<p><img src="rps.png" id="rpsright"></p> 
</div> 
<div id="footer"> 
<img src="andale.png" id="andale" onclick="rps(document.getElementById('p1').value,document.getElementById('p2').value)" 
onMouseOver="document.getElementById('andale').src='andale2.png'" 
onMouseOut="document.getElementById('andale').src='andale.png'"> 
</div> 
</div> 
</body>

Toutes les idées? Merci!

Source

2012-11-10 Yotam

utilisation html {min-height: 100%;}, pas height:100%; parce que si votre page ont une longue hauteur que vous ne verrez pas toute la page, parce que 100% est la hauteur du navigateur

et ajoutez #footer {text-align:center;} afin de centrer votre bouton d'image

tout le code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
<head> 
<title>Rock-paper-scissers</title> 
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1"> 
<script src="rps.js"></script> 
<style type="text/css"> 

html {min-height:100%; 
} 
body{ 
    height: 100%;background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#93e1d1), to(#d4c87c)); 
    background-image: -webkit-linear-gradient(left, #93e1d1, #d4c87c); 
    background-image: -moz-linear-gradient(top, #93e1d1, #d4c87c); 
    font: 100.01% "Trebuchet MS",Verdana,Arial,sans-serif; 

    background-repeat: no-repeat; 
    margin: 0; 
    padding: 0; 
} 
div#container { 
    text-align: center; 
    width: 80%; 
    margin: 0 auto; 
} 
div.InnerLeft { 
    width: 50%; 
    position: relative; 
    float: left; 
} 
div.InnerRight { 
    width: 50%; 
    position: relative; 
    float: right; 
} 
select { 
    background: transparent; 
    margin-top: 15px; 
    width: 220px; 
    font-size: 16px; 
    -webkit-appearance: none; 
    border: 0px; 
    height: 34px; 
} 

#footer {text-align:center;} 
</style> 
</head> 
<body> 
<div id="container"> 
<img src="header.png"> 
<div class="InnerLeft"> 
<img src="uno.png"><br> 
<select id="p1" onchange="change('p1','rpsleft')"> 
<option value=0>Choose your weapon</option> 
<option value=1>Rock</option> 
<option value=2>Paper</option> 
<option value=3>Scissors</option> 
</select> 
<p><img src="rpsL.png" id="rpsleft"></p> 
</div> 
<div class="InnerRight"> 
<img src="dos.png"><br> 
<select id="p2" onchange="change('p2','rpsright')"> 
<option value=0>Choose your weapon</option> 
<option value=1>Rock</option> 
<option value=2>Paper</option> 
<option value=3>Scissors</option> 
</select> 
<p><img src="rps.png" id="rpsright"></p> 
</div> 
<div id="footer"> 
<img src="andale.png" id="andale" onclick="rps(document.getElementById('p1').value,document.getElementById('p2').value)" 
onMouseOver="document.getElementById('andale').src='andale2.png'" 
onMouseOut="document.getElementById('andale').src='andale.png'"> 
</div> 
</div> 
</body>

Source

2012-11-10 19:24:42

Les corrections:

Pour la 1ère question que vous devez donner à votre html une hauteur aussi, non seulement le body
```
html { height: 100% } 
```

Pour le 2ème vous devez effacer vos flotteurs :

#footer { 
    clear: both; 
    text-align: center 
}

DEMO

Source

2012-11-10 18:53:21

Merci! Pouvez-vous s'il vous plaît dites-moi pourquoi utiliser clair: les deux? Et encore merci, cela a résolu mon problème ... – Yotam

vous pouvez lire quelques notions de base sur 'clearing floats' [ici] (http://css-tricks.com/the-how-and-why-of-clearing-floats /) –

'marge: auto' va centrer le bouton – LeeGee

La couleur de fond ne couvre pas la page

Répondre

Questions connexes