Réduire la hauteur de la Zone d'annonce sous la bannière

[Lambada]

Détails techniques

Version du forum : phpBB2
Poste occupé : Administrateur
Navigateur(s) concerné(s) : Mozilla Firefox
Personnes concernées par le problème : Tous les utilisateurs
Problème apparu depuis : il y a plusieurs mois ??
Lien du forum : http://toiledetoiles.forumactif.org/

Description du problème

Bonjour à tous .
J'ai une zone très haute pour mes annonces sous la bannière .
Sachant que cette hauteur réglée à 450 par mes soins, actuellement ne change jamais.
Même si je tente de la régler à 200 ou autre, elle reste  très haute . Et j'ai toujours du vide en dessous de mes images ou texte de Bienvenue.
Le problème est là , depuis déjà quelque temps déjà,  mais je n'ai jamais pris le temps de vous le soumettre .
Il est marqué dans le panneau d'administration, en face de la dimension de cette bande annonce "La hauteur de la zone, sera égale à la hauteur de l'annonce la plus grande si la taille indiquée est inférieure." C'est la raison pour laquelle j'ai fait des essais en mettant une dimension plus petite, mais hélas ça n'a pas réglé mon problème !!
Merci pour votre aide mes amis.

[chattigre]

Bonjour,
Pouvez-vous nous faire une capture d'écran de la partie configuration des annonces défilantes ?

PA Général Messages et Emails Annonces

Merci

Bonne journée

[Lambada]

Bonjour Chattigre
Voici ma capture dans le panneau d'administration. (Je crois que c'est celle là que tu veux?)


Merci mon ami.

[chattigre]

Bonjour,

Vous pouvez essayer ceci dans votre feuille de style CSS :

PA Affichage Couleurs Feuille de style CSS

Code:

#fa_ticker_block, #fa_ticker, div#fa_ticker_container, #fa_ticker_block table.forumline {
  max-height: 450px !important;
  box-sizing: border-box;
}

#fa_ticker_block + #page-body {
  margin-top: 15px;
}

Ce qui aura pour effet d'outrepasser la limite définie par le PA.
Attention pour un résultat lisible je vous conseille de désactiver le temps d'arrêt de 5s et de préférer un défilement continu en indiquant 0 (si l'annonce s'arrête on n'en verra qu'un morceau à l'arrêt).

Vous pouvez modifier la hauteur voulue en modifiant le 450px par une valeur de votre choix à votre convenance.

La deuxième règle est là pour résoudre un problème de marge que je n'arrive pas à résoudre autrement : Sinon les annonces et le contenu de la page se chevauchent, ça rajoute juste une marge au contenu en haut si les annonces sont présentes.

Bonne journée

[Lambada]

Merci pour ta réponse Chattigre, mais lorsque j'ouvre mon CSS (dans lequel je ne vais jamais d'ailleurs...) je ne retrouve pas le texte dont tu me parles pour le reparamétrer ??? 
Donc ma gustation est : dois-je réécrire tout le contenu de ce que tu m'as donné en capture d'écran?? stp.
Je patauge grave  avec l'informatique ...  et n'ose jamais aller farfouiller la-dedans.   
Mais sur tes conseils, pas de souci,  je vais te suivre .
Merci pour ton aide mon ami .

[chattigre]

Bonjour,

A la suite de ce que vous avez déjà dans votre feuille CSS, ajoutez le code que je vous ai donné puis cliquez sur

Le code CSS concerne tout ce qui est personnalisé sans utiliser les options natives du PA en matière d'affichage.
Quant on vous donne un code CSS pour quelque chose vous devez l'ajouter avec le code précédemment présent qui est souvent indépendant.
Et si la personnalisation apportée par un code en particulier ne vous convient plus il vous suffit de le retirer ^^
---
Quelques précisions :
Par exemple

Code:

.postbody {
  text-align: center;
}

est une règle CSS (délimitée par un sélecteur .postbody et deux accolades { et } ) qui permet de définir le centrage du texte dans les messages.
C'est donc totalement sans rapport avec mon code, mais c'est au même endroit car ça concerne l'affichage et donc c'est du code CSS .

Bonne journée

[Lambada]

Ok merci Chattigre.
Donc, si je comprends bien tes explications, je copie/colle ton pavé de capture dans mon CSS ?
Bon je te tiens au courant ! .
A suivre...
Merci beaucoup.
Amitiés

[Lambada]

Je viens d'installer ton pavé dans mon CSS  et super !!!  Tout est à nouveau OKK!!   Chapeau bas pour la solution !!  
Sur ton conseil, j'ai placé 600pxl dans la hauteur de la bande car il me manquait le bas de mes annonces et de mes images . Donc ça défile proprement vers la gauche .
Mais quand je règle le déplacement "vers en bas" ... (car j’aime changer quelquefois), la marge entre deux annonces est quand même "immense" . Donc la bande passante reste blanche longtemps ??? Y aurait-il une solution pour rapprocher les images quand elles défilent vers le bas?? Stp mon ami. (A savoir que, dans mon paramétrage j'ai mis 50pxl dans mon espacement entre les images , quand elles défilent horizontalement ) et j'ai supprimé le point d'arrêt , comme tu me l'as conseillé!!
Merci, merci pour ton aide précieuse.
Cordialement.

[chattigre]

Bonjour,

Votre problème est-il toujours présent ? Je vois qu'actuellement les annonces défilent vers la gauche, donc c'est assez compliqué de voir le problème.

Si oui, pourriez-vous les remettre vers le haut ou vers le bas que je puisse constater le problème ?

Pourriez-vous aussi poster ici les codes des annonces qui ont une trop grande marge ?

Merci

Bonne journée
Cordialement

[Lambada]

Bonjour Chattigre.
Je viens de replacer le défilement vertical pour que tu puisses te rendre compte du long moment d'attente entre deux images .
Par contre je ne comprends pas ce que tu me demandes. "Les codes des annonces ayant une trop grande marge" , c'est le lien  URL  des images ??
Bon de toute façon, ce sont toutes les annonces qui semblent avoir une trop grande marge , car le temps d'attente est très long entre deux annonces ou images ..
Merci pour ton aide mon ami.
Bien cordialement.

[chattigre]

Bonjour,

On va déjà regarder ce que l'on peut faire nativement : Éditez vos annonces et basculez l'éditeur en mode "Source" (dernier bouton).

Pouvez-vous copier-coller ici le code d'au moins une des annonces ?

[Lambada]

Merci pour ton suivi gentil Chattigre .
Pas trop présente sur mon ordi en ce moment,  mais je vois ça demain matin sans faute et viendrai te rendre compte .
Bonne soirée

[Chacha]

Bonjour, Attention, cela fait 6 jours que nous n'avons pas de nouvelles concernant votre demande, si vous ne voulez pas voir votre sujet déplacé à la corbeille, merci de poster dans les 24h qui suivent ce message. Si votre sujet est résolu, merci d'éditer votre premier message et de cocher l'icône « résolu »

[Lambada]

Pas eu la force ni le courage de revenir sur mon ordi pour traiter ce problème ... Mais  je vais reprendre le cours des choses !.
Merci à tous .
Cordialement.

[Lambada]

Bonjour Chattigre .
J'ai donc placé toutes mes annonces en mode "source"
En ce qui concerne  le  code d'une de mes annonces, j'ai hébergé par zupimages et quel code dois-je te placer ici , stp??
Car le premier est un https  et le deuxième avec l'URL affiche carrément mon image ?? Je ne sais pas lequel te placer ici ??
Merci beaucoup !!
Cordialement

[chattigre]

Re,

Il me faudrait le code de l'annonce comme sur cette capture.

En éditant une annonce (bouton ) tu arrives sur cette vue avec l'éditeur.


Si tu vois directement l'image dans l'éditeur, clique sur le dernier bouton pour afficher le code.

C'est ce code qu'il me faudrait (là où il y a une bande jaune sur ma capture), copié-collé ici entre balises [ code] [/ code]

Car comme tu le vois sur mon exemple, il n'est pas rare que le code soit très chargé pour pas grand chose...

Bonne journée

[Lambada]

OK merci pour tes supers explications bien claires et évidentes .
En voilà une: 

<div align="center">
       <br />   
</div>
<div align="center">
      <br />
</div>
<div align="center">
           <br />
</div>
<div align="center">
          <img border="0" alt="" src="https://zupimages.net/up/21/47/apmp.jpg" /><br />
</div>
<div align="center">
           <br />
</div>
<div align="center">
           <br />
</div>
<div align="center">
           <br />
</div>
<div align="center">
           <br />
</div><br />

[chattigre]

Re,

Eh ben voilà, bingo

Il y a des sauts de lignes insérés avant et après l'image, entourés de divs.

Tout ce qui nous intéresse, c'est une div pour centrer, et l'image dedans

Pour cette annonce, videz donc le code puis remplacez-le par la seule partie utile :

Code:

<div align="center"><img border="0" alt="" src="https://zupimages.net/up/21/47/apmp.jpg" /><br /></div>

J'ai aussi supprimé tout retour à la ligne.

N'oubliez pas d'Enregistrer

C'est mieux pour cette annonce ?

Il faudrait ensuite le faire pour les autres, vous devriez pouvoir y arriver seule.
Il faut supprimer les balises <div>...</div> qui ne contiennent que des retours à la ligne <br /> voire rien du tout

Attention, toutes ces manipulations doivent être effectuées en mode source de l'éditeur si vous ne voulez pas qu'il casse de nouveau votre travail une seconde après

[Lambada]

Ok merci Chattigre.
Je crois avoir compris .!!   
Je vais essayer avec une autre annonce et te dirai.
Bon, c'est une période de fête   où je n'ai que très peu de temps pour mon ordinateur .
Je suis maman, mamie  et arrière grand-mamie,  ...Donc, j'ai une maison pleine de petit monde !!    
Mais je reviens par ici pour te dire .
Un grand merci , en attendant, et surtout passe de belles fêtes de fin d'année  mon ami.
Amitiés à tous

[chattigre]

Coucou,

Bonnes fêtes également, de mon côté il est probable que je réponde qu'à partir du 28 à compter de demain

 

[Lambada]

Bonjour Chattigre et bonnes vacances ...bien méritées.   
J'ai appliqué tes conseils, mais apparemment les annonces se chevauchent maintenant ??
Bon pas grave j'ai supprimé celles de Noël et verrai la semaine prochaine, avec les images de "nouvel an" comment se comporte ma bande annonces.
Je te tiens au courant de la suite .
A la semaine prochaine mon ami, en te souhaitant une belle fête de la St Sylvestre .

[chattigre]

Bonjour,

Actuellement, les annonces ne se chevauchent pas dans un défilement de droite à gauche, il faudrait les remettre de bas en haut pour que je puisse voir...

Sinon, je reviens sur cela : clic
Il est probable que vous ne soyez plus obligée de forcer une certaine hauteur maintenant que les annonces sont épurées de tout code superflu. La première règle serait donc facultative, mais j'ai envie de vous dire de la laisser au cas où le code trop chargé revienne lors d'une de vos manipulations...

Bonne journée

[Lambada]

Bonjour Chattigre.
Bon sans avoir rien touché à mon CSS , et en défilement vers le bas il n'y a pas de chevauchement ...
Par contre, si je veux les faire défiler vers la gauche toutes les images restent alignées en vertical, les unes sous les autres ou les unes sur les autres ??? Je n'y comprends plus rien !!
Je te les laisse en horizontal  pour que tu vois !!
Merci pour ton aide !!

[chattigre]

Bonjour,

Là, je n'y comprends plus rien non plus, parce que c'est un problème de positionnement des annonces les unes par rapport aux autres. Certaines ne sont espacées que de 50px au lieu d'être espacées de la largeur de l'image + 50px...

Je ne comprends pas d'où ça peut venir pour le coup.
Tu aurais le code de 2-3 annonces qui se chevauchent ? Essaie en même temps de les Enregistrer de nouveau (même si tu ne changes rien).

Mais là, j'ai du mal à comprendre, vu que je ne reproduis pas sur mon forum test...

Bonne soirée

[MlleAlys]

Bonjour,

Je n'observe pas le problème de façon systématique sur Chrome, jamais en actualisant, mais bien systématiquement sur Firefox... Mon hypothèse serait qu'il s'agit du temps de chargement des images qui fausse l'affichage.

Si c'est bien ça, alors préciser la taille de l'image dans le code devrait permettre au navigateur d'anticiper la place nécessaire avant même de l'avoir chargée : Ajoutez width="" et height="" dans chaque balise image en précisant la largeur et la hauteur de chacune :

Code:

<div align="center"><img width="600" height="450" border="0" alt="" src="https://zupimages.net/up/21/47/apmp.jpg" /><br /></div>

[Lambada]

Pfff mon gentil Chattigre, je suis entrain de te donner des tracasseries mon ami ...
Bon je vais faire ce que tu me dis, mais je suis ennuyée du travail que je te donne !!
Même en défilement vertical,  le temps est très long entre certaines images.
Sinon, je replacerai tout comme au départ dans le CSS , mais il faudra que tu m'en redonnes les réglages car je ne saurai pas toute seule .
Donc si on n'y arrive pas tant pis ...
Mais surtout ne t'inquiète pas , ce n'est pas important !!
Merci infiniment.
Amitiés
PS: je vois ton dernier message maintenant ...Donc je vais le faire , mais  à suivre ...

[Lambada]

Bon apparemment juste en donnant les dimensions à ma dernière image , la bande défile horizontalement correctement ...   (car en vertical les espaces sont très grands  et le temps est incroyablement long  avant l'apparition de chaque image !!!)
Un grand merci... car je ne sais pas ce que je vais découvrir lorsque je vais changer mes annonces images??
En attendant  tu es super fort   et je te remercie mon ami.
Passe une belle fête de fin d'année et encore un grand MERCI pour le temps que tu m'as donné!
Amitiés!!  

[MlleAlys]

1. Commencez dans ce cas par modifier chaque annonce pour préciser la taille de toutes les images : Vérifiez à toujours bien utiliser l'éditeur en mode source (et non wysiwyg) comme chattigre a expliqué dans son message ici, afin de voir tous les codes : Retirez tout ce qu'il y a pour ne garder QUE l'image avec sa taille (ne vous inquiétez pas pour le centrage, on le remettra plus tard autrement). Dans vos annonces qui sont des images, il doit donc y avoir seulement quelque chose comme ça :
   

   Code:

   <img width="600" height="450" src="https://zupimages.net/up/21/47/apmp.jpg" />

   
   
   
2. Rendez-vous dans affichage > couleur > onglet feuille de style css
   
3. Retirez les codes proposés au début du sujet par chattigre (afin de revenir à la base et voir si à présent ils sont toujours nécessaires... ou pas).
   
4. A la place des codes de chattigre, copiez/collez le code suivant (pour centrer automatiquement toutes les annonces sans avoir besoin de le remettre dans chacune d'entre elle) :
   

   Code:

   
/*centrer automatiquement les annonces défilantes*/
#fa_ticker {
  text-align: center;
}



   
   
5. Enregistrez le css.
   
   
   
6. Actualisez la page de votre forum en faisant ctrl+R pour rafraichir la page.
   
7. Vérifiez l'affichage des annonces à l'horizontale et à la verticale : Il y aura peut-être des détails à corriger encore, mais normalement plus de gros espaces ni de superposition !  
   

[Lambada]

Super sympa MlleAlys.
Je vais faire comme vous me l'indiquez ...et je vous retrouve par ici.
Un grand MERCi pour votre aide précieuse .

[Lambada]

Bonjour à vous et bonne année 2022 à tous .  Et surtout la santé!!

Alors après avoir mis en place,  tous vos bons conseils,  voici ce que j'ai lorsque je rentre directement sur mon portail :
https://zupimages.net/up/22/52/74lf.jpg
Par contre si j'ouvre un post et que je rentre dans une rubrique,  les images sont correctement alignées, les unes derrière les autres ??  Je n'y comprends plus rien.
Merci pour votre aide .