28220 sujets

CSS et mise en forme, CSS3

[résolu]Ecart du saut de ligne

Bonsoir,

j'ai un petit soucis avec un écart que je ne veut pas entre le div du logo et la liste du menu sur IE et pire sous Firefox : *lien mort*

Ca doit être tout con mais je ne vois pas le problème :

<style type="text/css">
<!--
body {
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	background-color: #666666;
}
#connteneur {
	text-align: center;
}
#fond {
	margin-left: auto;
  	margin-right: auto;
	top:15px;
	width:960px;
	height:550px;
	text-align:left;
	background-image: url(images/fond_bois.png);
}
#logo {
	left:0px;
	top:0px;
}
#logo img {
	border:0;
}
li {
	float:left;
	margin:0 0;
}
ul {
	list-style:none;
	margin:0 0;
}
.menu a {
	margin:0 0;
	display:block;
}
.menu img {
	border:0;
}
-->
</style></head>

<body>
<div id="conteneur">
<div id="fond">
	<div id="logo">
		<a href="/" title="Retour en page d'accueil">
			<img src="images/serrurerie_paris.png" alt="A la Serrurerie de Paris" width="482" height="96" />
		</a>
	</div>
	<ul class="menu">
		<li>
			<a href="#" title="Aller à la page Clés à domicile">
				<img src="images/cles_domicile.png" alt="Cles a domicile" width="80" height="144" />
			</a>
		</li>
		<li>
			<a href="#" title="Aller à la page Dépannage">
				<img src="images/depannage.png" alt="Depannage" width="56" height="144" />
			</a>
		</li>
		<li>
			<a href="#" title="Aller à la page Les clés">
				<img src="images/cles.png" alt="Les cles" width="63" height="144" />
			</a>
		</li>
		<li>
			<a href="#" title="Aller à la page Les serrures">
				<img src="images/serrures.png" alt="Les serrures" width="74" height="144" />
			</a>
		</li>
		<li>
			<a href="#" title="Aller à la page Blindages">
				<img src="images/blindages.png" alt="Blindages" width="65" height="144" />
			</a>
		</li>
		<li>
			<a href="#" title="Aller à la page Accessoires">
				<img src="images/accessoires.png" alt="Accessoires" width="67" height="144" />
			</a>
		</li>
		<li>
			<a href="#" title="Aller à la page Contrôle d'accès">
				<img src="images/controle_acces.png" alt="Controle d'acces" width="77" height="144" />
			</a>
		</li>
	</ul>
</div>
</div>
</body>

Modifié par tankia (25 Dec 2005 - 11:16)
J'ai réglé le problème avec la marge à gauche sous firefox. Mais il me reste toujours l'espace entre le logo et le menu...

CSS :
body {
	margin:0 0;
	background-color: #666666;
}
#conteneur {
	text-align: center;
}
#fond {
	margin-left: auto;
  	margin-right: auto;
	width:960px;
	height:550px;
	text-align:left;
	background-image: url(images/fond_bois.png);
}
#logo {
	margin:0 0;
}
#logo img {
	border:0;
}
.menu {
	margin:0 0;
	padding:0 0;
}
.menu li {
	float:left;
	list-style:none;
}
.menu img {
	border:0;
}


HTML :
<div id="conteneur">
<div id="fond">
	<div id="logo">
		<a href="/" title="Retour en page d'accueil">
			<img src="images/serrurerie_paris.png" alt="A la Serrurerie de Paris" width="482" height="96" />
		</a>
	</div>
	<ul class="menu">
		<li>
			<a href="#" title="Aller à la page Clés à domicile">
				<img src="images/cles_domicile.png" alt="Cles a domicile" width="80" height="144" />
			</a>
		</li>
		<li>
			<a href="#" title="Aller à la page Dépannage">
				<img src="images/depannage.png" alt="Depannage" width="56" height="144" />
			</a>
		</li>
		<li>
			<a href="#" title="Aller à la page Les clés">
				<img src="images/cles.png" alt="Les cles" width="63" height="144" />
			</a>
		</li>
		<li>
			<a href="#" title="Aller à la page Les serrures">
				<img src="images/serrures.png" alt="Les serrures" width="74" height="144" />
			</a>
		</li>
		<li>
			<a href="#" title="Aller à la page Blindages">
				<img src="images/blindages.png" alt="Blindages" width="65" height="144" />
			</a>
		</li>
		<li>
			<a href="#" title="Aller à la page Accessoires">
				<img src="images/accessoires.png" alt="Accessoires" width="67" height="144" />
			</a>
		</li>
		<li>
			<a href="#" title="Aller à la page Contrôle d'accès">
				<img src="images/controle_acces.png" alt="Controle d'acces" width="77" height="144" />
			</a>
		</li>
	</ul>
</div>
</div>
Sujet clos
Aller à