Discussion :

[glloq8]

Bonjour, je suis sur un site qui me pose problème :

pour faire un menu, j'ai utilisé le code suivant :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
 
<div id="sous_menu">
    <div class="sous_menu">&nbsp;FEMME&nbsp;</div>
    <div class="sous_menu">&nbsp;LINGERIE&nbsp;</div>
    <div class="sous_menu">&nbsp;ENFANT&nbsp;</div>
    <div class="sous_menu_over">&nbsp;SPORT&nbsp;</div>
    <div class="sous_menu">&nbsp;HOMME&nbsp;</div>
</div>

avec le css :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
 
.sous_menu {
float: left;
display: block;
color: #666;
height: 20px;
line-height: 20px;
font-weight: bold;
}
.sous_menu_over {
float: left;
display: block;
color: #FE690F;
font-weight: bold;
height: 20px;
line-height: 20px;
background: url(images/triangle_repere_orange.gif) bottom center no-repeat;
}

Mais si je mets un autre p ou div après celui ci-dessus, le texte contenu dedans se mets à côté du précédent (commi si il avait un float:left lui aussi.

Comment faire pour le mettre en dessous ???

Récap de mon code :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
 
<div id="sous_menu">
    <div class="sous_menu">&nbsp;FEMME&nbsp;</div>
    <div class="sous_menu">&nbsp;LINGERIE&nbsp;</div>
    <div class="sous_menu">&nbsp;ENFANT&nbsp;</div>
    <div class="sous_menu_over">&nbsp;SPORT&nbsp;</div>
    <div class="sous_menu">&nbsp;HOMME&nbsp;</div>
</div>
<p>-----------------------------------------------------</p>

Je voudrais que mon p avec les --------------- vienne sous le menu !!

Merci d'avance !

[adiGuba]

Salut,


Il faut que tu spécifies une propriété clear: left; ou clear: both; sinon c'est normal puisque ton menu est placé à gauche du paragraph :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
<div class="menu">
    <div class="sous_menu">&nbsp;FEMME&nbsp;</div>
    <div class="sous_menu">&nbsp;LINGERIE&nbsp;</div>
    <div class="sous_menu">&nbsp;ENFANT&nbsp;</div>
    <div class="sous_menu_over">&nbsp;SPORT&nbsp;</div>
    <div class="sous_menu">&nbsp;HOMME&nbsp;</div>
</div>
<br style="clear: both;"/>
<p>-----------------------------------------------------</p>

Tu peux bien sûr utiliser un style pour cela...





Sinon pour le menu tu peux faire la même chose sans avoir à déclarer à chaque fois la class des éléments, par exemple en utilisant une liste :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
<ul class="menu">
	<li>&nbsp;FEMME&nbsp;</li>
	<li>&nbsp;LINGERIE&nbsp;</li>
	<li>&nbsp;ENFANT&nbsp;</li>
	<li class="over">&nbsp;SPORT&nbsp;</li>
	<li>&nbsp;HOMME&nbsp;</li>
</ul>

Avec le style suivant :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
ul.menu {
	margin: 0;
	padding: 0;
}
 
.menu li {
	float: left; 
	display: block;
	color: #666;
	height: 20px;
	line-height: 20px;
	font-weight: bold;
}
.menu li.over {
	color: #FE690F;
	background: url(images/triangle_repere_orange.gif) bottom center no-repeat;
}

C'est plus court et plus lisible

a++

[glloq8]

Merci beaucoup, j'avais pas pensé à ça !

C'est vrai que pour le menu, ça peut aller plus vite comme ça... en plus, j'ai un autre menu dans cette page, et j'ai utilisé cette méthode !

Merci encore !!