Problème de mise en page sur Firefox

Royal16 · 23 Avril 2006

Bonjour tout le monde!
Voilà je commence en programmation web et j'ai commencé un petit site perso mais j'ai vite été arrêté par des problèmes d'affichage sur en les naviguateurs IE et Firefox, l'affichage ne donne pas le même. Voilà un aperçu du début de mon site. Juste avec ce début j'ose même pas imaginer le résultat du site final.

Vous devez être connecté pour voir les liens.

Et voici mon code:

Code:

<!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" />
<style type="text/css">

html, body 
{
	margin:0;
	width:100%;
}
.conteneur 
{
  	width:800px;
  	border:2px black solid;
  	height:900px;
      margin:auto;
}


#menu
{
	
	margin-top:-44px;
	margin-left:40px;
}


li.menu_top 
{
	position:relative;
	display:inline;
	width:90px;
	float:left;
	border-right:1px solid white;
	line-height:20px;
}


.menu_top a 
{
	font-family:arial;
	color:white;
	font-weight:bold;
	font-size:8pt;
	text-decoration:none;
	text-align:center;
	border:0px red dashed;
	display:block;
}


.left
{
	position:relative;
	display:inline;
	width:90px;
	float:left;
	border-left:1px solid white;
	line-height:20px;
}

.on
{
    background-color:#003399;
}
</style>
</head>

<body>

<div class="conteneur">
   	<div id="img1"><img src=bannière.jpg /></div>
	   <div id="img2"><img src=menu.jpg width=800 height=30 /></div>	
	
	<div id="menu">	
		<ul >
			<li class='menu_top left on'><a href="#">Lien</a></li>
			<li class='menu_top'><a href="#">Lien</a></li>
			<li class='menu_top'><a href="#">Lien</a></li>
			<li class='menu_top'><a href="#">Lien</a></li>
			<li class='menu_top'><a href="#">Lien</a></li>
			<li class='menu_top'><a href="#">Lien</a></li>
			<li class='menu_top'><a href="#">Lien</a></li>
 		</ul>
	</div>

</div>
</body>
</html>

J'espère que vous pouvez m'aidez et me donner des conseils ou des extraits de code pour m'aider! merci d'avance!

KangOl · 23 Avril 2006

balise

Code:

 :cry:

Johan_et_Pirlouit · 23 Avril 2006

C'est quoi ces marges ??
[cpp]#menu
{
margin-top:-44px;
margin-left:40px;
}[/cpp]

Pour éviter ce genre de pb, il te suffit de mettre tes blocs conteneurs "à la suite", en utilisant :
[cpp]position: relative;
margin: 0px auto; // "auto" pour le centrage latéral[/cpp]

Sinon, furette bien le topic pinné dans la tête de liste : tu auras des tas de liens très intéressants

..

Problème de mise en page sur Firefox

Royal16

KangOl

Johan_et_Pirlouit