[résolu]Retour à la ligne qui ne s'effectue pas "Pourquoi ?"

C'est encore moi...

Après ma liste de lien image horizontale je souhaite mettre en dessous un texte de bienvenue mais lorsque je mets mon paragraphe il se met à côté du menu... Pourquoi et comment y remédier ?

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;
    display:block;
}
.menu {
	margin:0 0;
	padding:0 0;
}
.menu li {
	float:left;
	list-style:none;
}
.menu img {
	border:0;
	display:block;
}
.welcome p {
	width:482;
	height:144;
}

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>
	<p class="welcome"><h1>Lorem ipsum</h1> dolor sit amet, consectetuer adipiscing elit. Sed porttitor augue sit amet justo. Vivamus vestibulum arcu. Morbi ac neque id ligula lacinia egestas. Nunc ipsum. Donec lacinia congue massa. Duis interdum felis id diam. Suspendisse placerat. Nam lacinia augue vitae pede. Aenean at metus. Etiam id ligula. Pellentesque pellentesque urna pellentesque turpis. Ut tortor. Donec semper. Curabitur eu nisl. Donec eget urna. Phasellus sed erat.</p>
</div>
</div>

Modifié par tankia (25 Dec 2005 - 11:23)

	</li>
	</ul>
	<p class="welcome"><h1>Lorem ipsum</h1> dolor sit amet, consectetuer adipiscing elit. Sed porttitor augue sit amet justo. Vivamus vestibulum arcu. Morbi ac neque id ligula lacinia egestas. Nunc ipsum. Donec lacinia congue massa. Duis interdum felis id diam. Suspendisse placerat. Nam lacinia augue vitae pede. Aenean at metus. Etiam id ligula. Pellentesque pellentesque urna pellentesque turpis. Ut tortor. Donec semper. Curabitur eu nisl. Donec eget urna. Phasellus sed erat.</p>
</div>

Tu le ferme quand ton <div id="logo"> ?

Je pense que tu devrais le fermer avant ton <p class="welcome"> non ?

Le div id="logo" est fermé avant la liste ul classe="menu"

<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">

ce qui est etrange, c'est que en enlevant carrement le .welcome p { de ton css, le texte ne bouge pas. Donc, visiblement il herite du menu.

Essai de créer un #welcome et de le mettre en forme dans ton code

Bon je vais tout reprendre à zéro en faisant juste la partie html sans aucune mise en forme puis enfin je reviendrais poser mes quesiton pour la mise en forme css car mon css commence à devenir n'importe quoi là

<edit>J'ai mit un clear:both aux calques qui suivent et ça marche</edit>
Modifié par tankia (20 Dec 2005 - 19:16)