28173 sujets

CSS et mise en forme, CSS3

Problème avec les floats

Bonjour tous,

Tout d'abords la page où se trouve mon problème :
http://bmjdr.free.fr/site_bm3/bm_magie/sortc_azhilia.php

J'ai donc une liste numéroté que j'ai divisé en deux (devant servir de sous-menu, je trouve ça plus lisible ainsi).
Pour pouvoir positionner mes deux listes <ol> une à côté de l'autre, je les aie mises en float:left dans un conteneur... seulement le conteneur suivant vient se mettre dedans... considérant qu'il s'agit d'un autre conteneur, je comprend pas pourquoi cela fait ça..

Le code CSS (seulement celui concerné) :

.contentsection {
	background: #252525;
	color:#E78B2A;
	border: solid 1px #790000;
	margin: 5px 0 5px;
	padding: 3px 3px 3px 3px;
	/*background-image: url(_images/ligne.jpg);
	background-repeat: no-repeat;
	background-position: center bottom;
	padding: 0px 0 15px;
	margin: 0 0 15px;*/
}
.contentsection li {
	margin: 5px 0 5px;
}
.sousmenu ol {
	float: left;
}


Le bout de code html en cause :

<div class="contentsection">
		<h2>Les sorts d'Azhilia</h2>
		<div class="sousmenu">
			<ol>
				<li><a href="#azhilia1">Restriction(s) &amp; Cercles</a></li>
				<li><a href="#azhilia2">Pousse rapide</a></li>
				<li><a href="#azhilia3">Salut de l'âme</a></li>
				<li><a href="#azhilia4">Surplus vital</a></li>
				<li><a href="#azhilia5">Prison de rose</a></li>
				<li><a href="#azhilia6">Stabilisation</a></li>
			</ol>
		</div>
		<div class="sousmenu">
			<ol start="7">
				<li><a href="#azhilia7">Don de vie</a></li>
				<li><a href="#azhilia8">Guérison</a></li>
				<li><a href="#azhilia9">Soins de groupe</a></li>
				<li><a href="#azhilia10">Tempête de roses</a></li>
				<li><a href="#azhilia11">Résurrection</a></li>
			</ol>
		</div>
	</div>	
	<div class="contentsection">
		<a id="azhilia1"></a><h3>Restriction(s) &amp; Cercles</h3>
		<table class="description">
			<tr>
				<th>Restriction(s) :</th>
				<td>Le personnage doit être d'alignement Bon, doit éviter de tuer 
				lorsque d'autres possibilités s'offrent à lui et ne peut refuser de célébrer un baptême.</td>
			</tr>
			<tr>
				<th>Cercle Majeur :</th>
				<td>Cercle du bien </td>
			</tr>
			<tr>
				<th>Cercle Mineur :</th>
				<td>Cercle du cycle </td>
			</tr>
			<tr>
				<td colspan="2" class="retour"><a href="#top">[Retour en haut]</a></td>
			</tr>
		</table>
	</div>


Merci beaucoup pour votre aide Smiley smile
Très instructif Smiley smile

Seulement le problème... c'est que le menu à gauche de la page est un flottant... donc si je fait un clear:left pour que la suite aillent sous le sous-menu... il va aussi sous le menu... Smiley ohwell
Salut,

Fais un tableau, ce n'est forcement mal.
Vaut mieux un tableau bien propre qu'une usine à gaz en CSS.
Sujet clos
Aller à