Empêcher les flottants de dépasser

**PatSan** · 10/06/2013, 23h59

Bonjour à tous !
Je suis sur un problème depuis...un certain temps. J'ai pas mal surfé sur le web pour y trouver une solution mais quelque chose cloche dans mon code.

Voici le résumé du problème :
J'ai constitué un menu horizontal et je souhaite que les options du menu disparaissent au fur et à mesure que la fenêtre se rétrécie horizontalement.
Si quelqu'un peut me dire pourquoi cela ne fonctionne pas, je dormirai mieux la nuit

Voici le code :

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
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
 
<head>
<style>
body {
	margin:0 0;
	padding: 0px 0px;
	border: 0px;
	background-color:#000;
}
 
#site {
	top:0px;
	margin:0px;
	width:100%;
}
 
#conteneur_menu_accueil_principal {
}
#conteneur_menu_accueil_principal> .clear {
	clear: both;
  	height: 0;
	overflow: hidden;
}
 
#menu_accueil_principal {
	position:absolute; 
	top:69px;
	z-index:110;
	height: 150px;
}
 
#navigation_accueil_principal {
	margin: 0;
	padding: 0 1em;
	height: 3em;
	list-style-type: none; 
}
 
#navigation_accueil_principal > li {
	float: left;
	height: 100%;
	margin-right: 0.5em;
	padding: 0 1em;
}
 
#navigation_accueil_principal > li > a {
	float: left;
	height: 100%;
	color: #FFF;
	text-decoration: none;
	line-height: 3; 
	font-size:20px;
	font-family:'Open Sans',arial,serif;
	padding: 0 1em;
	border-bottom: 6px solid rgba(156, 190, 26,.5);
	border-bottom: 6px solid rgb(156, 190, 26,.5);		
}
 
#navigation_accueil_principal > li > a:hover {
	color: rgb(157, 189, 26);
	border-bottom-color: rgb(156, 190, 26);
 }
 
#navigation_accueil_principal > li.sub_accueil_principal {
	position: relative;		
}
 
#navigation_accueil_principal > li.sub_accueil_principal ul {
	width: 0em; 
	margin: 0;
	padding: 0 0 0 0;
	list-style: none;
	position: absolute;
	top: -1000em;
	-webkit-transition-timing-function:linear; 
    -webkit-transition-property:width;
    -webkit-transition-duration:0.1s;	
    -o-transition-timing-function:linear; 
    -o-transition-property:width;
    -o-transition-duration:0.1s;
    -moz-transition-timing-function:linear;
    -moz-transition-property:width;
    -moz-transition-duration:0.1s;
	-ms-transition-timing-function:linear; 
    -ms-transition-property:width;
    -ms-transition-duration:0.1s;
	transition-timing-function:linear; 
	transition-property:width; 		
    transition-duration:0.1s;		
}
 
#navigation_accueil_principal > li.sub_accueil_principal:hover ul {
	top: 3.3em;	
	width: 13em; 		
}
 
#navigation_accueil_principal > li.sub_accueil_principal ul li {
	width: 100%;
	margin: 1px auto 0 auto; 			
}
 
#navigation_accueil_principal > li.sub_accueil_principal ul li a {
	height: 100%;
	display: block;
	padding: 0.4em;
	color: #fff;
	font-size:14px;
	font-family:'Open Sans',arial,serif;
	text-decoration: none;
	background-color:rgb(139, 166, 37); 
	background-color:rgba(139,166,37,0.8);	
}
 
#navigation_accueil_principal > li.sub_accueil_principal ul li a:hover {
	background-color:rgb(78, 78, 78); 
	background-color:rgxba(78, 78, 78,0.8); 
}
 
</style>
</head>
 
<body>
<div id="site">
 	<div id="conteneur_menu_accueil_principal"> 
		<div id="menu_accueil_principal">
        	<ul id="navigation_accueil_principal">
            	<li class="sub_accueil_principal"> <a href="#">Nos produits</a> 
                	<ul>
                    	<li><a href="#">Les tisanes aromatiques</a></li>
                    	<li><a href="#">Les tisanes thérapeutiques</a></li>
                	</ul>
            	</li>
            	<li> <a href="#">Nos recettes</a> </li>
            	<li> <a href="#">Nos boutiques</a> </li>
            	<li> <a href="#">Nos événements</a> </li>
        	</ul>
		</div>
		<div class="clear"></div>		
    </div>
</div>
</body>
</html>

Merci d'avance pour vos réponses.

**Muchos** · 11/06/2013, 04h27

Comme je ne comprends pas votre code, j'ai fait une petite démo qui peut peut-être vous intéresser :

Code html :

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
19
20
21
22
23
24
25
26
27
28
29
30
31
32
 
<!doctype html>
<html dir="ltr" lang="fr-FR">
<head>
	<meta charset="UTF-8" />
	<title>Masquer menu au rétrécissement</title>
	<style type="text/css">
        body {
overflow: hidden;
/* Si hors fenêtre alors masqué */
}
        ul {
padding: 0; text-align: center;
white-space: nowrap; /* Ne pas couper le contenu de UL */
}
        li {
display: inline-block; background: gray;
margin: 1em; padding: 1em;
}
        </style>
</head>
<body>
	<ul>
		<li>perso</li>
		<li>je</li>
		<li>préfère</li>
		<li>quand</li>
		<li>ça</li>
		<li>flotte</li>
	</ul>	
</body>
</html>

Invité · 11/06/2013, 09h29

Bonjour,
une manière plus concise d'écrire ton code (sans utiliser plusieurs class) :

Code css :

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
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
body {
	margin:0 0;
	padding: 0px 0px;
	border: 0px;
	background-color:#000;
}
 
/* Correction block display (non défini dans IE6/7/8/9 & FF3) */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, address { display:block; } /* balises HTML5 (IE) */
 
#site {
	top:0px;
	margin:0px;
	width:100%;
}
 
#menu_accueil_principal {
}
#menu_accueil_principal > div.clear {
	clear: both;
  	height: 0;
	overflow: hidden;
}
 
#menu_accueil_principal nav {
	position:absolute; 
	top:69px;
	z-index:110;
	height: 150px;
}
 
#menu_accueil_principal nav > ul {
	margin: 0;
	padding: 0 1em;
	height: 3em;
	list-style-type: none; 
}
 
#menu_accueil_principal nav > ul > li {
	position: relative;		
	float: left;
	height: 100%;
	margin-right: 0.5em;
	padding: 0 1em;
}
 
#menu_accueil_principal nav > ul > li > a {
	float: left;
	height: 100%;
	color: #FFF;
	text-decoration: none;
	line-height: 3; 
	font-size:20px;
	font-family:'Open Sans',arial,serif;
	padding: 0 1em;
	border-bottom: 6px solid rgba(156, 190, 26,.5);
	border-bottom: 6px solid rgb(156, 190, 26,.5);		
}
 
#menu_accueil_principal nav > ul > li > a:hover {
	color: rgb(157, 189, 26);
	border-bottom-color: rgb(156, 190, 26);
 }
 
#menu_accueil_principal nav > ul > li > ul {
	width: 0em; 
	margin: 0;
	padding: 0 0 0 0;
	list-style: none;
	position: absolute;
	top: -1000em;
	-webkit-transition-timing-function:linear; 
    -webkit-transition-property:width;
    -webkit-transition-duration:0.1s;	
    -o-transition-timing-function:linear; 
    -o-transition-property:width;
    -o-transition-duration:0.1s;
    -moz-transition-timing-function:linear;
    -moz-transition-property:width;
    -moz-transition-duration:0.1s;
	-ms-transition-timing-function:linear; 
    -ms-transition-property:width;
    -ms-transition-duration:0.1s;
	transition-timing-function:linear; 
	transition-property:width; 		
    transition-duration:0.1s;		
}
 
#menu_accueil_principal nav > ul > li:hover > ul {
	position: absolute;
	top: 3.3em;	
	width: 13em; 		
}
 
#menu_accueil_principal nav > ul > li > ul > li {
	position: relative;		
	width: 100%;
	margin: 1px auto 0 auto; 			
}
 
#menu_accueil_principal nav > ul > li > ul > li > a {
	height: 100%;
	display: block;
	padding: 0.4em;
	color: #fff;
	font-size:14px;
	font-family:'Open Sans',arial,serif;
	text-decoration: none;
	background-color:rgb(139, 166, 37); 
	background-color:rgba(139,166,37,0.8);	
}
 
#menu_accueil_principal nav > ul > li > ul > li > a:hover {
	background-color:rgb(78, 78, 78); 
	background-color:rgxba(78, 78, 78,0.8); 
}

Code html :

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
<div id="site">
 	<div id="menu_accueil_principal"> 
		<nav>
        	<ul>
            	<li> <a href="#">Nos produits</a> 
                	<ul>
                    	<li><a href="#">Les tisanes aromatiques</a></li>
                    	<li><a href="#">Les tisanes thérapeutiques</a></li>
                	</ul>
            	</li>
            	<li> <a href="#">Nos recettes</a> </li>
            	<li> <a href="#">Nos boutiques</a> </li>
            	<li> <a href="#">Nos événements</a> </li>
        	</ul>
		</nav>
		<div class="clear"></div>		
    </div>
</div>

Par contre, je ne comprends pas ce que tu entends par :

Envoyé par PatSan

... que les options du menu disparaissent...

... au fur et à mesure que la fenêtre se rétrécie horizontalement...

Je pencherais pour les media queries, ou JavaScript, mais ta demande n'est pas très claire.

**PatSan** · 11/06/2013, 13h37

Bonjour jreaux62,
Merci pour ton code mais cela ne résout pas mon problème...
Je cherche à cacher les options du menu lorsque la fenêtre se rétrécie horizontalement de droite à gauche (voir code de muchos).

**PatSan** · 11/06/2013, 13h42

Bonjour "Muchos",
Ton code fonctionne, merci pour ça.
Il faut cependant que je trouve l'erreur dans le mien car je ne peux pas partir du tien : je n'ai mis que la version épurée de mon code complet.

**rodolphebrd** · 11/06/2013, 14h24

Bonjour,

et une solution utilisant les requêtes de média:

Code css :

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
19
20
@media (max-width:1050px) {
	ul li:first-of-type{
		display:none;
	}
}
@media (max-width:850px) {
	ul li:nth-of-type(3){
		display:none;
	}
}
@media (max-width:650px) {
	ul li:nth-of-type(2){
		display:none;
	}
}
@media (max-width:450px) {
	ul li:last-of-type{
		display:none;
	}
}

Invité · 11/06/2013, 19h29

Envoyé par PatSan

...je n'ai mis que la version épurée de mon code complet.

Il faudrait donc voir le code complet.
Si possible, en ligne ?

Car ça marche, en ajoutant simplement ça dans ton 1er code fourni :

Code :

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

#menu_accueil_principal { width: 900px; }

Empêcher les flottants de dépasser

CSS

Vue hybride

Discussions similaires

Partager

Partager