Forum - Skins - Skin_transparence20

Bonjour Jean-Denis,

Je suis en train de retravailler (refaire) mon site, et j'utilise ta skin transparence20 pour laquelle je te remercie.

Par contre, j'ai un petit soucis. En effet, quand je met la largeur de page à full, j'ai une barre de défilement horizontale qui s'affiche en bas (voir : https://essai.meteotarn.fr/), alors que sur mon site actuel (https://www.meteotarn.fr) qui est en full aussi, aucune barre ne s'affiche. 

Petit précision, je n'ai encore rien touché d'autre dans les paramètres que la page en full.

Merci pour votre aide.  

Re,

J'ai un petit soucis au niveau des colonnes.

Sur les onglets, je peux cliquer sur l'onglet lui-même sans forcément être sur les caractères de l'onglet (je voulais rajouter une image, mais je ne peux pas, donc je mets l'url de la page) :

ONGLETS

Par contre, sur les colonnes, il faut absolument être sur les caractères de l'onglet pour être cliqué :

COLONNES

Et je n'arrive pas à avoir les mêmes couleurs que sur les onglets. Je n'arrive pas à comprendre le code dans styleplus des colonnes. Ce que je dois rajouter, ou modifier...  (il faudrait que je fasse une formation CSS ).

Je te remercie encore une fois pour ton aide. 

Je vais ensuite m'attaquer au visuel de ma page d'accueil genre caméras. 

Merci encore pour tout.

Cordialement,

Cyrille.

Re,

J'avoue avoir du mal à saisir ta première demande...

Tu veux mettre une image dans un onglet ?

C'est possible, bien sûr !

par exemple pour ton premier onglet c'est ce type de code :

<li class="nav-item"><a class="nav-link active" data-toggle="tab" href="#menu1">JUIN <img src="img/cadeau.gif" /></a></li>

en supposant que tu veuilles mettre un cadeau en juin ! attention, à bien respecter l'appel à l'image entre les balises :

<a> et </a>

Pour les colonnes... je te rappelle que je ne suis pas à l'origine de cette disposition...

Par contre, le fait que le clic se fasse sur le mot et non sur l'onglet... c'est du codage... Pour les couleurs également...

C'est Papinou qui t'a proposé cette disposition, je te suggère de t'adresser à lui pour les modifications, non pas que je n'en soit pas capable, mais la courtoisie veut que je te renvoie vers lui.

Désolé, mais si je veux exiger la même chose, je me dois de la respecter.

Mais, si tu regardes ici : https://www.71site.fr/articles.php?lng=fr&pg=659&mnuid=19&tconfig=0

tu verras que le clic se fait sur l'onglet.

Si jamais tu optais pour ce dispositif tout à fait similaire au tien, je pourrais bien sûr t'aider à le mettre en place (L'origine de celui-ci est, comme je l'indique dans mon styleplus ligne 261 à 307 de jac83 que je remercie encore...)

C'est assez simple à mettre en place et à paramétrer pour avoir le même rendu que tes onglets.

Cordialement,

Citation : « Jean-Denis »

J'avoue avoir du mal à saisir ta première demande... 

Tu veux mettre une image dans un onglet ?

Non non. Je voulais rajouter une image sur le message, mais je n'y arrive pas. Donc, j'ai mis une URL à la place. 

En fait, si je comprends bien, le système d'onglets que tu me propose pour remplacer les colonnes, ferait la même chose, mais est-ce que ça n'alourdirait pas la page en question, car il y a beaucoup d'images (radars de pluie) de différentes régions ?

En gros, est-ce que tout sera sur le même article, ou est-ce que les onglets feront appel à d'autres articles ? (d'après ce que j'ai compris, les onglets seraient sur le même article).

Oui, je comprends très bien. Si je dois rester sur le système des colonnes, je demanderais à Papinou. Désolé de t'avoir demandé pour ça.

Merci quand-même.

Cordialement,

Re,

Euh... Je ne comprends toujours pas :

Citation :

Je voulais rajouter une image sur le message, mais je n'y arrive pas. Donc, j'ai mis une URL à la place

Quel message ?

Pour le principe de colonnes, tu fais bien entendu ce que tu veux. En ce qui me concerne, il n'y a aucun souci...

Le dispositif sur ces pages : https://www.71site.fr/articles.php?lng=fr&pg=659&mnuid=19&tconfig=0

est basé strictement sur le même fonctionnement : des liens , en haut, appellent d'autres articles (déclarés ou pas en option de menu, peu importe...).

Donc, un clic sur chaque lien appelle un nouvel article, ce qui, effectivement, allège le poids numérique de l'ensemble...

Ce ne sont pas des onglets... les liens appelés ne sont pas dans le même article.

Mais encore une fois, c'est toi qui choisis !

Citation :

Désolé de t'avoir demandé pour ça.

Ne sois pas désolé... Chacun devrait pouvoir utiliser les solutions qu'il souhaite, et obtenir les aides nécessaires auprès des "distributeurs" dans le respect des travaux de chacun d'eux...

Après, si tu souhaites continuer à utiliser le système colonnes, et que Papinou ne te propose aucune solution qui te convienne, alors je pourrai, bien sûr, intervenir.

Cordialement,

Re,

Citation : « Jean-Denis »

Quel message ?

Sur le message N° 31 du forum plus haut. Je voulais mettre une image dans le message en question, mais j'ai pas trouvé comment. Mais c'est pas grave... 

Je suis en train de faire un essai avec tes onglets (version 3) sur cet article : ARTICLE, mais je ne sais pas où mettre le N° de l'article qui enverrait sur l'article en question (article 251 pour France, 252 pour Sud-Ouest, 253 pour le Sud-Est, etc...).

<section class="tabs">
<input checked="checked" class="tab-selector-1" id="tab-1" name="radio-set" type="radio" /> <label class="tab-label-1" for="tab-1">France</label> 
<input class="tab-selector-2" id="tab-2" name="radio-set" type="radio" /> <label class="tab-label-2" for="tab-2">Sud-Ouest</label> 
<input class="tab-selector-3" id="tab-3" name="radio-set" type="radio" /> <label class="tab-label-3" for="tab-3">Sud-Est/Corse</label> 
<input class="tab-selector-4" id="tab-4" name="radio-set" type="radio" /> <label class="tab-label-4" for="tab-4">Centre-Ouest</label> 
<input class="tab-selector-5" id="tab-5" name="radio-set" type="radio" /> <label class="tab-label-5" for="tab-5">Centre-Est</label> 
<input class="tab-selector-6" id="tab-6" name="radio-set" type="radio" /> <label class="tab-label-6" for="tab-6">Nord-Ouest</label> 
<input class="tab-selector-7" id="tab-7" name="radio-set" type="radio" /> <label class="tab-label-7" for="tab-7">Nord-Est</label> 
<input class="tab-selector-8" id="tab-8" name="radio-set" type="radio" /> <label class="tab-label-8" for="tab-8">Nord-IDF</label>
<div class="clear-shadow"></div>

Comme pour les colonnes :

<div style="text-align:center;width:100%;margin:auto;">
<ul class="colonnes">
	<li><a href="articles.php?lng=fr&amp;pg=251#z2">France</a></li>
	<li><a href="articles.php?lng=fr&amp;pg=252#z2">Sud-Ouest</a></li>
	<li><a href="articles.php?lng=fr&amp;pg=253#z2">Sud-Est/Corse</a></li>
	<li><a href="articles.php?lng=fr&amp;pg=254#z2">Centre-Ouest</a></li>
	<li><a href="articles.php?lng=fr&amp;pg=255#z2">Centre-Est</a></li>
	<li><a href="articles.php?lng=fr&amp;pg=256#z2">Nord-Ouest</a></li>
	<li><a href="articles.php?lng=fr&amp;pg=257#z2">Nord-Est</a></li>
	<li><a href="articles.php?lng=fr&amp;pg=258#z2">Nord-IDF</a></li>
</ul>
</div>

 Merci pour ton aide.

Bonne soirée.

Cordialement,

Re,

Non, je suis désolé, mais tu confonds... Je me suis mal expliqué :

Le procédé qui est semblable à "colonnes" fonctionne avec les liens en haut de l'article :

Certes, ici : https://www.71site.fr/articles.php?lng=fr&pg=659&mnuid=19&tconfig=0

mais, par exemple ici aussi : https://www.71site.fr/articles.php?lng=fr&pg=619&mnuid=19&tconfig=0

Il n'y a pas de tutoriel sur le site à ce propos, mais je te préparerai un message demain.

Quant aux images, je viens de comprendre... Non on ne peut pas placer d'image dans le forum (c'est plutôt un choix de sécurité qu'autre chose : cela se paramètre...)

Cordialement,

Bonjour Cyrille,

Comme promis... un long message...

Ci-dessous le code à placer dans ton styleplus (il est paramétré pour se comporter exactement comme tes onglets, j'ai donc modifié un peu mon propre code)

si tu modifies tes onglets natifs de GuppY (couleur, police...) il faut reporter ces modifications dans ce code pour reproduire le même style.

Laisse les commentaires, cela t'aidera à l'adapter ensuite

.more { /*menu en tête d°article : merci à jac83 ( https://thorame-haute.fr/ )*/
    position:relative;
    clear:both;
    width: 100%; /*largeur totale dans l'article*/
    margin: 0 auto; /*marges extérieures*/
}
.more ul {
    display:block;
    text-align:center; /*centre le dispositif - left pour le placer à gauche -*/
}
.more ul li {
    display: inline-block;
    padding: 0; /*marges intérieures*/
    margin:0px 5px; /*marges extérieures : la 2° valeur permet de rapprocher +ou- les onglets -peut être négatif -> -2px et les onglets se touchent-*/
}
.more ul li.selected a { /*attribut onglet actif*/
    background:#FF7F50; /*couleur fond*/
    color:#4E1625; /*couleur texte*/    
}
.more ul li.selected a:hover { /*attribut onglet survolé actif*/
    background:#735056; /*couleur fond*/
    color:#DCDF38; /*couleur texte*/    
}
.more ul li a { /*attributs onglets général*/
    color:#4E1524; /*couleur texte*/
    float:left;
    background:#DCDF38; /*couleur fond*/
    line-height: 25px; /*hauteur de ligne*/
    vertical-align: middle; /*centrage dans l'onglet*/
    border-radius: 8px; /*arrondis*/
    border: 2px solid #000000; /*bordure : taille nature couleur*/
    padding: 2px 8px; /*marges intérieures*/
    font-weight:bold; /*gras police : bold ou normal*/
    font-family:comic sans ms; /*famille police*/
    font-size:15px; /*taille police*/
}
.more ul li a:hover { /*attributs onglet survolé*/
    background:#735056; /*couleur fond*/
    color:#DCDF38; /*couleur texte*/
    -webkit-transition: all .3s ease-in;
    -moz-transition: all .3s ease-in;
    transition: all .3s ease-in; /*transition au survol*/
}
/*fin menu en tête d"article*/

Ensuite, dans chacun de tes articles tu places dans le code source, en haut (après le style éventuel de l'article), comme ceci :

<div class="more">
    <ul>
        <li class="selected"><a href="articles.php?lng=fr&amp;pg=251#z2">France</a></li>
        <li><a href="articles.php?lng=fr&amp;pg=252#z2">Sud-Ouest</a></li>
        <li><a href="articles.php?lng=fr&amp;pg=253#z2">Sud-Est/Corse</a></li>
        <li><a href="articles.php?lng=fr&amp;pg=254#z2">Centre-Ouest</a></li>
        <li><a href="articles.php?lng=fr&amp;pg=255#z2">Centre-Est</a></li>
        <li><a href="articles.php?lng=fr&amp;pg=256#z2">Nord-Ouest</a></li>
        <li><a href="articles.php?lng=fr&amp;pg=257#z2">Nord-Est</a></li>
        <li><a href="articles.php?lng=fr&amp;pg=258#z2">Nord-IDF</a></li>
    </ul>
</div>

Tu vois que cela ressemble fort au procédé colonnes...

Mais il faut varier la position de

<li class="selected">

dans l'article 251 il doit être comme ci-dessus (c'est pour l'onglet = la page active)

De la même manière tu devras échanger les positions ainsi, pour, par exemple ton article 255, tu auras dans le code source en haut de l'article

<div class="more">
    <ul>
        <li><a href="articles.php?lng=fr&amp;pg=251#z2">France</a></li>
        <li><a href="articles.php?lng=fr&amp;pg=252#z2">Sud-Ouest</a></li>
        <li><a href="articles.php?lng=fr&amp;pg=253#z2">Sud-Est/Corse</a></li>
        <li><a href="articles.php?lng=fr&amp;pg=254#z2">Centre-Ouest</a></li>
        <li class="selected"><a href="articles.php?lng=fr&amp;pg=255#z2">Centre-Est</a></li>
        <li><a href="articles.php?lng=fr&amp;pg=256#z2">Nord-Ouest</a></li>
        <li><a href="articles.php?lng=fr&amp;pg=257#z2">Nord-Est</a></li>
        <li><a href="articles.php?lng=fr&amp;pg=258#z2">Nord-IDF</a></li>
    </ul>
</div>

J'espère avoir été à peu près clair...

Il est vrai que tout cela sort "un peu" du sujet du fil...

Je ferai peut-être un tutoriel à ce sujet dans les astuces en pur css...

Cordialement,

Bonjour Jean-Denis,

Excellent travail. Tu as bossé toute la nuit ? 

Je ne sais pas comment te remercier pour tout ce boulot.

Le rendu est excellent : RADARS DE PLUIE 

J'ai appliqué le code dans Styleplus comme indiqué, et j'ai modifié l'ancien code des colonnes, par celui que tu m'a donné dans les différents articles.

J'en ai fait de même pour cet autre article qui faisait appel aussi aux colonnes : RADARS DE NEIGE

Citation : « Jean-Denis »

J'espère avoir été à peu près clair...

Oui très clair. Je te remercie. 

Citation : « Jean-Denis »

Il est vrai que tout cela sort "un peu" du sujet du fil...

Un tout petit peu. 

En tout cas, je garde ce code. Il fonctionne vraiment bien, et il est très complet.

Encore une fois, je ne sais pas comment te remercier, pour tout le travail que tu as fait. C'est vraiment top. 

Je vais m'attaquer au système de caméra pour ma page d'accueil. Mais si j'ai un soucis, j'ouvrirais un autre sujet pour ne pas encombrer celui-ci.

Cordialement, 

Bonjour Cyrille,

Merci de tes compliments

Ravi d'avoir pu t'être utile... et si tu as besoin d'aide pour Camera... n'hésite pas !

Bonne continuation,

Cordialement,