Vérifiez vos informations

Il semblerait que les informations techniques de votre profil n'aient pas été actualisées depuis un certain temps... Pour que l'aide apportée vous soit efficace, il est important que ces informations soient à jour : prenez quelques secondes pour confirmer ou compléter les informations suivantes.


Lien de votre forum
Version de ce forum
Vous êtes le fondateur de ce forum
Vous avez modifié le CSS de ce forum
Vous avez modifié les templates de ce forum
Votre navigateur

Header et logo sur toutes les résolutions d'écran. [Merci à ceux qui liront]

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu Header et logo sur toutes les résolutions d'écran. [Merci à ceux qui liront]

Message par ssamiiex le Dim 16 Sep - 20:57

Détails techniques


Version du forum : phpBB2
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Google Chrome
Personnes concernées par le problème : Plusieurs utilisateurs
Lien du forum : http://twistyraintest.forumactif.com/

Description du problème

Bonjour/soir à vous tous cheers !

Déjà, je tiens à vous remercier car ce n'est pas la première fois que je poste un problème ici et que vous êtes d'une grande aide.

Pour faire court, sur mon forum j'ai des bannières aléatoires en css en background et un cadre de forum avec le logo ressorti de celui-ci. Tout se passe très bien sur mon ordinateur (capture), mais c'est lorsque l'on passe à une résolution plus grand que le cadre du forum cache le header de fond comme cela : https://media.discordapp.net/attachments/490320332415172608/490962026206855177/unknown.png?width=954&height=473
https://media.discordapp.net/attachments/490320332415172608/490962038143582210/unknown.png?width=715&height=473
https://media.discordapp.net/attachments/490320332415172608/490958046256824340/unknown.png?width=960&height=449
https://media.discordapp.net/attachments/490320332415172608/490948553385050136/unknown.png?width=960&height=469

J'ai tout essayé ce que je savais : min-width, max-width, media query, #i logo et même de mettre un height et un width spécifique au background. Rien n'a fonctionné.

Voici ici mon css utilisé :
Code:
.bodyline {
-moz-border-radius:15px;
-webkit-border-radius:15px;
border-radius:15px;
}

td.bodyline {
  padding: 0 0 10px 0;
}

div#page-body {
  margin: 0 10px;
}

@media (min-width: 1200px) {
    body {
        background-size: 100%;
    background-repeat: no-repeat;
    }
}
#i_logo { height: 450px; width: 100%;position:relative;z-index:999;margin-top:-7px !important;}
@media (min-width: 1200px) {
        .ban1 { background-image: url('https://zupimages.net/up/18/37/57vs.png'); }
        .ban2 { background-image: url('https://zupimages.net/up/18/37/kr2z.png'); }
        .ban3 { background-image: url('https://zupimages.net/up/18/37/iyiw.png'); }
        .ban4 { background-image: url('https://zupimages.net/up/18/37/0gpu.png'); }
}

Merci énormément à ceux qui m'ont lu et veulent m'aider, vous êtes des anges I love you.
avatar

ssamiiex
*

Féminin
Messages : 48
Inscrit(e) le : 30/01/2013

http://rosscreek.forumactif.com/
ssamiiex a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Header et logo sur toutes les résolutions d'écran. [Merci à ceux qui liront]

Message par ◦Jay◦ le Lun 17 Sep - 5:17

Bonjour, il faudrait retirer ça :

Code:
@media (min-width: 1200px) {
    body {
        background-size: 100%;
    background-repeat: no-repeat;
    }

Et remplacer ça :

Code:
@media (min-width: 1200px) {
        .ban1 { background-image: url('https://zupimages.net/up/18/37/57vs.png'); }
        .ban2 { background-image: url('https://zupimages.net/up/18/37/kr2z.png'); }
        .ban3 { background-image: url('https://zupimages.net/up/18/37/iyiw.png'); }
        .ban4 { background-image: url('https://zupimages.net/up/18/37/0gpu.png'); }
}

Par :

Code:
@media{
        .ban1 { background-image: url('https://zupimages.net/up/18/37/57vs.png');
  background-size:100% ;
  background-repeat:no-repeat ;}
        .ban2 { background-image: url('https://zupimages.net/up/18/37/kr2z.png');
  background-size:100% ;
  background-repeat:no-repeat ;}
        .ban3 { background-image: url('https://zupimages.net/up/18/37/iyiw.png');
  background-size:100% ;
  background-repeat:no-repeat ;}
        .ban4 { background-image: url('https://zupimages.net/up/18/37/0gpu.png');
  background-size:100% ;
  background-repeat:no-repeat ;}
}

Pour que la hauteur soit la même pour toutes les résolutions, vous pouvez remplacer ceci :

Code:
#i_logo { height: 450px; width: 100%;position:relative;z-index:999;margin-top:-7px !important;}

Par :

Code:
.bodylinewidth{margin-top:35% ; }

J'ai mis 35% mais vous pouvez changer à votre guise. Wink
avatar

◦Jay◦
Membre actif

Masculin
Messages : 4223
Inscrit(e) le : 24/12/2014

https://forum.forumactif.com
◦Jay◦ a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Header et logo sur toutes les résolutions d'écran. [Merci à ceux qui liront]

Message par ssamiiex le Lun 17 Sep - 10:31

Coucou ◦Jay◦ I love you merci beaucoup, le 35% a été parfait en plus !
Avec tous mes essais, ENFIN, ça fonctionne un énorme merci à vous !

Alors si je comprend bien, avec le media il vaut mieux faire toutes les bannières individuellement et pour le logo il serait préférable de l'enlever pour que tout soit pareil sur toutes les résolutions ? J'ai tenté de mettre un logo par la suite pour que les membres puissent cliquer sur la bannière pour retourner à l'index, mais ça déforme énormément le forum en height Sorry

S'il n'y a pas de solutions pour mettre un logo qui ramène à l'index sur le header, je vais le laisser comme ça et les membres n'auront qu'à appuyer sur l'accueil dans la navigation, mais sinon, auriez-vous une solution s'il vous plait aidez moi ::pourtoi:: ?
avatar

ssamiiex
*

Féminin
Messages : 48
Inscrit(e) le : 30/01/2013

http://rosscreek.forumactif.com/
ssamiiex a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Header et logo sur toutes les résolutions d'écran. [Merci à ceux qui liront]

Message par ◦Jay◦ le Mar 18 Sep - 16:14

Hello, en mettant vos bannières en JS comme dans ce tutoriel, elles resteront cliquables. Wink

Il faudra ensuite ré-adapter votre css mais ce sera plus simple, il vous faudra simplement :

Code:
img#i_logo{
  background-size:100% ;
  background-repeat:no-repeat ;}


EDIT : Bah non ! Ça n'ira pas car le header aura la taille du forum et ce n'est pas l'effet recherché.... Je cherche une autre solution. Mr. Green
avatar

◦Jay◦
Membre actif

Masculin
Messages : 4223
Inscrit(e) le : 24/12/2014

https://forum.forumactif.com
◦Jay◦ a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Header et logo sur toutes les résolutions d'écran. [Merci à ceux qui liront]

Message par ssamiiex le Mar 18 Sep - 16:34

Je vois tout à fait ce que vous voulez dire, c'est une situation assez complexe car dès que l'on met un logo, le précédant code se retrouve inutile x). Peut-être mettre un #i_logo, mais être capable d'adapter le cadre du forum à chaque résolution en height ? reflexion Je ne sais pas si c'est faisable.
avatar

ssamiiex
*

Féminin
Messages : 48
Inscrit(e) le : 30/01/2013

http://rosscreek.forumactif.com/
ssamiiex a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Header et logo sur toutes les résolutions d'écran. [Merci à ceux qui liront]

Message par foxies le Mar 18 Sep - 17:32

Bonsoir Very Happy

Tu peux peut-être essayer en rajoutant dans ton code le lien suivant :

Code:
<a href="{U_INDEX}">


Dernière édition par foxies le Mer 19 Sep - 5:22, édité 2 fois
avatar

foxies
****

Féminin
Messages : 498
Inscrit(e) le : 02/05/2010

http://hawkeyeriver.forumgratuit.org/
foxies a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Header et logo sur toutes les résolutions d'écran. [Merci à ceux qui liront]

Message par ssamiiex le Mar 18 Sep - 18:27

Coucou foxies, merci de contribuer à ma recherche.

C'est ceci dans mon overall_header, mais nous avons enlever le code #i_logo dans le css avec la solution précédente scratch .
Code:
 <tr>
                        <!-- BEGIN switch_logo_left -->
                        <td><a href="{U_INDEX}"><img src="{LOGO}" id="i_logo" border="0" alt="{L_INDEX}" vspace="1" /></a></td>
                        <!-- END switch_logo_left -->
                        <td align="center" width="100%" valign="middle">
                            <!-- BEGIN switch_logo_center -->
                            <a href="{U_INDEX}"><img src="{LOGO}" id="i_logo" border="0" alt="{L_INDEX}" vspace="1" /></a>
                            <br />
                            <!-- END switch_logo_center -->
                            <div class="maintitle">{MAIN_SITENAME}</div>
                            <br />
                            <span class="gen">{SITE_DESCRIPTION}<br />&nbsp; </span>
                        </td>
                        <!-- BEGIN switch_logo_right -->
                        <td><a href="{U_INDEX}"><img src="{LOGO}" id="i_logo" border="0" alt="{L_INDEX}" vspace="1" /></a></td>
                        <!-- END switch_logo_right -->
                    </tr>
avatar

ssamiiex
*

Féminin
Messages : 48
Inscrit(e) le : 30/01/2013

http://rosscreek.forumactif.com/
ssamiiex a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Header et logo sur toutes les résolutions d'écran. [Merci à ceux qui liront]

Message par ◦Jay◦ Hier à 4:15

On va faire simple, vous pouvez retirer le css lié aux bannières, mettre ce JS sur toutes les pages :

Code:
$(function() {
  var a = [
    "https://zupimages.net/up/18/37/57vs.png",
    "https://zupimages.net/up/18/37/kr2z.png",
    "https://zupimages.net/up/18/37/iyiw.png",
    "https://zupimages.net/up/18/37/0gpu.png",
  ];
 
  $("img#i_logo").attr("src", a[Math.floor(Math.random() * a.length)])
});

Puis rendez-vous dans votre PA>Affichage>Template>Général>overall_header

Cherchez ceci :
Code:
<table width="100%" cellspacing="0" cellpadding="0" border="0">
                    <tr>
                        <!-- BEGIN switch_logo_left -->
                        <td><a href="{U_INDEX}"><img src="{LOGO}" id="i_logo" border="0" alt="{L_INDEX}" vspace="1" /></a></td>
                        <!-- END switch_logo_left -->
                        <td align="center" width="100%" valign="middle">
                            <!-- BEGIN switch_logo_center -->
                            <a href="{U_INDEX}"><img src="{LOGO}" id="i_logo" border="0" alt="{L_INDEX}" vspace="1" /></a>
                            <br />
                            <!-- END switch_logo_center -->
                            <div class="maintitle">{MAIN_SITENAME}</div>
                            <br />
                            <span class="gen">{SITE_DESCRIPTION}<br />&nbsp; </span>
                        </td>
                        <!-- BEGIN switch_logo_right -->
                        <td><a href="{U_INDEX}"><img src="{LOGO}" id="i_logo" border="0" alt="{L_INDEX}" vspace="1" /></a></td>
                        <!-- END switch_logo_right -->
                    </tr>
                </table>

et déplacez le tout quelques lignes au dessus, juste au dessus de :

Code:
<table class="bodylinewidth" width="{T_BODY_TABLE_WIDTH}" cellspacing="0" cellpadding="10" border="0" align="center">

Voilou.
avatar

◦Jay◦
Membre actif

Masculin
Messages : 4223
Inscrit(e) le : 24/12/2014

https://forum.forumactif.com
◦Jay◦ a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Header et logo sur toutes les résolutions d'écran. [Merci à ceux qui liront]

Message par ssamiiex Hier à 12:39

Coucou I love you c'est une très bonne alternative par la js, malheureusement ça ne fonctionne pas Sad Sad .
Voici le résultat sur mon écran : https://zupimages.net/up/18/38/spzq.png

J'ai ajouté le js, retiré le @media et ai fait le déplacement dans le template.
Voici le css restant relié au header/cadre du forum :
Code:
.bodyline {
-moz-border-radius:15px;
-webkit-border-radius:15px;
border-radius:15px;
}

.bodylinewidth{margin-top:35% ; }

td.bodyline {
  padding: 0 0 10px 0;
}

div#page-body {
  margin: 0 10px;
}
avatar

ssamiiex
*

Féminin
Messages : 48
Inscrit(e) le : 30/01/2013

http://rosscreek.forumactif.com/
ssamiiex a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Header et logo sur toutes les résolutions d'écran. [Merci à ceux qui liront]

Message par ◦Jay◦ Hier à 12:52

Il me semble au contraire que cela fonctionne mais comme nous avons remis le header à sa place, il faut maintenant retirer ce code :

Code:
.bodylinewidth {
    margin-top: 35%;
}
avatar

◦Jay◦
Membre actif

Masculin
Messages : 4223
Inscrit(e) le : 24/12/2014

https://forum.forumactif.com
◦Jay◦ a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Header et logo sur toutes les résolutions d'écran. [Merci à ceux qui liront]

Message par ssamiiex Hier à 13:09

Ah oui tout à fait cela fonctionne très bien Smile !

Merci beaucoup ◦Jay◦ pour votre patience et d'avoir pris en charge mon problème. Je ne saurais comment vous remercier.

Au plaisir,

ssamiiex
avatar

ssamiiex
*

Féminin
Messages : 48
Inscrit(e) le : 30/01/2013

http://rosscreek.forumactif.com/
ssamiiex a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Header et logo sur toutes les résolutions d'écran. [Merci à ceux qui liront]

Message par ◦Jay◦ Hier à 13:11

Avec plaisir. Wink

Hi
avatar

◦Jay◦
Membre actif

Masculin
Messages : 4223
Inscrit(e) le : 24/12/2014

https://forum.forumactif.com
◦Jay◦ a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut


Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum