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

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

Citation:

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

Citation:

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

Citation:

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

Citation:

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

Citation:

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

08/03/2011, 14h42	#3
Candygirl Modératrice Inscription : juillet 2006 Messages : 1 529 Détails du profil Informations personnelles : Sexe : Âge : 40 Localisation : Suisse Informations forums : Inscription : juillet 2006 Messages : 1 529 Points : 1 869 Points : 1 869	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... __________________ Les bons réflexes: avant de poser une question: règles \| faq \| tutoriels \| recherche clarté, politesse, vocabulaire et orthographe soignés = efficacité remercier ceux qui ont pris le temps d'aider et si c'est le cas
	10

08/03/2011, 18h19	#13
Candygirl Modératrice Inscription : juillet 2006 Messages : 1 529 Détails du profil Informations personnelles : Sexe : Âge : 40 Localisation : Suisse Informations forums : Inscription : juillet 2006 Messages : 1 529 Points : 1 869 Points : 1 869	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) __________________ Les bons réflexes: avant de poser une question: règles \| faq \| tutoriels \| recherche clarté, politesse, vocabulaire et orthographe soignés = efficacité remercier ceux qui ont pris le temps d'aider et si c'est le cas
	00

12/03/2011, 11h10	#14
beegees Membre Expert David Vincent (l'homme qui a vu les extra-terrestres) Développeur Web Inscription : mars 2004 Messages : 3 239 Détails du profil Informations personnelles : Nom : David Vincent (l'homme qui a vu les extra-terrestres) Âge : 37 Localisation : Belgique Informations professionnelles : Activité : Développeur Web Secteur : Enseignement Informations forums : Inscription : mars 2004 Messages : 3 239 Points : 1 046 Points : 1 046	Bonjour Candygirl, Merci pour tes remarques constructives. beegees __________________
	00

08/03/2011, 15h02	#6
ornitho13 Rédacteur/Modérateur Jérome Debray Responsable de projet Inscription : mai 2009 Messages : 627 Détails du profil Informations personnelles : Nom : Jérome Debray Âge : 32 Localisation : France Informations professionnelles : Activité : Responsable de projet Secteur : High Tech - Multimédia et Internet Informations forums : Inscription : mai 2009 Messages : 627 Points : 3 064 Points : 3 064	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.
	00

08/03/2011, 15h14	#9
Bisûnûrs Modérateur Josselin Développeur Web Inscription : janvier 2004 Messages : 9 050 Détails du profil Informations personnelles : Nom : Josselin Âge : 29 Localisation : France, Rhône (Rhône Alpes) Informations professionnelles : Activité : Développeur Web Informations forums : Inscription : janvier 2004 Messages : 9 050 Points : 12 181 Points : 12 181	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 ..
	10

08/03/2011, 15h34	#11
ornitho13 Rédacteur/Modérateur Jérome Debray Responsable de projet Inscription : mai 2009 Messages : 627 Détails du profil Informations personnelles : Nom : Jérome Debray Âge : 32 Localisation : France Informations professionnelles : Activité : Responsable de projet Secteur : High Tech - Multimédia et Internet Informations forums : Inscription : mai 2009 Messages : 627 Points : 3 064 Points : 3 064	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...
	10

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email