Redimensionnement automatique css

**Warrer** · 04/09/2008, 11h36

Bonjour à tous,

Je viens de mettre en ligne mon site web et je viens de me rendre compte que mon menu déroulant ainsi que l'une de mes images de fond sont décalés quand je suis sur une autre résolution d'écran que celle sous laquelle j'ai développer ma page.
Alors je me doute que c'est parce que j'ai mis les tailles en px et pas en % mais j'ai testé en % et ça ne marche pas non plus !

Résultat ça fait super moche et j'aimerai que quelque soit la résolution de l'écran, et si la personne redimensionne sa fenêtre da navigateur, que tout reste fixe et que des barres de navigation apparaissent dans le navigateur.

Pourriez vous m'indiquer comment faire ? Mon css est valide W3C.

voici mon code 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
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
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
body
{
 font: 11px verdana, sans-serif;
 margin-left: 270px;
 margin-right: 270px;
 background-color:#3366FF;
}
 
.fond2
{
background-color:#AAAAAA;
}	
 
 
.banniere
{
position:static;
text-align:center;
}	
 
.texte
{
margin-left: 150px;
margin-right: 150px;
text-align:left;
font-weight:bold;
margin-top:100px;
}	
 
.copyright
{
font-family:"Times New Roman", Times, serif;
font-style:italic;
text-align:center;
margin-bottom:auto;
margin-top:20px;
}
.fond
{
text-align:center;
}
 
 
#menuDeroulant
{
 width: 865px;
 list-style-type: none;
 margin: 0px;
 margin-left: 7px;
 padding: 0px;
 position:absolute;
 border: 0;
}
#menuDeroulant li
{
 float:left;
 margin: 0;
 width: 108px;
 padding: 0;
 border: 0;
}		
#menuDeroulant .sousMenu
{
 display:none;
 list-style-type: none;
 margin: 0;
 padding: 0;
 border: 0;
}
#menuDeroulant .sousMenu li
{
 float: none;
 margin: 0;
 padding: 0;
 border: 0;
 width: 149px;
 border-top: 1px solid transparent;
 border-right: 1px solid transparent;
}			
#menuDeroulant li a:link, #menuDeroulant li a:visited
{
 display: block;
 height: 1%;
 color: #FFF;
 background: #3B4E77;
 margin: 0;
 padding: 4px 8px;
 border-right: 1px solid #fff;
 text-decoration: none;
}
#menuDeroulant li a:hover { background-color: #F2462E; font-weight:bold;}
#menuDeroulant li a:active { background-color: #5F879D; }
 
#menuDeroulant .sousMenu li a:link,
#menuDeroulant .sousMenu li a:visited
{
 display: block;
 color: #FFF;
 margin: 0;
 border: 0;
 text-decoration: none;
 background: transparent url("fond.png") repeat;
}
#menuDeroulant .sousMenu li a:hover
{
 background-image: none;
 background-color: #F2462E;
} 
#menuDeroulant .sousMenu li a:active { background-color: #5F879D; }
#menuDeroulant li:hover > .sousMenu { display: block; }

un extrait de ma page index :

Code xhtml :

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="deco.css" type="text/css" media="screen" />
<SCRIPT LANGUAGE="Javascript" SRC="fonctionjs.js"></SCRIPT>
<SCRIPT LANGUAGE="Javascript">detectversion(); </SCRIPT>
<title>Site web</title>
</head>
 
<body onLoad="detectversion()">
<div class="fond2">
<div class="banniere">
<a href="index.php" title="Retour à la page d'accueil" ><img src="banniere_min.png" width="600" height="100" longdesc="Site web" /></a>
</div>
<ul id="menuDeroulant">
 
 <li>
  <a href="1.php">1</a> <ul class="sousMenu">
   <li><a href="1/toto.php">toto</a></li>
   <li><a href="1/tutu.php">tutu</a></li>
   <li><a href="1/tata.php">tata</a></li>
  </ul>
</li>
 
<li>
 <a href="forum/index.php">Forum</a> 
</li>
 
 
</ul>
<div class="fond">
<img src="background_min.png">
</div>
 
</body>
</html>

Merci d'avance !!!

**Damouille** · 04/09/2008, 12h53

Bonjour,

Tout d'abord, si tu veux que ton site soit de la meme taille peut importe la résolution, il faut fixer une taille en pixel et surtout pas en %.

Je te conseille d'utiliser une div container qui enveloppe tout. Donne une taille fixe (en px) à ce conteneur et ton site gardera sa taille peu importe la résolution.

**Warrer** · 04/09/2008, 13h29

Merci du conseil. Effectivement c'est mieux !!!

Comment pourrais je faire pour centre mon contenu ? quelque soit la résolution là aussi car du coup les margin left/right du body sont inutiles suivant les résolutions !!

**Damouille** · 04/09/2008, 13h31

Pour ca, c'est margin: auto; sur le conteneur

**Warrer** · 04/09/2008, 13h44

Merci, c'est tout bon pour moi !

Redimensionnement automatique css

Dimensionnement en CSS

Discussions similaires

Partager

Partager