Design : Problème avec li (inline)
Bonjour,
Je vous explique mon problème, voici la page:
http://www.bird4life.com/bepnew/test_v1.html
Bref je travaille sur mon nouveau design de site web car l'ancien (www.birdsevolutionpro.com) était assez raté au niveau couleurs.
Mon problème est le suivant :
J'utilise la technique de CSS Sprite qui fonctionne bien, mais comme vous pouvez le voir le menu à gauche devrait être horizontal... pourtant il se met vertical malgré les deux "display:inline" du code css qui se trouve ici:
http://www.bird4life.com/bepnew/main.css
Un extrait de ce CSS:
Code:
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
| ul#top_menu
{
list-style:none;
margin:0;
padding:0;
display:inline;
height:30px;
width:800px;
}
ul#top_menu li
{
display:inline;
}
ul#top_menu li a
{
display:block;
width:157px;
height:30px;
}
#home a span
{
display:block;
position:relative;
width:157px;
height:30px;
background-image:url(_but/menu.jpg);
background-position:0px 0px;
line-height:30px;
text-align:center;
}
#home a:hover span
{
display:block;
position:relative;
width:157px;
height:30px;
background-image:url(_but/menu.jpg);
background-position:0px 30px;
line-height:30px;
text-align:center;
} |
Bref le problème vient apparemment de display:block car si j'enlève display:block des entités en dessous de ma liste non ordonnée, ça s'affiche en horizontal, mais je perd les propriétés de hauteur et de largeur, alors ça m'arrange pas.
Si vous vous demandez pourquoi il y a "test test test" en dessous des deux boutons, c'est simplement un petit test pour montrer que inline fonctionne (j'avais besoin de me prouver que ça fonctionnait au moins au niveau "de base" :mouarf: Ben oui faut se convaincre parfois ;)).
Merci d'avance pour votre aide précieuse!
