résolution écran + menu sous forme d'image problème pour redimentionnement

**Benorito** · 14/11/2008, 02h04

Bonjour,

Je suis en trin de créer un site et j'ai un gros problème. Je sais que se sujet reviens souvent mais après avoir consulté mainte et mainte fois de nombreux sites je ne trouve pas les bonnes solutions. Donc j'ai développé le site sous une résolution de 1200*800 j'aimerai tout simplement qu'il passe sous toute les résolution. Le souci viens de mon menu en image sous forme de tableau avec rollovers, je n'arrive pas a le dimensionner et surtout a le faire s'aligner avec le cadre de mon contenu quand la résolution varie. La technique qui me plaie le plus serai de faire des marges à droite et a gauche du site. Après beaucoup d'essais le menu ne s'adapte toujours pas, je viens prendre vos conseils. En espérant avoir des réponses de votre part, je vous fournis mais codes vierges.

Le code PHP : Index.php

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
 
<?php ?>
<html>
<head>
	<script type="text/javascript"></script>
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" onload="preloadImages();" oncontextmenu="return bloc()">
<div id="conteneur">
        <div id="contact">
		<img width="275" height="115" src="fun.JPG" border="0" title="Pour me 			contacter !"></a>
	</div>
	<div id="banières">
		<img width="993" height="115" src="Banniere_animee.gif" border="0">
	</div>
 
	<div id="menu">
<table id="Tableau_01" width="275" height="600" border="0" cellpadding="0" 	cellspacing="0">
	<tr><td>
			<a href="index.php"
			onmouseover="changeImages('Menugratte_01', 'Menugratte/Menugratte_01-over.gif'); return true;"
				onmouseout="changeImages('Menugratte_01', 'Menugratte/Menugratte_01.gif'); return true;"
				onmousedown="changeImages('Menugratte_01', 'Menugratte/Menugratte_01-over.gif'); return true;"
				onmouseup="changeImages('Menugratte_01', 'Menugratte/Menugratte_01-over.gif'); return true;">
				<img name="Menugratte_01" src="Menugratte/Menugratte_01.gif" width="275" height="84" border="0" alt="Accueil"></a>
	</td></tr>
.........
	<tr><td>
			<a href="Prive/connection.php"
				onmouseover="changeImages('Menugratte_07', 'Menugratte/Menugratte_07-over.gif'); return true;"
				onmouseout="changeImages('Menugratte_07', 'Menugratte/Menugratte_07.gif'); return true;"
				onmousedown="changeImages('Menugratte_07', 'Menugratte/Menugratte_07-over.gif'); return true;"
				onmouseup="changeImages('Menugratte_07', 'Menugratte/Menugratte_07-over.gif'); return true;">
				<img name="Menugratte_07" src="Menugratte/Menugratte_07.gif" width="275" height="89" border="0" alt="Privé"></a>
	</td></tr>
</table>
</div>
 
<div id="bandeV">
		<img width="25" height="600" src="bande.jpg" border="0">
</div>
<div id="bandeH">
		<img width="1265" height="15" src="bandeh.JPG" border="0">
</div>
<div id="contenu" >
<br>
<center>
<?php
?>
<br><br>
<img src="bienvenu.gif" width="215" height="100"><br><H4>
<?php
?>
</center>
</div>
</div>
 
</body>
</html>

et le code css : fstyle.css

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
#conteneur
{width: 80%;  max-width: 1000px;  min-width: 700px; }
 
#menu
{position: absolute;  left: 0 px;  top: 115;}
 
#banières
{position: absolute;  left: 272px;  top: 0;}
 
#contact
{position: absolute;  left: 0 px;  top: 0px;}
 
#bandeV
{position: absolute;  left: 1240px;  top: 115px;}
 
#bandeH
{position: absolute;  left: 0px;  top: 700PX;}
 
#contenu
{width:975px;  height:600px;  margin-left: 275px;  margin-top: 115px;
background: url("background.jpg") white;  background-repeat: repeat;  background-attachment:  scroll;  overflow: auto;}

Merci d'avance

**Jumano** · 14/11/2008, 08h15

Bonjour,
As tu été voir la galerie CSS : ici ...
PS : Essaye de ne pas tout écrire en gras, c'est presque illisible ...

**Benorito** · 14/11/2008, 13h38

Rebonjour,

Mon problème ne viens pas du positionnement. Le menu est bien attaché a gauche il s'adapte bien sauf avec le contenu situé a droite, une fois la résolution changé le menu prend une autre forme il s'aligne sur la parti contact au dessus, sur le contenu en haut mais pas en bas les 2 menu et contenu se comporte différemment comme si le menu se bloquai sur quelque chose. Réellement j'ai énormément essayé et je suis vraiment perdu.

**Benorito** · 14/11/2008, 13h40

Pour vous donner un aperçu de se qu'il est sans changement : http://www.funynet.fr
Merci

**Benorito** · 14/11/2008, 16h19

Donc après avoir étudié encore le problème je m'apercoi qu'il vien de mon overflow :/. Contact et bannière sont sur la même ligne en haut, menu en dessous aligner avec contenu. Le problème vien de l'alignement du contenu avec la balise overflow le div folèlle et ne se retrouve pas du tout en face le menu.
Voici mai code modifié :

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
body
{
background: black; 
width:85%;
height:100%;
margin-left : auto ;
margin-right : auto ; 
}
#conteneur
{
background: black; 
width:100%;
}
#contact
{
float:left;
width:25%;
height:20%;
}
#banières
{
float:left;
width:75%;
height:20%
}
#menu
{
float:left;
width:25%;
height:80%;
}
#contenu
{
margin-left : 20% ;
width:75%;
height:100%;
background: url("background.jpg") white;
overflow: auto;
}

Merci
Benorito

**witch** · 16/11/2008, 03h20

Salut,

Suite à notre dernière échange, j'ai ajouté des petites modifications, en ce qui concerne la propriété position, et j'ai essayé que ça soit compatible au niveau de FF et IE7 au moins, voilà j'ai mis ça :

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
 body
{
background: black; 
width:80%;
height:100%;
margin-left : auto ;
margin-right : auto ; 
font-size:12px;
position:relative;
}
 
#conteneur
{
background: black; 
width:100%;
height:100%;
}
 
#contact
{
float:left;
width:30%;
height:20%;
position: absolute;
top:0; 
}
 
#banières
{
width:60%;
height:20%;
position: absolute;
left: 30%;
}
 
#Tableau_01
{
float:left;
width:30%;
height:90%;
position: absolute;
top: 20%;
padding-top:0x;
margin-top:-6px;
}
 
#pad
{
padding:5px 5px;
}
 
#contenu
{
position: absolute;
top: 20%;
left: 30%;
width:60%;
height:90%;
background: url("background.jpg") white;
background-attachment: scroll;
overflow: auto;
}

Mais pour le problème des résolutions des images, je ne vois pas trop...
Je ne comprends pas clairement le souci.

**Benorito** · 18/11/2008, 14h32

Bonjour,

Donc suite au méssage j'ai mis la page concerné sur le net : www.funynet.fr

Changer la résolution et voyez comment se comporte mon menu et comment il se comporte par rapport a mon contenu.

La chartre graphique n'est pas respécté du tout j'en suis conscient je suis mauvais de ce coté aussi je débute, si vous avez des conseils a me donner pour améliorer tout sa je suis preneur.

Merci d'avance

Cordialement

Benorito

**devyan** · 18/11/2008, 22h15

Salut,

Tu ne peux pas "fixer" les dimensions height ET width de ton menu si tu veux pouvoir conserver un "aspect-ratio" constant.

Dans ton cas, la solution consiste en supprimer l'attribut "width:70%" de la déclaration CSS de #menu...

**Benorito** · 20/11/2008, 14h21

Bonjour,

Déja merci de ta réponse

Effectivement se qui bloque c'est le width, mais si je retire celui la, la photo prend la taille d'origine je ne peut plus régler la taille de mon menu le height na aucun effet dessus, dans le html rien ne fait varier non plus :/.

Une solution ?

Merci d'avance.

**Benorito** · 20/11/2008, 14h27

Pardon je reviens sur se que j'ai dis, le width du html fait varié les cases, une fois le menu tout aligné mon problème reste présent quand je change la résolution le menu monte sur le div contenu à droite en agrandissant les images

. Le menu variant sur sa hauteur encore a sa guise .

**devyan** · 20/11/2008, 15h29

Salut,

Je vais également faire mon "mea culpa"

Effectivement c'est HEIGHT qui vaut 70% pas WIDTH...

C'est WIDTH qu'il faut garder et passer HEIGHT à auto (ou la supprimer)

résolution écran + menu sous forme d'image problème pour redimentionnement

CSS

Discussions similaires

Partager

Partager