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 :
afin que mon site soit affiché correctement par n'importe quelle résolution ?
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; }
Voici l'adresse du site :
http://164.15.112.38/beegees_v3/realisations.php
Je vous remercie d'avance pour votre aide.
beegees
Partager