Bonjour, bonsoir.

J'ai un petit problème avec mon design. J'ai fait une image avec les coins haut arrondis, mais suivant la résolution de l'écran, l'image est manger ...

Pas bon :



Bon :



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
 
<div id="menu">   
 
<div id="menu_tutoriel"> <!--Cette div, c'est juste pour une fonction Jquery, se n'est pas sa, qui pose problème :) -->
<div class="haut_menu">
<img src="Design/images/unknow.png" alt=""> 
Top'Tutoriel <a href="#" id="descend_menu" class="infos_bulle" title="Cliquez sur l'image pour afficher le Top'Tablature"><img src="Design/images/fleche_bas.png"></a>
</div>
 
<div class="contenu_menu">
<div class="tuto_top_menu">
<a href="#" class="titre_tuto_top">Une poupée qui fait non</a><br /><br />
avec la moyenne de :<br /><br />
<div class="note_tuto_top">13.9 / 20</div>
</div>
</div>
<div class="bas_menu"></div>
</div>
</div>

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
 
	/* MENU */
 
#menu
{
float: left;
width: 18%;
margin-left:1%;
}
 
.haut_menu
{
background-image: url("../images/haut_menu.png");
background-repeat: no-repeat;
height:25px;
font-weight:bolder;
color:white;
text-align:left;
font-size:1em;
padding-left: 10px;
padding-top:4px;
}
 
.contenu_menu
{
background-color:#76b1ee;
border-width:1px; 
border-style:solid; 
border-color:#f2f2f2;
border-collapse:collapse;
padding-top:10px;
padding-left:10px;
padding-right:10px;
margin-bottom: 20px;
border-top:none;
}

Merci, d'avance pour votre précieuse aide.

PS : Sinon, le design est bien extensible, juste ce problème de menu parce qu'il y a une image.