Différents affichage selon l écran ?

**cdevl32** · 13/09/2007, 11h45

Bonjour,

J ai un soucis avec ma page index.html tout vas bien chez moi sur mon écran 17 ainsi que sur mon 15, quand je le test sur un portable tout est decaler ainsi que mes menu plus rien n est centrer.

Pouvez vous m aider svp ?

source css

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
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
 
<style type="text/css">
body {
margin:0;
padding:0;
line-height: 1.5em;
}
 
ul, li {
list-style: none;
margin: 0;
}
 
#header {
background-color: #0066cc; /* Couleur de fond */
height: 90px; /* Hauteur de l'entête */
color: #fff; /* Couleur du texte */
font-weight: bold;
}
 
#bloc-contenu {
float: left;
width: 100%;
}
 
#col-centre {
margin: 0 15% 0 20%; /* Marge droite et marge gauche */
}
 
#col-gauche {
float: left;
width: 20%; /* Largeur de la colonne */
margin-left: -100%; /* Marge gauche de la colonne */
background-color: #b3cce6;
}
 
#col-droite {
float: left;
width: 15%; /* Largeur de la colonne */
margin-left: -15%; /* Marge gauche de la colonne */
background-color: #6699cc;
}
 
#footer {
background-color: #2e4c6b;
clear: left;
width: 100%;
font-weight: bold;
color: #fff;
text-align: center;
padding: 4px 0;
}
 
.col-int {
padding: .5em 1em;
}
 
p, h1, pre {
margin: 0 2em 1em 1em;
}
 
h1 {
font-size: 120%;
padding-top: 1em;
}
</style>

**Bisûnûrs** · 13/09/2007, 11h49

Un peu de code HTML correspondant ne ferait pas de mal, et/ou une capture du résultat sur tes deux écrans et/ou une disposition en ligne de ta page.

Dis-nous aussi avec quel navigateur tu as remarqué ce problème.

**cdevl32** · 13/09/2007, 12h11

Je viens juste de tester avec une resolution de 1280 par 1024 la c est ok et pour le reste plus rien ne vas 800 par 600 plus de menu à gauche ect.

source complet index.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
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
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
 
<html>
<head>
 
<style type="text/css">
body {
margin:0;
padding:0;
line-height: 1.5em;
}
 
ul, li {
list-style: none;
margin: 0;
}
 
#header {
background-color: #0066cc; /* Couleur de fond */
height: 90px; /* Hauteur de l'entête */
color: #fff; /* Couleur du texte */
font-weight: bold;
}
 
#bloc-contenu {
float: left;
width: 100%;
}
 
#col-centre {
margin: 0 15% 0 20%; /* Marge droite et marge gauche */
}
 
#col-gauche {
float: left;
width: 20%; /* Largeur de la colonne */
margin-left: -100%; /* Marge gauche de la colonne */
background-color: #b3cce6;
}
 
#col-droite {
float: left;
width: 15%; /* Largeur de la colonne */
margin-left: -15%; /* Marge gauche de la colonne */
background-color: #6699cc;
}
 
#footer {
background-color: #2e4c6b;
clear: left;
width: 100%;
font-weight: bold;
color: #fff;
text-align: center;
padding: 4px 0;
}
 
.col-int {
padding: .5em 1em;
}
 
p, h1, pre {
margin: 0 2em 1em 1em;
}
 
h1 {
font-size: 120%;
padding-top: 1em;
}
</style>
 
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
 
<div id="conteneur">
<div id="header">
  <img border="0" src="images/dynamics.gif" width="252" height="92"></div>
 
<div id="bloc-contenu">
<div id="col-centre">
<div class="col-int">
<h1><u><font face="Georgia" size="4">Un service informatique adapté aux PME</font></u></h1>
<p><font face="Georgia">Dynamics vous propose une gamme de services 
complets adaptés à vos besoins.</font></p>
<p><font face="Georgia">Située à xxxxxx, au coeur de la province de xxxxx, 
Dynamics  a pour ambition de</font></p>
<p><font face="Georgia">trouver des solutions informatiques adaptées à vos 
attentes et à votre budget.</font></p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p align="center">&nbsp;</p>
<p align="center">
<a href="menu.html"><img src="images/fleche.png" border="0" width="256" height="256" alt=""></a>
</div>
</div>
</div>
 
<div id="col-gauche">
<div class="col-int" style="width: 235; height: 614">
<h1><font color="black">Packages Site Web </font></h1>
<ul>
<li><font color="#0033FF">Pack Evolution M</font></li>
<li><font color="#0033FF">Pack Evolution L</font></li>
<li><font color="#0033FF">Pack Evolution XL</font></li>
<li><b><a href="package/evolution.html"><font color="#0033FF">Tarifs Pack Evolution</font></a></b></li>
</ul>
<br><br>
<li><b><a href="boutique/shop.html"><font color="#FF0000">Votre Boutique Online</font></a></b></li>
<br><br>
<p>&nbsp;<p>&nbsp;<p>&nbsp;<p>&nbsp;<p style="line-height: 100%; margin-top: -3">
<i><b><font face="Arial" size="2">dynamics</font></b></i><p style="line-height: 100%; margin-top: -3">
<font face="Arial" size="2">xxxxxxxxxxxxxxx</font><p style="line-height: 100%; margin-top: -3">
<font face="Arial" size="2">xxxxxxxxxxxxxx</font><p style="line-height: 100%; margin-top: -3">
<font face="Arial" size="2">xxxxxxxxx</font><p style="line-height: 100%; margin-top: -3">
<font face="Arial" size="2">032 475 236 132</font><p><p><p></p>
</div>
</div>
 
<div id="col-droite">
<div class="col-int" style="width: 176; height: 614">
<p>&nbsp;<p style="margin-bottom: 1,5em"><a href="menu.html"><font color="#FFFFFF">Nos services</font></a><p style="margin-bottom: 1,5em">
<a href="membres/connexion.php"><font color="#FFFFFF">Online Shop</font></a><p style="margin-bottom: 1,5em">
<a href="services/form.html"><font color="#FFFFFF">Contactez-nous</font></a><p><p></p>
</div>
</div>
 
<div id="footer">Dynamics</div>
</div>
</body>
</html>

**onirisme** · 13/09/2007, 13h36

Bonjour,
Il y a des problèmes au niveau de des imbrications de div...
Tu places deux lignes qui rendent ta page illisible en cas de résolutions inférieures à celle que tu utilises :

Dans ton body, j'ai retiré ces deux lignes :



La page est lisible et le menu s'adapte. Pense à réaliser une page css pour que ce soit plus lisible. Il faudra également que tu corriges ta colonne droite en y ajoutant la hauteur souhaitée :

Code :

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

1
2
3
4
5
6
7
#col-droite {
float: left;
width: 15%; /* Largeur de la colonne */
margin-left: -15%; /* Marge gauche de la colonne */
background-color: #6699cc;
height :614px; /*ICI places ta hauteur*/
}

--Idem pour la gauche
Ton imbrication n'était pas cohérente car elle était d'une part en pourcentage dans les déclaration css du header et d'autre part en px dans ton <body>.
Steve

**cdevl32** · 13/09/2007, 14h19

Merci à vous pour votre réponse.
J ai essayer mes je ne parviens toujours pas, je ne comprend pas trop le css.

Pouvez vous m aider svp ?

Merci à vous

PS : je débute avec le css

chris

**onirisme** · 13/09/2007, 15h36

Je vais faire mon possible...

Il faut voir le css comme un jeu de construction : Nous disposons de balises html que nous pouvons mettre en forme avec un fichier css.

1° étape : Faire un plan de la page (!Très important sur brouillon!)
2° étape : Créer un fichier HTML -> index.html
3° étape : Créer un fichier CSS -> moncss.css

Je ne donne ici que les bases, reportez vous aux différents tutoriels présents sur le site ou via Google.

2° La page HTML :

Code html :

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
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="en">
<head>
    <title>Titre de votre Page</title>
    <link type="text/css" rel="stylesheet" href="moncss.css"> <!--Cette liaison permet de relier la feuille de style au document html-->
</head>
<body>
    <!--Annotation pour les sections-->
 
    <!--1°DIV = Contener, il englobe les autres Div-->
    <div id="contener">
 
        <!--2°Div = Header-->
        <div id="header">
            <h1>Mon titre</h1> 
        </div><!--On ferme la div-->
 
 
        <!--Nous avons ensuite les 3 div qui composent notre corps-->
 
        <div id="col-gauche">
            <h1>Ma colonne de gauche</h1>
        </div>
        <div id="milieu">
            <h1>Le corps de mon document</h1>
        </div>
        <div id="col-droite">
            <h1>Ma colonne de droite</h1>
        </div>
 
        <!--Pour finir, le footer-->
        <div id="footer">
            <h1>Mon footer</h1>
        </div>
 
    </div><!--On ferme la div Contener-->
 
<!--NOTES : Conclusion, nous avons uniquement 6 divisions que nous allons pouvoir mettre en forme.-->
</body>
</html>

3° Le fichier CSS
Note : Tout n'est pas commenté- Voir doc si necessaire

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
 
/*****FEUILLE DE STYLE CSS*****/
 
/*PENSER A STRUCTURER LE DOCUMENT*/
 
/*Tags Généraux*/
body{
background-color : #F5F5F5;
}
 
h1{
    font-size : 16px ;
}
 
 
/*LES DIV dans l'ordre*/
 
#header {
    height :140px;
    background-color : #6FB4FC ;
}
 
#col-gauche {
    display : block ;/*On défini sous forme de block*/
    float : left ;/*Permet d'aligner les div*/
    min-height : 300px ; /*Hauteur minimum*/
    background-color : #87BF39 ;
    width : 25%;
}
 
#milieu {
    display : block ;
    float :left ;
    min-height : 300px ;
    background-color : #FFFFFF;
    width : 50% ;
}
#col-droite {
    display : block ;
    float :left ;
    min-height : 300px ;
    background-color : #e01f2e;
    width : 25% ;
}
#footer{
    height :80px ;
    background-color : #6FB4FC;
 
/*A vous de mettre en forme comme vous le souhaitez. Ceci est une architécture principale.*/
 
/****ICI on place les autres éléments****/

Bon, je suis pas trop fan des pourcentages... mais voilà le resultat :
http://onirisme.free.fr/dvp/index.html
En esperant avoir été utile...
Steve

**cdevl32** · 13/09/2007, 17h52

Bonsoir,

Vrai que comme sa avec 2 fichier c est bcp plus clair, j ai essayer tout est impecc sauf que j ai juste ma colone de droite à gauche juste en dessou, je vais essayer d arranger sa.

Merci encore pou votre aide.

chris

bonne soirée.

Différents affichage selon l écran ?

CSS

Discussions similaires

Partager

Partager