Largeur de la fenêtre d'affichage des messages

Pour vos questions au sujet de la personnalisation du script, des skins... - About customizing the script.

Modérateurs : boulmontjj, Pierre G., Malabar, Otomatic

Règles du forum
Pensez à effectuer une recherche et à consulter la FAQ, la réponse à votre question a de grandes chances d'avoir déjà été donnée ;-).
Dans votre message, n'oubliez pas de mentionner l'URL vers votre livre d'or, cela nous permet de vous aider bien plus efficacement :super:.
Cie Emporte-Pièces
Messages : 69
Inscription : Lun 23 Avr 2007, 15:42
Contact :

Largeur de la fenêtre d'affichage des messages

Messagepar Cie Emporte-Pièces » Mar 07 Nov 2017, 15:47

Bonjour,
J'utilise la fonction include pour inclure votre Livre d'Or dans mon site.

Tout marche bien sauf qu'on m'a signalé un dysfonctionnement sur les smartphones où on ne peut pas voir la partie droite de la fenêtre.

Malgré mes recherches sur le forum où j'ai trouvé la limite préconisée, à savoir 590 px, je n'ai pas trouvé la solution et je n'arrive donc pas à réduire la largeur de la fenêtre d'affichage des messages.

Ce que j'ai fait : dans le fichier alex_livre.css du skin, j'ai modifié la ligne "width" de
#alexguestbook .body_txt {
/* body width - you can update it */
width: 590px;
margin-left: auto;
margin-right: auto;


Cela reste, à priori, sans effet, y compris sur mon PC.
Y'a-t-il d'autres paramètres à modifier ?

L'adresse de mon site : http://www.emporte-pieces.net

Merci d'avance.
Jean-Paul PAGET

Malabar
Admin
Admin
Messages : 4055
Inscription : Lun 07 Août 2006, 09:46
Localisation : Lorient
Contact :

Re: Largeur de la fenêtre d'affichage des messages

Messagepar Malabar » Mer 08 Nov 2017, 00:11

Bonjour,

Il y a plusieurs soucis. En réduisant la largeur globale, le résultat est médiocre car les éléments à l'intérieur conservent leur largeur. La boite ne peut pas être plus petite que les éléments qu'elle contient.

Ensuite le livre n'est pas responsive : il faudrait que les éléments aient une taille dynamique ce qui n'est pas le cas. Et puis en responsive, on adapte le contenu à l'écran. Par exemple le menu de votre site : sur un PC vous affichez tout le menu, sur smartphone, seule une icône est visible. Un clic sur l'icône affiche les sections du menu.
Pour le livre c'est pareil. Il faudrait n'afficher que les messages sans le formulaire, et seuls le texte du message devrait être présenté. Les détails (date, localisation, coordonnées) devraient être accessibles qu'avec un clic.
Le travail sur le CSS et JS est important
Le mâle à barre (Maxime)

Otomatic
Modérateur
Modérateur
Messages : 640
Inscription : Ven 11 Août 2006, 09:33
Localisation : Paris
Contact :

Re: Largeur de la fenêtre d'affichage des messages

Messagepar Otomatic » Jeu 09 Nov 2017, 10:44

Bonjour,

Je ne sais « plus » ce que j'ai fait exactement sur mon site, mais il semblerait bien que « mon » Livre d'Or soit “responsible”.
Tout du moins, c'est ce que j'ai constaté hier, avec mon Smartphone sous Android et Firefox.
http://aviatechno.net/livre_or/livre_or.php
Est-ce un truc comme cela que vous voudriez ?
Ce n'est pas par ce que l'erreur se propage qu'elle devient vérité. Gandhi

Cie Emporte-Pièces
Messages : 69
Inscription : Lun 23 Avr 2007, 15:42
Contact :

Re: Largeur de la fenêtre d'affichage des messages

Messagepar Cie Emporte-Pièces » Jeu 09 Nov 2017, 12:30

Bonjour,
OUI !!!

Quand je consulte votre livre d'or sur mon smartphone (avec Google Chrome), que ce soit en mode "portrait" ou "paysage", je peux glisser vers la droite de façon à lire tout le message. Avec mon livre d'or ( http://www.emporte-pieces.net/livre-dor.html ), avec Google Chrome, je ne peux pas me déplacer vers la droite.

J'utilise la version 5.0.4 du livre d'or, le skin AguestNew et une include dans mon site construit avec TOWeb.

Si vous arrivez à vous souvenir de ce que vous avez fait, je suis bien évidemment, intéressé.

Jean-Paul PAGET

Malabar
Admin
Admin
Messages : 4055
Inscription : Lun 07 Août 2006, 09:46
Localisation : Lorient
Contact :

Re: Largeur de la fenêtre d'affichage des messages

Messagepar Malabar » Jeu 09 Nov 2017, 22:12

Ah si ce n'est que ça alors c'est votre cadre qu'il faut revoir.

Code : Tout sélectionner

<object type="text/html" data="http://test.emporte-pieces.net/Livredor_5.0.4_PHP7.php" width="820" height="600">
</object>

Vous supprimez la largeur de 820 et ça va de suite mieux.
Ce n'est pas ce que j'appelle du responsive (voir https://www.alsacreations.com/article/l ... esign.html) mais si c'est lisible sur smartphone, tant mieux ;) .
Le mâle à barre (Maxime)

Cie Emporte-Pièces
Messages : 69
Inscription : Lun 23 Avr 2007, 15:42
Contact :

Re: Largeur de la fenêtre d'affichage des messages

Messagepar Cie Emporte-Pièces » Ven 10 Nov 2017, 09:11

Bonjour,
Merci pour le conseil que je me suis empressé de mettre en place.

Mais là, je me retrouve, sur mon PC, avec une fenêtre beaucoup trop étroite : voir fichier pdf joint.

Sur mon smartphone en mode "portrait", c'est bon mais en mode "Paysage", j'ai le même problème que sur mon PC, fenêtre trop étroite, avec, en plus, une grosse difficulté à manipuler l'ascenseur horizontal.

Merci d'avance pour vos conseils.
Jean-Paul PAGET
Pièces jointes
LO_Smartphone.pdf
(73.48 Kio) Téléchargé 70 fois

Cie Emporte-Pièces
Messages : 69
Inscription : Lun 23 Avr 2007, 15:42
Contact :

Re: Largeur de la fenêtre d'affichage des messages

Messagepar Cie Emporte-Pièces » Ven 10 Nov 2017, 09:27

re-bonjour,

Un petit complément et une petite réflexion en complément.

1- Je suis revenu à la version précédente, c'est-à-dire que vous n'allez pas pouvoir constater le problème de la fenêtre trop étroite.

2- J'irais bien "bricoler" sur les "Three1", 2 et 3 du skin qui indiquent des largeurs en %.

Mais c'est un peu délicat et je crains de casser des choses. Mais n'y aurait-il pas quelque chose à faire de ce côté-là ?

Quand au fait que le résultat ne soit pas "responsive", c'est pas grave. Comme vous dites, si la consultation est possible, c'est bien.

Otomatic
Modérateur
Modérateur
Messages : 640
Inscription : Ven 11 Août 2006, 09:33
Localisation : Paris
Contact :

Re: Largeur de la fenêtre d'affichage des messages

Messagepar Otomatic » Ven 10 Nov 2017, 10:43

Bonjour,


Voilà quelques informations sur les css que j'utilise pour le livre d'or en précisant qu'il s'agit de 'double Aguestnew' modifié.
Nota : HTML 4.01. En passant en HTML 5, il n'y a pas grand chose qui change.

D'abord le cadre de (presque) toutes les pages de mon site
(Je n'enlève aucune information)

Code : Tout sélectionner

/* Partie centrale d'une page */
div#cadre_page {
   margin:0 auto;
   padding:3px;
   border-right:1px solid #cc9966;
   border-left:1px solid #cc9966;
   border-bottom:1px solid #cc9966;
   width:750px;
   text-align:center;
   position:relative;
   overflow:hidden;
   }


Ensuite, les informations sur le Livre d'Or dont le cadre est à l'intérieur du cadre de page ci-dessus.

Code : Tout sélectionner

#alexguestbook {
 /* background color - you can update it */
  /* font-size 0.96em au lieu de 0.73em */
 background-color: #F1EAD8;
 font-family: Verdana, Helvetica, sans-serif;
 color: #000000;font-size:0.96em;
}

#alexguestbook .body_txt {
 /* body width - you can update it */
 width: 90%;
 margin-left: auto;
 margin-right: auto;
}

Les « header » PHP envoyés

Code : Tout sélectionner

session_cache_limiter( FALSE );
header("content-type:text/html; charset=utf-8");
// Send no-cache headers
header('Expires: Thu, 21 Jul 1977 07:30:00 GMT'); // When yours truly first set eyes on this world! :)
header('Last-Modified: '.gmdate('D, d M Y H:i:s').' GMT');
header('Cache-Control: post-check=0, pre-check=0', false);
header('Pragma: no-cache'); // For HTTP/1.0 compatibility
// Security
header('X-Frame-Options: SAMEORIGIN');
header('X-XSS-Protection: 1; mode=block');
header('X-Content-Type-Options: nosniff');

ob_start("ob_gzhandler");
session_start();


Et puis les directives HTML

Code : Tout sélectionner

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=780, initial-scale=1.0">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Language" content="fr-FR">
<title>Livre d'Or d'Aviatechno</title>
<meta name="generator" content="A la main avec UltraEdit">
<meta name="author" content="Dominique Ottello - 2003-2017">
<meta name="date-creation-yyyy-mm-dd" content="2003-11-15">
<meta name="date-revision-yyyy-mm-dd" content="2017-10-06">
<meta name="description" content="Centre d'Instruction de Vilgénis, Constellation, La Crevette Air France, Les Unités, Métaux et Alliages Aéronautiques, Bibliothèque Aéronautique, Transmissions à distance">
<link rel='StyleSheet' type='text/css' href='../css/general.css'>
<link rel='StyleSheet' type='text/css' href='../css/menu_h.css'>
<link rel='StyleSheet' type='text/css' href='../livre_or/templates/skins/double_Otomatic/alex_livre.css'>
<link rel='shortcut icon' type='image/x-icon' href='/favicon/favicon.ico'>
<link rel='shortcut icon' type='image/vnd.microsoft.icon' href='/favicon/favicon.ico' >
<link rel='icon' type='image/png' href='/favicon/favicon-32x32.png'>
<link rel='icon' type='image/png' href='/favicon/android-chrome-192x192.png'>
<link rel='icon' type='image/png' href='/favicon/favicon-96x96.png'>
<link rel='icon' type='image/png' href='/favicon/favicon-16x16.png'>
<link rel='apple-touch-icon' type='image/png' href='/favicon/apple-touch-icon-57x57.png'>
<link rel='apple-touch-icon' type='image/png' href='/favicon/apple-touch-icon-60x60.png'>
<link rel='apple-touch-icon' type='image/png' href='/favicon/apple-touch-icon-72x72.png'>
<link rel='apple-touch-icon' type='image/png' href='/favicon/apple-touch-icon-76x76.png'>
<link rel='apple-touch-icon' type='image/png' href='/favicon/apple-touch-icon-114x114.png'>
<link rel='apple-touch-icon' type='image/png' href='/favicon/apple-touch-icon-120x120.png'>
<link rel='apple-touch-icon' type='image/png' href='/favicon/apple-touch-icon-144x144.png'>
<link rel='apple-touch-icon' type='image/png' href='/favicon/apple-touch-icon-152x152.png'>
<link rel='apple-touch-icon' type='image/png' href='/favicon/apple-touch-icon-180x180.png'>
<link rel='manifest' href='/favicon/manifest.json'>
<meta name='msapplication-TileColor' content='#da532c'>
<meta name='msapplication-TileImage' content='/favicon/mstile-144x144.png'>
<meta name='msapplication-config' content='/favicon/browserconfig.xml'>
<meta name='theme-color' content='#f1ead8'>
</head>
<body id='debut_'>
....
<div id='cadre_page'>
...
<div id="alexguestbook">
<div class="d_title">Livre d'Or Aviatechno</div>


Je pense que <meta name="viewport" content="width=780, initial-scale=1.0"> a une certaine importance.
Ce n'est pas par ce que l'erreur se propage qu'elle devient vérité. Gandhi

Otomatic
Modérateur
Modérateur
Messages : 640
Inscription : Ven 11 Août 2006, 09:33
Localisation : Paris
Contact :

Re: Largeur de la fenêtre d'affichage des messages

Messagepar Otomatic » Ven 10 Nov 2017, 18:19

Bonjour,
Un truc que j'ai oublié de dire.
Dans le fichier css systématiquement chargé pour toutes les pages, il y a :

Code : Tout sélectionner

@media screen and (max-width: 758px) {
   width:100%;
}
Ce n'est pas par ce que l'erreur se propage qu'elle devient vérité. Gandhi

Cie Emporte-Pièces
Messages : 69
Inscription : Lun 23 Avr 2007, 15:42
Contact :

Re: Largeur de la fenêtre d'affichage des messages

Messagepar Cie Emporte-Pièces » Sam 11 Nov 2017, 10:01

Bonjour,
Tout d'abord, merci pour le temps passé et les directives données.
mais c'est un peu trop compliqué pour moi et surtout, du fait qu'on n'utilise pas le même skin, je ne retrouve pas où se trouvent les séquences à modifier et je crains surtout de tout "casser" ...
Ce que je ne retrouve pas :

D'abord le cadre de (presque) toutes les pages de mon site
(Je n'enlève aucune information)


Les « header » PHP envoyés


De plus, je ne sais pas où mettre

@media screen and (max-width: 758px) {
width:100%;
}


Autrement dit, je pense que je vais laisser en l'état pour le moment en précisant que le "Livre d'Or" n'est pas opérationnel sur les portables.
Et je m'y remettrai un de ces jours ...

A bientôt donc.
jean-Paul PAGET

Otomatic
Modérateur
Modérateur
Messages : 640
Inscription : Ven 11 Août 2006, 09:33
Localisation : Paris
Contact :

Re: Largeur de la fenêtre d'affichage des messages

Messagepar Otomatic » Sam 11 Nov 2017, 18:06

Bonjour,

Votre livre d'or utilise les « frames » et XHTML. Pourquoi, alors toutes les autres pages sont html5 ?
De plus, il y a de nombreuses erreurs HTML <li> dans <li> ou <ul> dans <ul>, <table> sans </table>, </tr> sans <tr>, </td> sans <td>.
Avant d'envisager une page « responsive », il faut déjà avoir un code sans erreur.
Ce n'est pas par ce que l'erreur se propage qu'elle devient vérité. Gandhi

Cie Emporte-Pièces
Messages : 69
Inscription : Lun 23 Avr 2007, 15:42
Contact :

Re: Largeur de la fenêtre d'affichage des messages

Messagepar Cie Emporte-Pièces » Dim 12 Nov 2017, 10:16

Bonjour,
Ok, c'est noté.
Je me lancerai prochainement dans une opération "nettoyage".

Merci pour vos conseils.


Revenir vers « Personnalisation - tuning »

Qui est en ligne ?

Utilisateurs parcourant ce forum : Bing [Bot] et 5 invités