Forum ZitePLUS

La communauté des utilisateurs du CMS ZitePLUS

Vous n'êtes pas identifié(e).

#1 07/08/2020 18:46:48

lnain
Membre
Inscription : 27/06/2009
Messages : 78
Site Web

ajuster largeur

Bonjour,
je réalise un site sous ziteplus ( http://jch.pierson.free.fr/ ) et j'ai une question d'amateur que je suis :
je voudrais savoir comment faire pour que le site s'adapte à la largeur des écrans car pour le moment, l'affichage est toujours étroit et sur les ordis, ce n'est pas top.
Merci


ziteplus 0.9.6
jch.pierson.free.fr

Hors ligne

#2 10/08/2020 15:22:26

Stefpei
Membre
Lieu : Nantes
Inscription : 12/06/2009
Messages : 348
Site Web

Re : ajuster largeur

Ton site n'est pas "responsive" (adaptatif).
Il faut prévoir un fichier CSS spécifique aux diverses autres tailles d'écrans :
ce CSS supprime toutes notions de tailles écrites en dur, en pixels (celles des #main, bot, side, mid, etc)...
Il ne doit plus rester de tailles en dur, seulement en pourcentage... ni de float...
Fait une recherche sur "CSS RESPONSIVE"


Stéphane
Webdesign AvantageWeb

En ligne

#3 10/08/2020 22:12:45

lnain
Membre
Inscription : 27/06/2009
Messages : 78
Site Web

Re : ajuster largeur

Bonjour et merci,
le recherche que je dois faire est-elle à faire sur le web en général ou sur ce forum ?
Désolé si ma question te paraît ridicule mais je suis juste un utilisateur occasionnel et tout ça me passe largement au dessus de la tête.


ziteplus 0.9.6
jch.pierson.free.fr

Hors ligne

#4 10/08/2020 23:23:38

Stefpei
Membre
Lieu : Nantes
Inscription : 12/06/2009
Messages : 348
Site Web

Re : ajuster largeur

Non pas sur ce Forum mais sur le web.
Un site "responsive" est un minimum dans les standards du web, depuis l'apparition des smartphones et tablettes...

Tu dois rajouter à la fin de ton fichier "maths.css", ces styles spécifiques pour les petits écrans,
Dans ton cas ce sera ce genre d'indications :
(ça dit que pour des écrans plus petits que 900 pixels ces règles sont prises en compte, remplaçant les précédentes).
C'est vite fait, de tête, mais c'est une base pour commencer à comprendre...


@media screen and (max-width: 900px) {
img {max-width:100%;height:auto}
#page, #top, #mid, #side, #main, #bot {float: none; width: auto; height: auto;}
#main h1 { position: relative; left: auto; top : auto; width: auto;}
}

Dernière modification par Stefpei (10/08/2020 23:26:16)


Stéphane
Webdesign AvantageWeb

En ligne

#5 01/12/2020 18:36:16

pydou
Membre
Lieu : Caluire
Inscription : 01/04/2010
Messages : 109
Site Web

Re : ajuster largeur

Bonjour,

D'une façon générale, pour ajuster la largeur des objets (images, table, td, ...) , il est préférable d'utiliser le pourcentage plutôt que la largeur en pixels.

J'ai réalisé des sites responsive avec ZITE+ qui reste mon CMS préféré même s'il semble avoir de moins en moins d'adeptes.

Pour cela j'ai utilisé des macros Javascript de flextable que j'ai modifiées pour répondre à mes besoins.

Les fonctions permettent de :

Transformer un tableau de plusieurs colonnes en un tableau d'une seule colonne s'il ne tient plus en largeur : par exemple :  https://bridge.ducas.fr  ,  rubriques nous contacter, ou tournois, ou partenaires

Limiter à l'affichage des colonnes importantes d'un tableau si on veut qu'il reste en tableau ( connectez vous avec l'identifiant "test" et le mot de passe "TEST"), ayez la gentillesse de ne pas le modifier pour en laisser aux copains. le tableau en question s'appelle "Liste Adhérents" dans le menu "pages adhérents"

Autre aspect nécessaire pour le responsive : le CSS qui dépend de la taille de l'écran, qui permet de masquer un div, réduire une  police, ....

Autre développement en cours : un site multilingue :  je ne suis pas le premier à le proposer mais j'ai développé une méthode qui le rend assez simple à programmer :
Dans le répertoire zdata, je crée autant de sous-répertoires que de de langues ... Chacun de ces répertoires contient les pages et le fichier structure.dta. Tout le reste est commun à toutes les langues. L'int"rêt de cette approche est qu'avec un code php unique on peut avoir un site unilingue (mettre "" dans le langage de la config) ou multilingue (mettre la langue par défaut) Le passage d'une langue à l'autre est instantané, même en cours d'édition par tinymce.
L'idée pour le rendre multilingue est de le créer dans une langue, copier le répertoire dde la première langue ver une autre puis de traduire. Les addons (photoshow, images, liens... restent)

Sur ce site, j'ai même réussi (mais çà ne marche que sur FIREFOX) à conserver en haut de table la ligne des champs.

Je donne la méthode et le code en échange privé à qui le veut... vous pouvez me joindre sur www.ducas.fr

PYDou


Consultant en sécurité informatique (ISO 27001 Lead Auditor, ISO 27005 Risk Manager)
Amateur de JAZZ, Voile, Bridge

Hors ligne

Pied de page des forums