Problème d'affichage de contours d'une div

Résolu/Fermé

aneantisseur Messages postés 384 Date d'inscription dimanche 8 mars 2009 Statut Membre Dernière intervention 13 juillet 2018 - Modifié par aneantisseur le 9/05/2010 à 22:21
bg62 Messages postés 23672 Date d'inscription samedi 22 octobre 2005 Statut Modérateur Dernière intervention 23 janvier 2025 - 9 mai 2010 à 23:02

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 :

<!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.

A voir également:

Problème d'affichage de contours d'une div
Affichage double ecran - Guide
Problème affichage fenêtre windows 10 - Guide
Comment agrandir l'affichage de l'écran - Guide
Windows 11 affichage classique - Guide
Div c++ - Télécharger - Langages

2 réponses

Réponse 1 / 2

aneantisseur Messages postés 384 Date d'inscription dimanche 8 mars 2009 Statut Membre Dernière intervention 13 juillet 2018 18
9 mai 2010 à 22:48

Problème réglé, j'ai remplacé

#menu_horizontal a, img, div 
{ 
 float: left; 
}

par

#menu_horizontal a, img, div 
{ 
 float: left; 
}

et ajouté style="float: left;" dans les balises img

Réponse 2 / 2

bg62 Messages postés 23672 Date d'inscription samedi 22 octobre 2005 Statut Modérateur Dernière intervention 23 janvier 2025 2 393
9 mai 2010 à 23:02

donc : en 'résolu' !
:)

Discussions similaires

adele

impossible de voir les photos et videos sur une conversation messenger

Les images ne s'affichent plus

Probleme d'affichage google chrome

Leboncoin : j'ai un problème d'affichage