0
J'ai une page qui a une couleur de fond pour le conteneur principal, mais pour une raison quelconque, la couleur se termine juste en dessous de la div en-tête. La page et le CSS valident dans les validateurs w3, cependant, et je n'ai aucune idée pourquoi et j'ai essayé plusieurs correctifs différents.Fond CSS XHTML ne remplissant pas div entier
CSS
body{
margin:0;
padding:0;
line-height: 1.5em;
background-color: #e5e5dc;
color: #000;
}
#maincontainer{
background-color: green;
width: 98%;
margin: 0 auto;
border: 1px solid black;
}
#topsection{
background-color: transparent;
height: 90px; /*Height of top section*/
}
#logo{
background-image: url();
text-align: center;
margin: 0 auto;
width: 100%;
}
#contentwrapper{
float: left;
width: 100%;
background-color: transparent;
}
#contentcolumn{
margin-right: 230px; /*Set right margin to RightColumnWidth*/
}
#rightcolumn{
float: left;
width: 230px; /*Width of right column in pixels*/
margin-left: -230px; /*Set left margin to -(RightColumnWidth) */
background-color: transparent;
}
#footer{
clear: left;
width: 100%;
background-color: transparent;
text-align: center;
padding: 4px 0;
border-top: 1px solid black;
}
.innertube{
margin: 10px; /*Margins for inner DIV inside each column (to provide padding)*/
margin-top: 0;
}
.error{
background-image: url("images/misc/scroll.jpg");
background-position: top left;
background-repeat: no-repeat;
}
a:link, a:visited{
color: #000;
text-decoration: none;
}
a:hover, a:active{
color: #000;
text-decoration: underline;
}
EDIT - source HTML brut directement à partir de la source vue dans mon navigateur
<!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" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Haven • Login</title>
<link href="includes/style.css" rel="stylesheet" type="text/css" />
<script src="includes/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
function init()
{
var e = document.createElement('script');
e.src = 'includes/all.js';
document.getElementById('script_insertion').appendChild(e);
}
</script>
</head>
<body onload="init();">
<div id="script_insertion"></div>
<div id="maincontainer">
<div id="topsection">
<div class="innertube">
<h1>IMG</h1>
</div>
</div>
<div id="contentwrapper">
<div id="contentcolumn">
<div class="innertube">
<form action="./login.php?mode=login" method="post">
<table>
<tr>
<td>Username:</td>
<td><input type="text" name="username" id="username" size="10" title="Username" /></td>
</tr>
<tr>
<td>Password:</td>
<td><input type="password" name="password" id="password" size="10" title="Password" /></td>
</tr>
<tr>
<td><input type="reset" value="Clear" /></td>
<td><input type="submit" name="login" value="Login" /></td>
</tr>
</table>
<input type="hidden" name="remember" value="true" />
</form>
<br />
Don't have an account yet? <a href="./register.php">Register here!</a>
</div>
</div>
</div> <div id="rightcolumn">
<div class="innertube">
Chat
</div>
</div>
</div>
</body>
</html>
Pourquoi avez-vous inclus les scripts php dans l'exemple? CSS est pour traiter le HTML pur seulement - si vous le savez, alors il semblerait que vous jetiez votre travail sur quelqu'un ... + la question n'est même pas étiquetée sous php- donc elle ne devrait pas contenir de php! S'il vous plaît isoler le html en question ... – Erric
@erric La question était en référence à la CSS et HTML qui a été posté. Juste parce qu'il y avait des instances de PHP signifie que ma question ne peut pas être répondue? Je les ai laissés là pour que les gens puissent voir le code entier, car parfois, une étiquette mal placée est tout ce qu'il faut. Je ne connais pas "le html en question". Il pourrait être n'importe où dans ce bloc de code, mais je ne vois absolument rien de mal avec la syntaxe, personnellement – chaoskreator
Votre question concerne le rendu HTML et CSS dans le navigateur. PHP n'a rien à voir avec ça. Montrez-nous le HTML rendu ... pas le PHP. –