Page web pour toutes résolutions d'écrans.
crazybabe
Messages postés
469
Statut
Membre
-
crazybabe Messages postés 469 Statut Membre -
crazybabe Messages postés 469 Statut Membre -
Bonsoir à tous !
Je travaille avec Dreamwearver.
Avant j'avais un écran PC réglé à 1024 x 728 de résolution.
J'ai acheté une nouvelle machine, qui est, elle, est réglée à 1600x900 de résolution.
Hors, lorsque j'ouvre ma page web sur le net (crée à 1024x728), elle ne remplit, effectivement, pas toute la page !
Je me demandais par quel réglage, script ou autre, mes pages webs pourraient s'afficher, automatiquement, en fonction de la résolution d'écran de chacun.
Suis- je assez compréhensible ?
Je vous remercie tous par avance ;) !
Crazybabe : "Or the passion, inexhaustible source...".
Je travaille avec Dreamwearver.
Avant j'avais un écran PC réglé à 1024 x 728 de résolution.
J'ai acheté une nouvelle machine, qui est, elle, est réglée à 1600x900 de résolution.
Hors, lorsque j'ouvre ma page web sur le net (crée à 1024x728), elle ne remplit, effectivement, pas toute la page !
Je me demandais par quel réglage, script ou autre, mes pages webs pourraient s'afficher, automatiquement, en fonction de la résolution d'écran de chacun.
Suis- je assez compréhensible ?
Je vous remercie tous par avance ;) !
Crazybabe : "Or the passion, inexhaustible source...".
A voir également:
- Page web pour toutes résolutions d'écrans.
- Web office - Guide
- Supprimer page word - Guide
- Capture écran page web entière - Guide
- Comment traduire une page web - Guide
- Création page web - Guide
9 réponses
pour modifier les valeurs de px %, il te faut accéder à ton code CSS, celui ci se situe sur dans la page, soit dans un fichier à part
par exemple, si tu as un truc de ce genre :
.infoBar ul.inv {
margin-left:777px;
cursor:help;
width:170px;
overflow:hidden;
}
tu peux remplacer par :
.infoBar ul.inv {
margin-left:50%;
cursor:help;
width:20%;
overflow:hidden;
}
par exemple, si tu as un truc de ce genre :
.infoBar ul.inv {
margin-left:777px;
cursor:help;
width:170px;
overflow:hidden;
}
tu peux remplacer par :
.infoBar ul.inv {
margin-left:50%;
cursor:help;
width:20%;
overflow:hidden;
}
Soit tu fais une feuille de style pour chaque résolution (très chiant).
Soit tu fais un site extensible.
Soit tu fais un site extensible.
Bonsoir Templier Nocturne, bonsoir Aktayen !!
Merci beaucoup de vous êtres arrêtés sur ma question !
Alors Templier Nocture, ok pour transformer les valeurs en px par des valeurs en %, mais par où je peux accéder à ce changement et comment je peux changer ces valeurs ? Dans le code de mes pages ?
Aktayen : soyons franche, je n'ai jamais fait de feuille de style, je pense savoir à quoi ça sert, et quels réglages cela permet de répéter sur chacune de ses pages... Et qu'appelles-tu chaque résolution ? Car avec tous les nouveau écrans qui sont sur le marché... J'ai pour exemple, sur le mien comme propositions de résolution pour mon écran:
- 800 x 600
- 1024 x 768
- 1152 x 864
- 1280 x 600
- 1280 x 720
- 1280 x 768
- 1280 x 800
- 1360 x 768
- 1366 x 768
- 1440 x 900
- 1600 x 900
Tu peux m'en dire davantage !?
Et qu'appelles-tu un site extensible ? Avec quoi puis-je le faire (logiciel) ; est-ce qu'avec Dream, c'est possible ? De quoi ai-je besoin pour pouvoir le faire ?
Merci à vous deux !
J'attends vos précieuses réponses...
Car la richesse est bien là où se propage le partage !!
Crazybabe : "Or the passion, inexhaustible source...".
--
Merci beaucoup de vous êtres arrêtés sur ma question !
Alors Templier Nocture, ok pour transformer les valeurs en px par des valeurs en %, mais par où je peux accéder à ce changement et comment je peux changer ces valeurs ? Dans le code de mes pages ?
Aktayen : soyons franche, je n'ai jamais fait de feuille de style, je pense savoir à quoi ça sert, et quels réglages cela permet de répéter sur chacune de ses pages... Et qu'appelles-tu chaque résolution ? Car avec tous les nouveau écrans qui sont sur le marché... J'ai pour exemple, sur le mien comme propositions de résolution pour mon écran:
- 800 x 600
- 1024 x 768
- 1152 x 864
- 1280 x 600
- 1280 x 720
- 1280 x 768
- 1280 x 800
- 1360 x 768
- 1366 x 768
- 1440 x 900
- 1600 x 900
Tu peux m'en dire davantage !?
Et qu'appelles-tu un site extensible ? Avec quoi puis-je le faire (logiciel) ; est-ce qu'avec Dream, c'est possible ? De quoi ai-je besoin pour pouvoir le faire ?
Merci à vous deux !
J'attends vos précieuses réponses...
Car la richesse est bien là où se propage le partage !!
Crazybabe : "Or the passion, inexhaustible source...".
--
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
Bonsoir Templier Nocturne !
Je te remercie pour ton aide !
Il faut que j'aille voir ça de plus près ; trouver exactement ce que tu m'indiques là pour essayer !
Je reviendrais te dire ce qu'il en est.
Merci encore, à plus tard.
Crazybabe : "Or the passion, inexhaustible source...".
Je te remercie pour ton aide !
Il faut que j'aille voir ça de plus près ; trouver exactement ce que tu m'indiques là pour essayer !
Je reviendrais te dire ce qu'il en est.
Merci encore, à plus tard.
Crazybabe : "Or the passion, inexhaustible source...".
Salut Templier Nocturne !
OK, j'ai commencé à me pencher sur ce qu'est cette fameuse feuille de style ! J'ai également compris qu'on peut faire une feuille de Style CSS seule qu'on insère, au choix, dans chaque page désirée ou recréer le code Style CSS, directement dans nos pages et le changer en fonction de ce qu'on désire. J'ai repéré la fenêtre où est géré le Style CSS dans Dream, je trouve que c'est vraiment bien fait d'ailleurs !
Il me reste, par contre, encore beaucoup à apprendre. Comme les correspondances du code (ex : body,td,th ; voir ex ci-dessous) et les valeurs qui leur sont attribuées !!!
Que signifie ?:
body,td,th {
color: #FFFFFF;
}
Je ne sais ni à quoi correspond td ni th...
Donc hormis, le choix de la couleur pour body, je ne sais pas à quoi d'autre sera attribué la couleur !!
Bon, je reviens au sujet du problème :
Tu cites :
par exemple, si tu as un truc de ce genre :
.infoBar ul.inv {
margin-left:777px;
cursor:help;
width:170px;
overflow:hidden;
}
tu peux remplacer par :
.infoBar ul.inv {
margin-left:50%;
cursor:help;
width:20%;
overflow:hidden;
}
Alors non, je n'ai pas trouvé ce paragraphe dans le code Style CSS de ma page !!
Dois-je l'insérer ? D'ailleurs, je ne comprends pas comment tu as fait pour passer de 777 px à 50% et 170 px à 20% !? Un calcul spécifique ?
Afin que tu puisses m'aider davantage, je vais te coller le code CSS de ma page.
Le voici :
<style type="text/css">
<!--
body,td,th {
font-family: Book Antiqua;
font-size: 14px;
color: #FFFFFF;
}
body {
background-image: url();
background-repeat: no-repeat;
margin-left: 0px;
margin-top: 0px;
background-color: #000000;
}
#Image {
position:absolute;
left:257px;
top:97px;
width:489px;
height:432px;
z-index:1;
overflow: visible;
visibility: visible;
}
#Layer1 {
position:absolute;
left:312px;
top:545px;
width:370px;
height:327px;
z-index:1;
}
#Layer2 {
position:absolute;
left:0px;
top:477px;
width:1600px;
height:21px;
z-index:1;
}
.Style1 {font-size: 24px}
.Style2 {
font-size: 18px;
font-style: italic;
font-weight: bold;
}
#Layer3 {
position:absolute;
left:1334px;
top:472px;
width:2px;
height:4px;
z-index:2;
}
#Layer4 {
position:absolute;
left:1586px;
top:4px;
width:14px;
height:768px;
z-index:3;
background-image: url(images/barre-de-defilement.gif);
}
#Layer5 {
position:absolute;
left:793px;
top:525px;
width:67px;
height:41px;
z-index:3;
}
-->
</style>
Voilà, un bien grand message ; j'espère avoir pu te donner le maximum d'infos, afin que tu puisses, au mieux, cibler ma question et mes incompréhensions.
Je te remercie terriblement à l'avance :) !!!
Crazybabe : "Or the passion, inexhaustible source..."
OK, j'ai commencé à me pencher sur ce qu'est cette fameuse feuille de style ! J'ai également compris qu'on peut faire une feuille de Style CSS seule qu'on insère, au choix, dans chaque page désirée ou recréer le code Style CSS, directement dans nos pages et le changer en fonction de ce qu'on désire. J'ai repéré la fenêtre où est géré le Style CSS dans Dream, je trouve que c'est vraiment bien fait d'ailleurs !
Il me reste, par contre, encore beaucoup à apprendre. Comme les correspondances du code (ex : body,td,th ; voir ex ci-dessous) et les valeurs qui leur sont attribuées !!!
Que signifie ?:
body,td,th {
color: #FFFFFF;
}
Je ne sais ni à quoi correspond td ni th...
Donc hormis, le choix de la couleur pour body, je ne sais pas à quoi d'autre sera attribué la couleur !!
Bon, je reviens au sujet du problème :
Tu cites :
par exemple, si tu as un truc de ce genre :
.infoBar ul.inv {
margin-left:777px;
cursor:help;
width:170px;
overflow:hidden;
}
tu peux remplacer par :
.infoBar ul.inv {
margin-left:50%;
cursor:help;
width:20%;
overflow:hidden;
}
Alors non, je n'ai pas trouvé ce paragraphe dans le code Style CSS de ma page !!
Dois-je l'insérer ? D'ailleurs, je ne comprends pas comment tu as fait pour passer de 777 px à 50% et 170 px à 20% !? Un calcul spécifique ?
Afin que tu puisses m'aider davantage, je vais te coller le code CSS de ma page.
Le voici :
<style type="text/css">
<!--
body,td,th {
font-family: Book Antiqua;
font-size: 14px;
color: #FFFFFF;
}
body {
background-image: url();
background-repeat: no-repeat;
margin-left: 0px;
margin-top: 0px;
background-color: #000000;
}
#Image {
position:absolute;
left:257px;
top:97px;
width:489px;
height:432px;
z-index:1;
overflow: visible;
visibility: visible;
}
#Layer1 {
position:absolute;
left:312px;
top:545px;
width:370px;
height:327px;
z-index:1;
}
#Layer2 {
position:absolute;
left:0px;
top:477px;
width:1600px;
height:21px;
z-index:1;
}
.Style1 {font-size: 24px}
.Style2 {
font-size: 18px;
font-style: italic;
font-weight: bold;
}
#Layer3 {
position:absolute;
left:1334px;
top:472px;
width:2px;
height:4px;
z-index:2;
}
#Layer4 {
position:absolute;
left:1586px;
top:4px;
width:14px;
height:768px;
z-index:3;
background-image: url(images/barre-de-defilement.gif);
}
#Layer5 {
position:absolute;
left:793px;
top:525px;
width:67px;
height:41px;
z-index:3;
}
-->
</style>
Voilà, un bien grand message ; j'espère avoir pu te donner le maximum d'infos, afin que tu puisses, au mieux, cibler ma question et mes incompréhensions.
Je te remercie terriblement à l'avance :) !!!
Crazybabe : "Or the passion, inexhaustible source..."
Bonsoir (re - re - re ) !!!
J'ai réussit à trouver la solution à mon problème, c'est génial !
Je n'ai plus qu'à bosser...
Je repasse demain pour poster ma solution, et marquer le message comme résolu !
Merci à vous deux, vraiment.
Crazybabe : "Or the passion, inexhaustible source...".
J'ai réussit à trouver la solution à mon problème, c'est génial !
Je n'ai plus qu'à bosser...
Je repasse demain pour poster ma solution, et marquer le message comme résolu !
Merci à vous deux, vraiment.
Crazybabe : "Or the passion, inexhaustible source...".
Salut Templier Nocturne !
Oh si si :| tu peux, sans problème :) !
Mais en fait, depuis il a donc changé !!
J'ai donc réussit à garder la même page selon différentes résolutions ; mais maintenant, c'est mon texte introduit avec Dream qui me prend la tête !!
Je ne comprends pas pourquoi mon calque (Layer) 2, ne s'affiche pas normalement sur le côté Création de Dream, mais correctement sur la page web. Mais aussi, pourquoi lorsque je trace un calque, sa position, sa visibilité ne s'affiche pas toujours correctement, pareillement sur le côté Création de Dream.
Comprends pas !!!
Tu peux jeter un oeil à mon code, stp !?
Le voici :
<html>
<head>
<title>L'Art du complot Spirituel</title>
<style type="text/css">
<!--
html, body {
margin:0;
padding:0;
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
height: 100%;
width: 100%;
position:absolute;
font-family: Georgia;
font-size: 36px;
color: #FFFFFF;
}
#arriere{
/* l'image occupe toute la place du body */
width : 100%;
height: 100%;
background-attachment:fixed;
position:fixed;
z-index:-2000;
}
#Layer1 {
position:absolute;
left:auto;
top:auto;
width:100%;
height:100%;
z-index:1;
}
#Layer2 {
position:absolute;
left:364px;
top:15px;
width:835px;
height:94px;
z-index:2;
}
-->
</style>
</head>
<div id="Layer1"><img src="images/index2.jpg" alt="" id="arriere"/>
</div>
<div class="Style2" id="Layer2"><div align="center">
<blockquote>
<p>L'Art du Complot Spirituel</p>
</blockquote>
</div>
</div>
</body>
</html>
-------------------------------------
C'est clair que je change un peu de sujet, mais comme je l'avais dit, je posterai la solution trouvée à mon problème, mais dans un post ici même, uniquement fait pour ça.
Si tu as quelques explications pour moi, je suis preneuse.
Je te remercie Templier Nocturne d'être présent et de volontairement donner un peu de toi.
Crazybabe : "Or the passion, inexhaustible source...".
Oh si si :| tu peux, sans problème :) !
Mais en fait, depuis il a donc changé !!
J'ai donc réussit à garder la même page selon différentes résolutions ; mais maintenant, c'est mon texte introduit avec Dream qui me prend la tête !!
Je ne comprends pas pourquoi mon calque (Layer) 2, ne s'affiche pas normalement sur le côté Création de Dream, mais correctement sur la page web. Mais aussi, pourquoi lorsque je trace un calque, sa position, sa visibilité ne s'affiche pas toujours correctement, pareillement sur le côté Création de Dream.
Comprends pas !!!
Tu peux jeter un oeil à mon code, stp !?
Le voici :
<html>
<head>
<title>L'Art du complot Spirituel</title>
<style type="text/css">
<!--
html, body {
margin:0;
padding:0;
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
height: 100%;
width: 100%;
position:absolute;
font-family: Georgia;
font-size: 36px;
color: #FFFFFF;
}
#arriere{
/* l'image occupe toute la place du body */
width : 100%;
height: 100%;
background-attachment:fixed;
position:fixed;
z-index:-2000;
}
#Layer1 {
position:absolute;
left:auto;
top:auto;
width:100%;
height:100%;
z-index:1;
}
#Layer2 {
position:absolute;
left:364px;
top:15px;
width:835px;
height:94px;
z-index:2;
}
-->
</style>
</head>
<div id="Layer1"><img src="images/index2.jpg" alt="" id="arriere"/>
</div>
<div class="Style2" id="Layer2"><div align="center">
<blockquote>
<p>L'Art du Complot Spirituel</p>
</blockquote>
</div>
</div>
</body>
</html>
-------------------------------------
C'est clair que je change un peu de sujet, mais comme je l'avais dit, je posterai la solution trouvée à mon problème, mais dans un post ici même, uniquement fait pour ça.
Si tu as quelques explications pour moi, je suis preneuse.
Je te remercie Templier Nocturne d'être présent et de volontairement donner un peu de toi.
Crazybabe : "Or the passion, inexhaustible source...".
