probleme de decalage de mes pages sous differente resolution d'écran

**liily34** · 28/05/2007, 18h18

Bonjour,

Ca fait un moment que je cherche mais je n'arrive pas a trouver reponse a mon probleme ! Voila je fais un site (http://www.elem-web.fr) mais mon problème est que les cadres (celui du tag board a gauche et celui des news a droite) sont tres bien calés chez moi avec ma résolution 1024*768 mais des qu'un visiteur a une autre résolution tout est completement décalé !! Comment puis je faire pour que tout reste bien calé quelque soit la résolution d'écran svp ??? Je debute avec le css j'ai donc codé une partie de ma page en html je vous mets mes codes css et html afin que vous puissiez mieu me dire ou se trouve mon probleme...

style 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
body {
color:#A55123;
background-color:#DBC37D;
scrollbar-face-color:#DBC37D; scrollbar-shadow-color:#DBC37D; scrollbar-3dlight-color:#DBC37D; scrollbar-arrow-color:#A55123; scrollbar-track-color:#DBC37D; scrollbar-darkshadow-color:#DBC37D; scrollbar-highlight-color:#A55123;}
 
A:link { color:#A55123; FONT-SIZE: 12px; font-weight:normal; text-decoration:none; }
A:visited { color:#A55123; FONT-SIZE: 12px; font-weight:normal; text-decoration:none; }
A:active { color:#A55123; FONT-SIZE: 12px; font-weight:normal; text-decoration:none; }
A:hover { color:#EE8317; font-weight:bold;text-transform: uppercase;}
 
 
 
p{
	FONT-SIZE: 9px;
	COLOR: #A55123;
	FONT-FAMILY: verdana;
}
 
h1{
	background-color: transparant;
	text-align: center;
	font-variant: small-caps;
	letter-spacing: 1px;
	font-size: 14px;
	font-weight: bold;
	color: #A55123;
	padding: 4px;	
	FONT-FAMILY: verdana;
}
h2{
	background-color: transparant;
	text-align: left;
font-variant: small-caps;
	font-size: 11px;
	font-weight: bold;
	color: #A55123;	
	FONT-FAMILY: verdana;
}
 
table1 {
border-style:dotted; 
border-width:1px; 
border-color:black; 
background-color:transparant; ; 
background-color: transparant;
	text-align: center;
	font-variant: small-caps;
	letter-spacing: 1px;
	font-size: 10px;
	font-weight: bold;
	color: #A55123;	
	FONT-FAMILY: verdana;
}
 
.table3 {
border-style:dotted; 
border-width:1px; 
border-color:black; 
background-color:transparant;
	text-align: center;
	font-variant: normal;
	letter-spacing: 1px;
	font-size: 9px;
	font-weight: normal;
	color: #A55123;
	padding: 4px;	
	FONT-FAMILY: verdana;
 
}
 
.table2 {
border-style:solid; 
border-width:1px; 
border-color:#A55123;
text-align: center;
	font-variant: normal;
	letter-spacing: 1px;
	font-size: 9px;
	font-weight: normal;
	color: #A55123;
	padding: 4px;	
	FONT-FAMILY: verdana;
 
}
 
.tag { 
background-color : transparent;
scrollbar : no;}

code html

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
 
 
<html>
<head>
  <link rel="stylesheet" type="text/css"
 href="http://www.elem-web.fr/css/style.css">
  <title>Elem Web, le site officiel</title>
  <base target="frame">
</head>
<body
 style="color: rgb(0, 0, 0); background-color: transparent; background-image: url(http://www.elem-web.fr/essaifonddesigna.jpg);"
 alink="#000000" link="#000000" vlink="#000000">
<div style="text-align: center;">
<p><img style="width: 1024px; height: 768px;"
 src="design6a.jpg" usemap="#ma_map" alt=""
 border="no"></p>
<p>
<map name="ma_map" id="id_map">
<area shape="rect" coords="298,474,444,489"
 href="http://www.elem-web.fr/css/home2.html" target="I1"
 alt="HOME">
<area shape="rect" coords="298,498,444,510"
 href="http://www.elem-web.fr/css/laurent2.html" target="I1"
 alt="ELEM">
<area shape="rect" coords="298,523,444,537"
 href="http://www.elem-web.fr/css/media2.html" target="I1"
 alt="MEDIA">
<area shape="rect" coords="299,547,443,561"
 href="http://www.elem-web.fr/css/galerie2.html" target="I1"
 alt="GALERIE">
<area shape="rect" coords="299,571,443,585"
 href="http://elem-web.zikforum.com/" alt="vers forum">
<area shape="rect" coords="299,595,443,609"
 href="http://www.elem-web.fr/css/site2.html" target="I1"
 alt="SITE">
<area shape="rect" coords="299,618,443,632"
 href="http://www.elem-web.fr/css/www2.html" target="I1"
 alt="WWW">
<area shape="rect" coords="261,651,439,734"
 href="http://www.elem-web.fr/radioblog/index.htm"
 alt="RADIO BLOG">
</map>
</p>
</div>
<p align="center"><span
 style="position: absolute; left: 480px; top: 32px; z-index: 1;"><iframe
 name="I1" src="http://www.elem-web.fr/css/home2.html"
 border="0" frameborder="0" height="718"
 width="535"></iframe></span></p>
<p align="center">
<span style="position: absolute; left: 55px; top: 515px; z-index: 1;"><iframe
 name="I2" src="http://www.elem-web.fr/css/tagboard2.html"
 border="0" frameborder="0" height="255"
 width="203"></iframe></span></p>
</body>
</html>

Merci d'avance pour votre aide
*Aurel*

**Strix** · 28/05/2007, 18h32

Salut.

Le gros soucis en fait c'est tes frames, celles qui contiennent (1) les messages et (2) les infos.

Tu pourrais déjà placer les messages dans une div étant qu'ils restent sur toutes les pages. ensuites, je conseillerais de faire de même ave tes infos et de placer les 2 dans ta div principale car une fois à l'intérieur et correctement "CSSé" ( a y est, j'invente des mots...) elles suivront le reste du site.

**liily34** · 28/05/2007, 19h01

merci pour ta reponse

Mais pourrais tu m'indiquer comment installer ces divs afin que ca reste sur toutes les pages stp ???

J'ai essayer ceci (etant débutante en ce qui concerne les divs et le css) mais ca ne fonctionne pas du tout

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
.messages
{
width:203px;
padding-top: 515px;
padding-bottom: -3px;
padding-left: 55px;
margin-top: 515px;
}
*
.infos
{
   float:right;
   margin-left: 1005px;
  width: 535px;
}
*
.site
{
width: 1024px;
height: 768px;
}

et en code html :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div class="site">
<p><img style="width: 1024px; height: 768px;"
 src="design6a.jpg" usemap="#ma_map" alt=""
 border="no"></p>
<br>
<br>
<!-- messages -->
<div class="messages">src="tagboard2.html"
</div>
<!-- infos -->
<div class="infos">
src="home2.html"
</div>
</div>

**Strix** · 29/05/2007, 09h00

Salut.
Tu dois composé tes divs ainsi :

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
<div class="site">
<p><img style="width: 1024px; height: 768px;"
 src="design6a.jpg" usemap="#ma_map" alt=""
 border="no"></p>
<!-- messages -->
<div class="messages">le contenu de la partie "messages"
</div>
<!-- infos -->
<div class="infos">
le contenu de la partie "infos"
</div>
</div>

Ensuite avec CSS tu définis la position et les autres éléments (taille, fond...) de tes divs. Pour cela je te renvoie sur les cours.
Pour finir tu enregistreras ta page sous le nom de par exemple video.html et tu reprendras le squelette de ta page pour faire les autres pages.
Ensuite fais attention à ton css, même si ça doit passer, préfère font-family à FONT-FAMILY.

Ensuite tu peux définir ton fond (d'ailleurs qui énorme, quand même 1024x768 !) comme ceci :

Code CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
#site {
         background: url('tonimage.jpg') no-repeat;
}

Voilà, bonne continuation !

**liily34** · 29/05/2007, 13h10

Salut Strix merci pour ta réponse tres claire !

Je suis aller lire le cours sur les divs auquel tu m'as renvoyé et je l'ai suivi tout marche tres bien sauf que des que j'essaye de l'appliquer a mon site avec l'image "design6a.jpg" en design de fond mes divs ne se positionnent pas dessus l'image mais dessous quoique je mette comme positionnement ca reste en dessous comment faire pour que ca se positionne bien dessus stp ?

**Strix** · 29/05/2007, 13h14

Tu peux mettre un bout de code voir où tu en es ? merci

probleme de decalage de mes pages sous differente resolution d'écran

Positionnement en CSS

Vue hybride

Discussions similaires

Partager

Partager