ajuster largeur

lnain · 07/08/2020 18:46:48

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

Stefpei · 10/08/2020 15:22:26

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"

lnain · 10/08/2020 22:12:45

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.

Stefpei · 10/08/2020 23:23:38

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)

pydou · 01/12/2020 18:36:16

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

Forum ZitePLUS

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

ajuster largeur

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

Re : ajuster largeur

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

Re : ajuster largeur

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

Re : ajuster largeur

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

Re : ajuster largeur

Pied de page des forums