Banniere selon résolution

Signaler
Messages postés
7
Date d'inscription
samedi 21 janvier 2006
Statut
Membre
Dernière intervention
28 avril 2008
-
Messages postés
3426
Date d'inscription
lundi 26 décembre 2005
Statut
Membre
Dernière intervention
14 janvier 2011
-
Bonjour,
Je suis le webmaster de la Chambre des Secrets, et nous avons refait notre design il y a quelques jours.
Il reste quelques bugs que l'on corrige petit à petit, mais le plus gros est notre banniere, elle fait 1264pixels de largeur, donc seul un visiteur qui est en 1280 pixels(largeur) de résolution la voit bien, mais dès qu'on est en 1024 ca bug.

J'ai cherché un script en js qui me permettrait de mettre une image redimensionné selon la résolution du visiteur, mais j'ai seulement trouvé des scripts qui redirige vers une autre page.

Ne connaitriez vous pas un script qui changerais l'image par rapport à la résolution du visiteur ?

Merci !

19 réponses

Messages postés
13616
Date d'inscription
jeudi 13 février 2003
Statut
Membre
Dernière intervention
15 octobre 2013
33
>>ca bug.
    ça ne peut pas planter... ou alors il faut faire je ne sais quoi, je ne sais où ?
        tout au plus, si on ne fait rien, il y aura des "scrollbar" !
    ne pas fixer la taille dans la balise ?   quoique... on aimerait voir !
        pas une adresse ! pas 256987 lignes !
        comment est défini la "bannière", pas plus.
<hr />                Cordialement            Bul         [mon Site]     [M'écrire]
Messages postés
7
Date d'inscription
samedi 21 janvier 2006
Statut
Membre
Dernière intervention
28 avril 2008

Salut bultez !

C'est vrai, j'ai pas donné assez d'infos, mon site est http://www.chambredesecrets.net et la bannière elle fait toute la largeur en haut de la page sur une hauteur de 175 pxs environ.

Merci !
Messages postés
13616
Date d'inscription
jeudi 13 février 2003
Statut
Membre
Dernière intervention
15 octobre 2013
33
et ben... rien ne plante ??!!?? 
regarde malgré tout, les erreurs !
¡————————¡——————————————————————————————————————————————————————————¡
|FireFox |regarder la "console d'erreurs" |
| | Outils / Console d'erreurs |
| | et mieux, télécharger FireBug |
¦————————¦——————————————————————————————————————————————————————————¦
|Internet|activer le deboggage : Outils/options Internet/Avancés |
|Explorer| dans la liste, sous "Navigation" : décocher |
| | ° Afficher une notification de chaque erreur de script |
| | ° Désactiver le débogage de Scripts (Internet Explorer) |
| | et mieux, télécharger le Debogger IE |
| | voir aussi DebugBar et Companion JS |
¦————————¦——————————————————————————————————————————————————————————¦
|K—Meleon|regarder la "console d'erreurs" |
| | Outils / Console d'erreurs |
¦————————¦——————————————————————————————————————————————————————————¦
|Opera |regarder la "console d'erreurs" |
| | utils / Asole d'erreurs |
¦————————¦——————————————————————————————————————————————————————————¦
|Safari |regarder Debug / Show JavaScript Console |
| | |
| |modif Fichier "Support:\Documents and Settings\utilisateur|
| |\Application Data\Apple Computer\Safari\Preferences.plist"|
| | y ajouter <key>IncludeDebugMenu</key> |
| | <true/> |
!————————!——————————————————————————————————————————————————————————!

<hr />                Cordialement            Bul         [mon Site]     [M'écrire]
Messages postés
3472
Date d'inscription
lundi 16 juillet 2007
Statut
Membre
Dernière intervention
28 février 2014
33
bultez++,

que dire de plus !!!

Si t'a besoin d'aide, MP !!!
Messages postés
469
Date d'inscription
mercredi 9 janvier 2002
Statut
Membre
Dernière intervention
20 février 2017
5
Bonjour(s) au pluriel
J'ai déjà été confronté à ce genre d'embrouille.
tout d'abord, ce n'est pas un bug, mais un dysfonctionnnement d'affichage, donc, ça ne gêne en rien le fonctionnement du site mais altère la présentation.
Ensuite, on ne peux pas utiliser de div, mais une image, la oui !!!!!!!
du coup on a :
<html>
    <head>
        <title>
        </title>
        <style>
        .bandeau{
            overflow:hidden;
            position:absolute;
            top:0px;
            left:0px;
        }
        </style>
        <script>
             var originalHeadBandSize = {
                 width:1264,
                 height:163
             }
            function redimHeadband(){
                var headBand = document.getElementById("bandeau");
                headBand.style.width = document.body.clientWidth + "px";
                var ratio = originalHeadBandSize.width / originalHeadBandSize.height;
                headBand.style.height = originalHeadBandSize / ratio + "px";
            }
        </script>
    </head>
   
       
   
</html>

et la, quelques soit la résolution la bannière d'une part préserve son ratio et ce dimensionne correctement.

[o-_-o]
Messages postés
7
Date d'inscription
samedi 21 janvier 2006
Statut
Membre
Dernière intervention
28 avril 2008

wahou ! merci pour toute vos réponses !

alors bultez en fait les petits bugs sont sur ie7, tout part en cacahuète...
sur firefox tout va bien c'est super !

Zobibol ca à l'air superbe ce que tu m'as donné !je vais essayer de le mettre dans mon code tout de suite en éspérant que ca marche !

je vous tiens au courant !

Merci ! et excusez moi pour la réponse tardive...
Messages postés
13616
Date d'inscription
jeudi 13 février 2003
Statut
Membre
Dernière intervention
15 octobre 2013
33
>>sur firefox tout va bien c'est super !
    bien sûr...

Avertissement : Propriété « behavior » inconnue.  Déclaration abandonnée.
Fichier source : http://www.chambredesecrets.net/dist/spip_style.css
Ligne : 78
 ----------
Avertissement : Propriété « behavior » inconnue.  Déclaration abandonnée.
Fichier source : http://www.chambredesecrets.net/squelettes/styles/base.css
Ligne : 9
 ----------
Avertissement : Propriété « center » inconnue.  Déclaration abandonnée.
Fichier source : http://www.chambredesecrets.net/squelettes/styles/base.css
Ligne : 73
 ----------
Avertissement : Propriété « center » inconnue.  Déclaration abandonnée.
Fichier source : http://www.chambredesecrets.net/squelettes/styles/base.css
Ligne : 88
 ----------
Avertissement : Erreur d'analyse de la valeur pour la propriété « font ».  Déclaration abandonnée.
Fichier source : http://www.chambredesecrets.net/squelettes/styles/base.css
Ligne : 110
 ----------
Avertissement : Erreur d'analyse de la valeur pour la propriété « margin-top ».  Déclaration abandonnée.
Fichier source : http://www.chambredesecrets.net/squelettes/styles/base.css
Ligne : 118
 ----------
Avertissement : Erreur d'analyse de la valeur pour la propriété « text-align ».  Déclaration abandonnée.
Fichier source : http://www.chambredesecrets.net/squelettes/styles/alter.css
Ligne : 8
 ----------
Avertissement : Propriété « behavior » inconnue.  Déclaration abandonnée.
Fichier source : http://www.chambredesecrets.net/squelettes/styles/print.css
Ligne : 123
 ----------
Erreur : r is not defined
Fichier source : http://www.javascriptfr.com/aspnet_client/FreeTextBox3/FTB-FreeTextBox.js
Ligne : 356
 ----------
Erreur : r is not defined
Fichier source : http://www.javascriptfr.com/aspnet_client/FreeTextBox3/FTB-FreeTextBox.js
Ligne : 356

je ne l'ai même pas vu cette bannière....
    je demandais comment elle était définie, et pas d'url !
    parce que s'il faut décortiquer une page complète...

<hr />                Cordialement            Bul         [mon Site]     [M'écrire]
Messages postés
7
Date d'inscription
samedi 21 janvier 2006
Statut
Membre
Dernière intervention
28 avril 2008

Ouais... encore des erreurs... je les ait corrigés sauf dans spip_style.css parce que j'ai besoin d'un accès ftp que je ne pourrais avoir que dans 15 min...

Concernant la banniere je l'ai définie en css avec la propriété background-image pour le bloc bandeau(c'est un id pas une class).

voila le code :
#bandeau
{
 background-color: #2C2C2C;
 background-image: url(http://chambredesecrets.net/squelettes/bancds.JPG);
 position: relative;
 height: 163px;
 width: 100%;
 overflow: hidden;
}
Messages postés
13616
Date d'inscription
jeudi 13 février 2003
Statut
Membre
Dernière intervention
15 octobre 2013
33
pas un expert, mais je ne vois aucune différence IE7, FF, K-Meleon....
( même si comme ici, la bannière "déborde" pour tous les navigateurs )

<style>
#bandeau
{ background-image: url(http://chambredesecrets.net/squelettes/bancds.JPG);
   height: 163px;
}
</style>

exemple

et pourquoi pas une image... toute bête ?

exemple

<hr />                Cordialement            Bul         [mon Site]     [M'écrire]
Messages postés
13616
Date d'inscription
jeudi 13 février 2003
Statut
Membre
Dernière intervention
15 octobre 2013
33
l'image avec les attributs comme tu veux, mais sans background-image   ;o)
<hr />                Cordialement            Bul         [mon Site]     [M'écrire]
Messages postés
3472
Date d'inscription
lundi 16 juillet 2007
Statut
Membre
Dernière intervention
28 février 2014
33
Bon ba comme depuis tout a l'heure tu fais tout le boulo, je te laisse le sujet, quelque chose me dit que tu viens de résoudre le mystère, lol !

a++

Si t'a besoin d'aide, MP !!!
Messages postés
7
Date d'inscription
samedi 21 janvier 2006
Statut
Membre
Dernière intervention
28 avril 2008

ma parole ! ca marche bultez en mettant une image en !
bon je pers un peu de qualité mais c'est pas trop grave !

reste plus que les quelques problemes entre ie7 et firefox,peux tu m'aider à les résoudre ou je fait un nouveau sujet (pour que ce soit mieux rangé) ?
Messages postés
469
Date d'inscription
mercredi 9 janvier 2002
Statut
Membre
Dernière intervention
20 février 2017
5
Je suis d'accord avec Bultez sur le coup, background-image n'a pas d'attribut de taille aussi, il n'est pas possible de l'utiliser dans ce cas !
d'ou l'image !
Dans la méthode que j'ai écrite, je respecte le ratio (suite à des problèmes sur un projets de présentation photo, je n'ai pas eu d'autre choix), sinon, l'image présenté est déformée !

[o-_-o]
Messages postés
3472
Date d'inscription
lundi 16 juillet 2007
Statut
Membre
Dernière intervention
28 février 2014
33
tiens, je te l'avais dit bultez tu viens de résoudre le mystère !!! lol !
Met tes autres problème ici, on va essayer de les résoudre et si on y arrive pas tu reposte (ça m'étonerai, bultez trouve toujours la réponse au question les plus compliqués) !!

++

Si t'a besoin d'aide, MP !!!
Messages postés
7
Date d'inscription
samedi 21 janvier 2006
Statut
Membre
Dernière intervention
28 avril 2008

Zobibol, je vais essayer ta méthode tout à l'air en local, je pense qu'elle donne de bien meilleur résultat(parce qu'il y a plus de lignes :d !). Je te tiens au courant !
Messages postés
469
Date d'inscription
mercredi 9 janvier 2002
Statut
Membre
Dernière intervention
20 février 2017
5
Si tu veux encore plus de ligne c'est faisable ;o) , mais la maintenance, je bonjour la galère !

[o-_-o]
Messages postés
7
Date d'inscription
samedi 21 janvier 2006
Statut
Membre
Dernière intervention
28 avril 2008

lol, alors je commence :

mes plus gros problemes sont les differences de comptatibilité entre ie7 et ff, la preuve en ce moment, sur ie7 tout va bien mais il y a un gros décalage du #bloc-content.

Sur ff ca part en cacahouète !

Voila les sources :

base.css :

#page
{
 position: absolute;
 background-color: #2C2C2C;
 font: "Calibri", "Segoe UI", Trebuchet MS, Arial, Tahoma, 'Helvetica Neue', Helvetica, Geneva, Lucida, sans-serif, "Comic sans MS";
 width: 100%; /* ou 100% pour largeur fluide pleine largeur */
}
#dermenu
{
 float: left;
 position: relative;
 margin-top: 41x;
 top: 33px;
 left: 1px;
 width: 14%;
}
#bloc-contenu
{
 position: relative;
 background-image: url(http://chambredesecrets.net/squelettes/parchemin.jpg);
 width: 55%;
 margin-top: 60px;
 margin-left: 10%;
 padding-top: 5%;
 padding-left: 2%;
 padding-right: 6%;
}
#bloc-content
{
 position: relative;
 background-image: url(http://chambredesecrets.net/squelettes/parchemin.jpg);
 width: 59%;
 margin-left: 10%;
 margin-top: 130px;
 padding-left: 2%;
 padding-right: 6%;
}
#right
{
 position: relative;
 color: black;
 float: right;
 width: 20%;
 background-image: url(http://chambredesecrets.net/squelettes/parchemin.jpg);
 height: auto;
 margin-top: 60px;
 margin-right: 10px;
 margin-right: 10px;
}
.droite
{
 margin: 3% 3% 3% 3%;
 padding: 4% 4% 4% 4%;
}
.carticle
{
 background-image: url(http://chambredesecrets.net/squelettes/plight.jpg);
}
#bas   /* (inc/inc-bas.html) */
{
 width: 60%;
 position: relative;
 margin-right: 20%;
 margin-left: 20%;
 text-align: center;
 color: black;
}




.m_t {
 background: transparent url('../images/m_t.jpg') top left repeat-x;
 height: 13px;
}
.m_tl {
 float: left;
 background: transparent url('../images/m_tl.jpg') 0 0 no-repeat;
 width: 19px;
 height: 13px;
}
.m_tr {
 float: right;
 background: transparent url('../images/m_tr.jpg') 0 0 no-repeat;
 width: 19px;
 height: 13px;
}
.m_ml {
 background: transparent url('../images/m_ml.jpg') 0 0 repeat-y;
}
.m_mr {
 background: transparent url('../images/m_mr.jpg') right 0 repeat-y;
}
.m_b {
 background: transparent url('../images/m_b.jpg') 0 bottom repeat-x;
 height: 13px;
}
.m_bl {
 float: left;
 background: transparent url('../images/m_bl.jpg') 0 bottom no-repeat;
 width: 19px;
 height: 13px;
}
.m_br {
 float: right;
 background: transparent url('../images/m_br.jpg') right bottom no-repeat;
 width: 19px;
 height: 13px;
}



right.html(le bloc de droite)




Brèves actualités

 

  

  

 

 









  

#TITRE

     

       

       

#TEXTE

 
[#URL_PAGE{v_forumbreve,id_breve= #ID_BREVE}
[(#TOTAL_BOUCLE) [(#TOTAL_BOUCLE| == {1}|?{commentaire,commentaires})]]
<//B_combien>]
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
[[(#PARAMETRES_FORUM|url_reponse_forum)] Commenter]

  
&nbsp;



inc-sommaire-articles.html(le bloc principal de la page(au milieu))




#CACHE{600}

La Chambre des Secrets, site d'actualité sur Harry Potter et son univers.
Sur la Chambre des Secrets, trouvez tout ce dont vous voulez savoir sur Harry Potter !

   
    #ANCRE_PAGINATION

[(#LOGO_ARTICLE_RUBRIQUE|right||reduire_image{140,190})]
 

  

  

 

 

  

     
[#URL_ARTICLE
[(#TITRE|image_typo)]

]

     

       écrit le [(#DATE|nom_jour)] [(#DATE|affdate)] par [(#LESAUTEURS|textebrut)] à [(#DATE|heures)]h[(#DATE|minutes)] et [(#DATE|secondes)] secondes
     
<!-- detail -->
     

       

       
#TEXTE

[#URL_PAGE{v_forum,id_article=#ID_ARTICLE}
[(#TOTAL_BOUCLE) [(#TOTAL_BOUCLE| =={1}|?{commentaire,commentaires})]]
<//B_combien>]
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
Laisser un commentaire

  
&nbsp;
  
&nbsp;

    [

     

        (#PAGINATION)
     

   
]
   
    <//B_article_langue>



inc-menu-droite.html(le menu de gauche en jquery accordion)






   







    <li>[# Partenaires]
     
      <li>http://anti-ewatson.oldiblog.com">Anti EWatson</li>
<li>[</li>
      <li>[
     
    </li>
         <li>[# Newsletter]







     
      <li>#FORMULAIRE_ABONNEMENT

</li>
     
    </li>
    <li>
     [# Collaborer]
     
      <li>Proposer un article</li>
     
    </li>
    <li>
     [# Publicité]
     
      <li><script type="text/javascript"><!--
google_ad_client = "pub-6421971115776483";
/* 120x240, date de création 08/04/08 */
google_ad_slot = "4942641424";
google_ad_width = 120;
google_ad_height = 240;
//-->
</script>
<script type="text/javascript"
src="
http://pagead2.googlesyndication.com/pagead/show_ads.js
">
</script>
</li>
     
    </li>
   
  



MenuHorizontal.html(le menu du haut)





<!-- script du menu -->
<script type="text/javascript" src="#URL_SITE_SPIP/squelettes/dynMenu.js"></script>
 <!-- détéction du navigateur -->
<script type="text/javascript" src="#URL_SITE_SPIP/squelettes/browserdetect.js"></script>

    <li>#URL_SITE_SPIP
 
 <li>#URL_RUBRIQUE
 
    <li>

       
  
  <li>#TITRE</li>
  
   
    </li>
    <li>

       
            <li>[

http://forum.chambredesecrets.net/">Le
]
Forum</li>
            <li>[

http://galerie.chambredesecrets.net/">La
]
Galerie d'images</li>
       
    </li>
    <li>

       
  
  <li>#TITRE</li>
  
       
    </li>
    <li>

       
  
  <li>#TITRE</li>
  
       
    </li>
    <li>

       
  
  <li>#TITRE</li>
  
       
    </li>








<script type="text/javascript">
    initMenu();
</script>



inc-bandeau.html(la banniere)



#CACHE{8000}

http://chambredesecrets.net/squelettes/bancds.JPG
"
        style="width:100%">

Merci !
Messages postés
3472
Date d'inscription
lundi 16 juillet 2007
Statut
Membre
Dernière intervention
28 février 2014
33
oui mais en fait firefox respecte les standard a ce qu'il parait alors que IE ne les respecte pas assez il parait donc peut être que bultez aura une autre solution sinon fait deux feuille de style une pour IE et une pour ff :

et dans le head tu met un truc du genre :

<!-- IF [IE] -->
<stylesheet type="text/css" src="chemin" />
<!-- END IF -->

a++

Si t'a besoin d'aide, MP !!!
Messages postés
3426
Date d'inscription
lundi 26 décembre 2005
Statut
Membre
Dernière intervention
14 janvier 2011
14
Bonjour à tous,
Pour la bannière, la soluce de
Zobibol est bien plus élégante pour les
raisons qu'il a évoqué, mais perso je mettrai un appel de la fonction sur le
resize du document.

Pour le reste, testes en supprimant le DOCTYPE
STRICT qui lui reproduit presque fidélement ce que tu demandes et regarde les
points qui changent et oubli ce qui ne change pas.

;O)