18073 sujets

Questions générales et questions de débutants

Pb d 'affichage sous IE (Firefox ok)

Bonjour,

C'est mon premier message sur ce forum; alors j'espère que ma question ne sera pas trop "idiote".

Je dois realiser quelques pages web pour un ami. J'ai donc choisi ce qui semble le choix le plus judicieux, le XHTML + CSS.
Au passage merci pour ton livre Raphaël, très abordable aux débutants et qui constitue une excellente base.

Passons au concret:
Je n'arrive pas à comprendre pourquoi entre mon titre (employé dans un balise "p") et mon sous-titre (avec un menu) j'obtiens un espace à l'affichage sous IE ?

J'ai relu mon code mais sans succès.

Voici mon fichier 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" >
   <head>
       <title>Bienvenue sur mon site !</title>
       <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	   <link rel="stylesheet" media="screen" type="text/css" title="style" href="style.css" />
	   
	</head>
	
	<body>
		<div id="main">
		<p id="titre">AZA</p>
		<ul id="sous_titre">
			<strong>
			<li>Homme à tout faire</li>
			<li>A votre service</li>
			</strong>
		</ul>	
		</div>
	</body>
</html>


[b] Et mon fichier CSS: 

 body {
margin: 20;
text-align: center;
background-color: #344d7b;
}

#main {
margin-left: auto;
margin-right: auto; 
text-align: left;
width: 700px;
height: 500px;
padding: 0;
border: 0px solid black;
background-color: white;
}

#titre {
height: 80px;
float: left;
display: block;
margin: 0;
width: 200px; 
padding: 0;
color: #ebd261;
font-family: Georgia, times, verdana;
font-size: 4em;
letter-spacing: 0.1em;
background-color: #1e90ff;
text-align: center;
} 

#sous_titre {
height: 80px; 
font-size: 1.7em;
padding-top: 0px;
list-style-type: none;
font-family: Georgia, arial, serif;
color: #1e90ff;
letter-spacing: 0.1em;
word-spacing: 0.2em;
background-color: #ebd261; 
text-align: center;
}

[/b]
Modifié par Loki (12 Jul 2005 - 09:04)
Administrateur
Salut et bienvenue ici.

Il y'a plusieurs choses à prendre en compte :
- Tu parles de "titre (employé dans un balise "p")", or je ne vois qu'une liste (ul/li) qui n'est d'ailleurs pas dans ton <p>. Un titre est balisé par les éléments <h*>
- L'élément <p> n'accepte pas de contenir d'éléments de type bloc (<h*>, <ul>, <li>, etc.), c'est expliqué dans le livre d'aileurs Smiley smile
- As-tu pensé à supprimer les marges par défaut des éléments de liste ?

PS : n'oublie pas de tester la Méthodologie pour résoudre les problèmes d'affichage, que tu as du voir dans le billet placé en post-it de ce salon.
Modifié par Raphael (12 Jul 2005 - 10:04)
Merci de tes conseils Smiley cligne

...mais apres avoir supprimé toutes les marges qui me semblaient possibles, et notamment celle de mon menu, j'ai toujours cet espace en trop.

J'ai refais la même chose uniquement à l'aide de "div" et idem.

J'ai testé plusieurs choses et j'ai réussi à supprimer cet espace en positionnant mon "sous_titre" en flottant gauche et en lui indiquant la largeur restante qu'il devait utilisé (500px donc).
Modifié par Loki (12 Jul 2005 - 13:38)
Sujet clos
Aller à