Page web pour toutes résolutions d'écrans.

[Fermé]
Signaler
Messages postés
464
Date d'inscription
mercredi 30 août 2006
Statut
Membre
Dernière intervention
15 septembre 2020
-
Messages postés
464
Date d'inscription
mercredi 30 août 2006
Statut
Membre
Dernière intervention
15 septembre 2020
-
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...".

9 réponses

Messages postés
7716
Date d'inscription
jeudi 22 janvier 2009
Statut
Membre
Dernière intervention
21 mai 2016
1 094
modifie le CSS pour transformer les valeurs en px par des valeurs en %
2
Merci

Quelques mots de remerciements seront grandement appréciés. Ajouter un commentaire

CCM 41713 internautes nous ont dit merci ce mois-ci

Messages postés
7716
Date d'inscription
jeudi 22 janvier 2009
Statut
Membre
Dernière intervention
21 mai 2016
1 094
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;
}
2
Merci

Quelques mots de remerciements seront grandement appréciés. Ajouter un commentaire

CCM 41713 internautes nous ont dit merci ce mois-ci

Messages postés
189
Date d'inscription
dimanche 31 mai 2009
Statut
Membre
Dernière intervention
17 décembre 2015
16
Soit tu fais une feuille de style pour chaque résolution (très chiant).
Soit tu fais un site extensible.
Messages postés
464
Date d'inscription
mercredi 30 août 2006
Statut
Membre
Dernière intervention
15 septembre 2020
165
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...".
--
Messages postés
464
Date d'inscription
mercredi 30 août 2006
Statut
Membre
Dernière intervention
15 septembre 2020
165
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...".
Messages postés
464
Date d'inscription
mercredi 30 août 2006
Statut
Membre
Dernière intervention
15 septembre 2020
165
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..."
Messages postés
464
Date d'inscription
mercredi 30 août 2006
Statut
Membre
Dernière intervention
15 septembre 2020
165
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...".
Messages postés
7716
Date d'inscription
jeudi 22 janvier 2009
Statut
Membre
Dernière intervention
21 mai 2016
1 094
bon ben je me penche pas sur ton CSS alors ;)

si besoin fait signe ;)
Messages postés
464
Date d'inscription
mercredi 30 août 2006
Statut
Membre
Dernière intervention
15 septembre 2020
165
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...".