Affichage de mon site avec n'importe quelle résolution

**beegees** · 08/03/2011, 14h01

Bonjour à tous,

Mon site n'est pas identique d'une résolution à une autre.

Voici à quoi il ressemble avec une résolution de 1024 * 768 :

http://164.15.112.38/1024_768.JPG

et avec une résolution de 1680 sur 1050 :

http://164.15.112.38/1680sur1050.JPG

Vous voyez par exemple que le numéro de téléphone est décalé (en haut à gauche).

J'aimerais savoir comment je pourrais améliorer ce 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
/* début déclarations générales */
 
* { height:auto; width:auto; padding:0px; margin:0px; height: 100%; }
body { margin:0px; background:url(images/bg.jpg) repeat fixed; font-family:arial; font-size:12px;   }
 
/* fin déclarations générales*/
 
 
 
/* début header*/
 
#header { width:950px; height:124px; background:url(images/head_bg.gif) repeat-x; border-left:1px solid #bbbaba; border-right:1px solid #bbbaba; margin:0 auto;  }
#header img { border:0px solid white;  }
 
#header #lang { width:20px; height:60px; float:right; margin:35px 20px 0 0;}
#header #lang img { width:20px; height:14px; margin:8px 0px; border:0px solid white; }
 
/* fin header*/
 
 
 
/* début menu */
 
#menu { width:950px; height:42px; background:url(images/menu_bg.gif) repeat-x; border-left:1px solid #bbbaba; border-right:1px solid #bbbaba; margin:0 auto; padding-top:2px;  }
#menu .btn { height:41px; float:left; text-transform:uppercase;}
#menu  a.btn { text-decoration:none; padding:15px 20px 0px 20px; color:#008ab6; height:41px; }
#menu  a.btn:hover { text-decoration:none; color:#9ec012;  }
#menu  #btn_activ {  text-decoration:none; padding:15px 20px 0px 20px; color:#f8ae00; height:41px; float:left; text-transform:uppercase; background:url(images/hover.gif) repeat-x; }
#menu  .separ { width:2px; height:41px; float:left; background:url(images/separ.gif) no-repeat; }
 
#menu  #search { width:300px; height:41px; float:right; }
#menu  #search  input{ width:238px; height:31px; background:url(images/input_search.gif) no-repeat; color:#008ab6; padding:5px; float:left; border:0px solid white; }
#menu  #search  input[type=submit]{ width:52px; height:41px; background:url(images/submit_search.gif) no-repeat; color:black;  float:left; border:0px solid white; }
#menu  #search  input[type=submit]:hover { width:52px; height:41px; background:url(images/submit_search.gif) no-repeat; color:#008ab6;  float:left; border:0px solid white; }
 
/* fin menu */
 
 
/* début page centrale */
 
#content { width:920px; height:610px; background:white; border-left:1px solid #bbbaba; border-right:1px solid #bbbaba; margin:0 auto; padding:15px;  }
#content #titre { width:358px; height:41px; margin-bottom:30px; background:url(images/titre.gif) no-repeat; text-transform:uppercase; font-size:16px; font-weight:bold; color:white; letter-spacing:3px; padding:20px 0 0 20px; }
#content .content_item { width:104px; height:97px; background:url(images/puce.gif) no-repeat; float:left; margin:0 24px;}
#content .content_item  img { margin:30px 0 0 30px; width:30px; height:30px; border:0px solid white;}
#content #page { width:920px; height:421px;}
#content #page  .cote { width:9px; height:421px; float:left; }
#content #page  #centre { width:902px; height:421px; float:left; background:url(images/in.gif) repeat-x;}
 
 
/* fin page centrale */
 
 
 
/* début footer */
 
#footer {  width:910px;height:292px; background:url(images/footer.gif) no-repeat; border-left:1px solid #bbbaba; border-right:1px solid #bbbaba; margin:0 auto; padding:30px 20px 0 20px;  }
#footer  .footer_box { width:220px; height:auto !important; float:left;  font-size:12px; color:black;  padding:0 20px;  }
#footer  .box_separ { width:60px; min-height:50px; float:left;  }
#footer  .footer_box .title_box { width:126px; height:23px; text-transform:uppercase; color:white; padding:10px 0px 30px 0px; color:#008ab6; font-weight:bold; font-size:15px;}
#footer  .footer_box .box_item { width:156px; height:15px; padding:6px 0px; }
#footer  .footer_box .box_item img { border:0px solid white; }
#footer  .footer_box a.box_item { height:23px; text-decoration:none; color:black; font-size:12px; }
#footer  .footer_box a.box_item:hover { text-decoration:none; color:#008ab6;; }
 
/* fin footer */
 
#gsm { position:absolute;
left:800px;
top:50px;
font-size:36px;
color:#FFFFFF;
 
}
 
.accordion
{
	position:relative;
	left:110px;
}
 
.widgets_form_mail
{
	height:15px;
	margin:15px;
	margin-right:100px;
 
}
 
.textarea_mail
{
	height:150px;
	margin:15px;
}
 
.bouton_form_mail
{
	width:155px;
	height:50px;
	margin:15px;
}

afin que mon site soit affiché correctement par n'importe quelle résolution ?

Voici l'adresse du site :

http://164.15.112.38/beegees_v3/realisations.php

Je vous remercie d'avance pour votre aide.

beegees

**ornitho13** · 08/03/2011, 14h37

Salut,

tu as 2 problèmes dans ta page :
- les langues s'affichent après l'accordéon, tu devrais les mettre dans ton header par exemple.
- le css pour ta class "accordeon" n'est pas correcte.

Voici ce que je ferai pour les langues :

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
#header {
width: 950px;
height: 124px;
position: relative;
background: url(images/head_bg.gif) repeat-x;
border-left: 1px solid #BBBABA;
border-right: 1px solid #BBBABA;
margin: 0 auto;
}
#header #lang {
width: 20px;
height: 60px;
position: absolute;
top: 0;
right: 0;
}

et enfin pour ton contenu :

Code css :

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

1
2
3
4
5
 
.accordion {
position: relative;
margin: 0 auto;
}

ici le left est inutile et on rajoute le margin pour centrer.

**Candygirl** · 08/03/2011, 14h42

Bonjour,

Hum, sur ton site, tu sembles proposer des sites web de manière professionnelle ?

Si telle est ton intention, je ne peux que t'engager à revoir les bases des positionnements en css (les implications d'un position:absolute ou relative dans ton cas précis) ainsi que la notion de sémantique concernant la structure html avant de te lancer. Tu devrais reprendre tout ton code sur de solides bases...

**beegees** · 08/03/2011, 14h51

Envoyé par ornitho13

Salut,

tu as 2 problèmes dans ta page :
- les langues s'affichent après l'accordéon, tu devrais les mettre dans ton header par exemple.
- le css pour ta class "accordeon" n'est pas correcte.

Voici ce que je ferai pour les langues :

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
#header {
width: 950px;
height: 124px;
position: relative;
background: url(images/head_bg.gif) repeat-x;
border-left: 1px solid #BBBABA;
border-right: 1px solid #BBBABA;
margin: 0 auto;
}
#header #lang {
width: 20px;
height: 60px;
position: absolute;
top: 0;
right: 0;
}

et enfin pour ton contenu :

Code css :

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

1
2
3
4
5
 
.accordion {
position: relative;
margin: 0 auto;
}

ici le left est inutile et on rajoute le margin pour centrer.

Salut,

Mille fois merci pour ta réponse complète, pertinente et qui m'a aidé à résoudre le problème rencontré.

Encore merci pour l'aide

beegees

**beegees** · 08/03/2011, 14h59

Envoyé par Candygirl

Bonjour,

Hum, sur ton site, tu sembles proposer des sites web de manière professionnelle ?

Si telle est ton intention, je ne peux que t'engager à revoir les bases des positionnements en css (les implications d'un position:absolute ou relative dans ton cas précis) ainsi que la notion de sémantique concernant la structure html avant de te lancer. Tu devrais reprendre tout ton code sur de solides bases...

Bonjour,

Que me conseilles-tu de revoir ?

C'était un problème de positionnement sur mon site ?

Merci pour les remarques constructives.

**ornitho13** · 08/03/2011, 15h02

Pas de souci

, par contre je ne pourrais que vivement te conseiller de prendre en compte les remarques de Candygirl qui sont très judicieuses.

**beegees** · 08/03/2011, 15h09

Envoyé par ornitho13

Pas de souci

, par contre je ne pourrais que vivement te conseiller de prendre en compte les remarques de Candygirl qui sont très judicieuses.

Une seule petite chose.

Le numéro de téléphone en haut à droite est entre le bleu et le gris avec des grandes résolutions.

Penses-tu que je puisse résoudre cela ?

Merci pour ton efficacité.

**ornitho13** · 08/03/2011, 15h11

ouui tu peux le résoudre :

Code css :

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

1
2
3
4
5
6
7
8
 
#gsm {
   position: absolute;
   right: 0;
   top: 50px;
   font-size: 36px;
   color: white;
}

**Bisûnûrs** · 08/03/2011, 15h14

Si je peux aller de mon conseil aussi, tu devrais éviter les images de 1094x710px redimensionnées par ton code HTML en 808x554px et pesant 737Ko ..

**beegees** · 08/03/2011, 15h30

Envoyé par Bisûnûrs

Si je peux aller de mon conseil aussi, tu devrais éviter les images de 1094x710px redimensionnées par ton code HTML en 808x554px et pesant 737Ko ..

Salut Bisûnûrs,

Je vois que tu as changé l'image de ton avatar

Je vais suivre ton conseil. Merci.

Une toute dernière chose, en espérant ne pas trop exagérer.

J'ai modifié la largeur de header et content afin d'avoir la même largeur que les bandeaux dans la page "nos réalisations" .

J'ai aussi changé le footer, mais il ne bouge pas. J'ai mis ceci :

Code :

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

#footer {  width:952px;height:292px; background:url(images/footer.gif) no-repeat; border-left:1px solid #bbbaba; border-right:1px solid #bbbaba; margin:0 auto; padding:30px 20px 0 20px;  }

Merci pour votre aide précieuse et votre patience.

**ornitho13** · 08/03/2011, 15h34

En fait ton footer à changer, c'est juste ton image de fond qui n'est pas assez grande.
Pour pallier à ce problème, soit tu utilises une autre image plus grande, soit tu utilises l'image via une balise <img /> avec des dimensions, soit tu utilises la propriétés CSS3 background-size:100% 100% mais cela ne sera pas compatible sur tous les navigateurs...

**beegees** · 08/03/2011, 15h52

Envoyé par ornitho13

En fait ton footer à changer, c'est juste ton image de fond qui n'est pas assez grande.
Pour pallier à ce problème, soit tu utilises une autre image plus grande, soit tu utilises l'image via une balise <img /> avec des dimensions, soit tu utilises la propriétés CSS3 background-size:100% 100% mais cela ne sera pas compatible sur tous les navigateurs...

Je te remercie à nouveau.

Tu es très sympa et très efficace.

Bonne fin de journée.
beegees

**Candygirl** · 08/03/2011, 18h19

Quelques points que j'ai relevés:

Niveau du html:

- Tu n'utilises que des div au lieu de choisir les éléments appropriés (hx pour les titres, ul/li pour les listes,... sauf dans la partie du milieu, mais je suppose que tu as utilisé un code proposé

)

- Tu donnes des informations redondantes du alt ds le title

- Tu mets un grand nombre de classe au lieu de jouer avec les sélecteurs

Niveau css:

- Tu aurais du mettre tout ton site dans un conteneur afin de ne spécifier qu'une seule fois la largeur et le centrage

- Quel intérêt de spécifier une hauteur de 100% à tous les éléments ? le width à auto ?

- La taille de police devrait être spécifiée en em plutôt qu'en px.

- Ton montage n'est pas "solide" concernant la variation de taille de la police (moins grave depuis la fonction zoom page des navigateurs)

**beegees** · 12/03/2011, 11h10

Bonjour Candygirl,

Merci pour tes remarques constructives.

beegees

Affichage de mon site avec n'importe quelle résolution [CSS 2.1]

CSS

Discussions similaires

Partager

Partager