Discussion :

[DJ Caësar 9114]

Bonjour à tous,

J'ai recherché sur le forum (et internet au sens large) et je ne trouve pas la solution à mon problème.
J'ai un menu sur mon site en haut, qui a comme propriété

Code :

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

1
2
width: 100%;
max-height: 30px;

Ce menu comprend plusieurs choses, dont un ul qui a comme propriété

Code :

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

display: inline;

Cependant je teste les redimensionnement de fenêtre, et je m'aperçois que tandis que la barre conserve bien la taille de 30 pixels de hauteur, mes éléments du ul partent un par un en dessous.

J'aimerais que les éléments restent algnés, quitte à ce qu'une barre de défilement apparaisse en bas de la fenêtre.

Merci de votre aide

[NoSmoking]

Bonjour,
essaies de mettre ton UL en display:inline-block et de lui adjoindre une min-width:.

[DJ Caësar 9114]

Bonjour,
Merci de ta réponse. J'ai malheureusement déjà essayé ça, sans succès...

[NoSmoking]

Je pourrais me contenter d'une réponse comme "mais si ça marche!", mais cela ne fera pas avancer les choses, par contre ton code et ton CSS eux le peuvent

[DJ Caësar 9114]

Héhé pas de souci, je le colle là (en réalité tout est généré de manière assez compliqué mais l'architecture du menu est celle-là):

Code html :

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

1
2
3
4
5
6
7
<div id="menu">
<ul>
<li>Element</li>
<li>Element</li>
<li>Element</li>
</ul>
</div>

Rien de bien compliqué, donc.
Pour le css, pareil, rien de bien compliqué (je mets toutes les propriétés au cas où ça vienne d'un conflit):

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
#menu {
	position: fixed;
	top:0;
	width: 100%;
	max-height: 30px;
	font-family:Helvetica,Arial,Verdana,sans-serif;
	background: #AFAFAF;
	color: white;
	font-weight:bold;
	font-size:0.8em;
	-moz-box-shadow:1px 1px 1px #AFAFAF;
	-webkit-box-shadow:1px 1px 1px #AFAFAF;
	box-shadow: 1px 1px 1px #AFAFAF;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
 
}
 
#menu ul {
	display: inline;
	list-style-type: none;
	margin: auto;
	height: 30px;
	padding: 0px;
}
 
 
#menu li:hover {
	background: #CFCFCF;
}
 
#menu ul li {
	line-height: 30px;
	vertical-align: middle;
	height: 30px;
	float: right;
}

[Invité]

Bonjour,
un lien vers un site web ?
overflow:auto; ?