Problème d'affichage de contours d'une div
Résolu
Bonsoir, je poste un message car j'ai un petit problème depuis cette après midi.
J'ai fait pour que le body de mon code soit entouré d'une ligne noire mais quand une image est affichée, cette ligne noire reste collée en haut au lieu de tout entourer.
Voilà l'image pour mieux comprendre le problème : http://www.hostingpics.net/viewer.php?id=126106images2.jpg
Le code html :
et le code css :
Merci de bien vouloir m'aider.
J'ai fait pour que le body de mon code soit entouré d'une ligne noire mais quand une image est affichée, cette ligne noire reste collée en haut au lieu de tout entourer.
Voilà l'image pour mieux comprendre le problème : http://www.hostingpics.net/viewer.php?id=126106images2.jpg
Le code html :
<!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>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" media="screen" type="text/css" title="Ultra_Vomit" href="includes/design.css" />
<link rel="shortcut icon" href="../favicon.ico" type="image/x-icon" />
<link rel="icon" href="../favicon.ico" type="image/x-icon" />
</head>
<body>
<div id="en_tete">
<a href="accueil"><img src="images/design/en_tete.jpg" border="0" /></a>
</div>
<div id="menu_horizontal">
<img src="images/design/gauche_menu_horizontal.gif" />
<div style="background: url(images/design/centre_menu_horizontal.gif); repeat: repeat-x; width: 988px; height: 30px;float: left;">
<a href="accueil">Accueil</a> <img src="images/design/separateur.gif" style="padding-top: 5px;" /> <a href="inscription">Inscription</a> <img src="images/design/separateur.gif" style=
"padding-top: 5px;" /><a href="connexion">Connexion</a> <img src="images/design/separateur.gif" style="padding-top: 5px;" /><a href="#">Contact</a> <img src="images/design/separateur.gif"
style="padding-top: 5px;" /><a href="deconnexion">Déconnexion</a> <img src="images/design/separateur.gif" style="padding-top: 5px;" />
</div><img src="images/design/droite_menu_horizontal.gif" />
</div>
<center>
<a href="accueil"><img src="images/design/error_404.jpg" border="0" /></a>
</center>
</body>
</html>
et le code css :
html
{
background: url(../images/design/fond.jpg);
background-repeat: repeat;
width: 100%;
height: 100%;
}
body
{
width: 1024px;
margin: 0 auto;
background-color: white;
padding: 10px;
border: 1px solid black;
}
#en_tete
{
width: 1024px;
height: 250px;
padding-bottom: 10px;
}
#menu_horizontal
{
width: 1024px;
margin-bottom: 10px;
}
#menu_horizontal a, img, div
{
float: left;
}
#menu_horizontal a
{
padding-top: 3px;
padding-left: 10px;
padding-right: 10px;
text-decoration: none;
font-weight:bold;
}
#menu_horizontal a:hover
{
height: 30px;
background: url(../images/design/centre_menu_horizontal_hover.gif);
background-repeat: repeat-x;
text-decoration: none;
}
Merci de bien vouloir m'aider.
