Problème d'extensibilité avec une image

**Moxostoma** · 24/06/2010, 02h12

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.

**tsunamichups** · 24/06/2010, 10h50

tu peu mettre un min-width : xxpx ou %
ca donnera une taille minimum et ton image ne sera pas "manger", mais elle sera toujours extensible

**devyan** · 24/06/2010, 11h36

Bonjour,

Sinon tu peux utiliser la méthode des "portes coulissantes" afin de toujours avoir le morceau de coin arrondi visible.

devyan

**Moxostoma** · 24/06/2010, 16h56

Envoyé par devyan

Bonjour,

Sinon tu peux utiliser la méthode des "portes coulissantes" afin de toujours avoir le morceau de coin arrondi visible.

devyan

Qu'est ce que vous voulez dire par "portes coulissantes" ?

En utilisant : min-width, le corps passe en dessous du menu ...

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
 
	/* MENU */
 
#menu
{
float: left;
margin-left:1%;
min-width:181px; /* L'image du menu fait 181px ... */
}
 
	/* CORPS */
 
#corps
{
float:right;
background-color:#76b1ee;
border-width:1px; 
border-style:solid; 
border-color:#f2f2f2;
border-collapse:collapse;
width:77%;
color:#ffffff;
padding:5px;
margin-right:1%;
text-align:justify;
margin-bottom:1%;
}

**tsunamichups** · 24/06/2010, 17h25

Peut être il fraudait mettre le # en float : left

et s'il y a un conteneur a tes deux div, vérifier que la largeur des deux div enfant soit pas plus grande que la div mère

**Moxostoma** · 24/06/2010, 20h48

Heu, le #menu est déjà en float:left; .... sinon, j'ai compris ce que vous voulez dire.

Le menu et le corps ne sont pas dans des div :

Architecture du site :

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
 
<body>
 
<div id="en_tete">
</div>
 
<div id="speedbarre">
</div>
 
<div id="menu">
</div>
 
<div id="corps">
</div>
 
<div id="pied_de_page">
</div>
 
</body>

Je ne c'est vraiment pas comment résoudre ce problème de résolution...

Problème d'extensibilité avec une image

CSS

Vue hybride

Discussions similaires

Partager

Partager