Sujet Précédent Sujet Suivant

Banniere selon résolution

potter64 Messages postés 7 Date d'inscription samedi 21 janvier 2006 Statut Membre Dernière intervention 28 avril 2008 - 28 avril 2008 à 13:18
PetoleTeam Messages postés 3426 Date d'inscription lundi 26 décembre 2005 Statut Membre Dernière intervention 14 janvier 2011 - 28 avril 2008 à 17:59
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

Réponse 1 / 19
cs_bultez Messages postés 13615 Date d'inscription jeudi 13 février 2003 Statut Membre Dernière intervention 15 octobre 2013 30
28 avril 2008 à 13:26
>>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]
0
Réponse 2 / 19
potter64 Messages postés 7 Date d'inscription samedi 21 janvier 2006 Statut Membre Dernière intervention 28 avril 2008
28 avril 2008 à 13:33
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 !
0
Réponse 3 / 19
cs_bultez Messages postés 13615 Date d'inscription jeudi 13 février 2003 Statut Membre Dernière intervention 15 octobre 2013 30
28 avril 2008 à 14:00
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]
0
Réponse 4 / 19
nicomilville Messages postés 3472 Date d'inscription lundi 16 juillet 2007 Statut Membre Dernière intervention 28 février 2014 36
28 avril 2008 à 14:12
bultez++,

que dire de plus !!!

Si t'a besoin d'aide, MP !!!
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Réponse 5 / 19
Zobibol Messages postés 469 Date d'inscription mercredi 9 janvier 2002 Statut Membre Dernière intervention 20 février 2017 6
28 avril 2008 à 15:03
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]
0
Réponse 6 / 19
potter64 Messages postés 7 Date d'inscription samedi 21 janvier 2006 Statut Membre Dernière intervention 28 avril 2008
28 avril 2008 à 15:54
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...
0
Réponse 7 / 19
cs_bultez Messages postés 13615 Date d'inscription jeudi 13 février 2003 Statut Membre Dernière intervention 15 octobre 2013 30
28 avril 2008 à 16:07
>>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]
0
Réponse 8 / 19
potter64 Messages postés 7 Date d'inscription samedi 21 janvier 2006 Statut Membre Dernière intervention 28 avril 2008
28 avril 2008 à 16:30
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;
}
0
Réponse 9 / 19
cs_bultez Messages postés 13615 Date d'inscription jeudi 13 février 2003 Statut Membre Dernière intervention 15 octobre 2013 30
28 avril 2008 à 16:49
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]
0
Réponse 10 / 19
cs_bultez Messages postés 13615 Date d'inscription jeudi 13 février 2003 Statut Membre Dernière intervention 15 octobre 2013 30
28 avril 2008 à 16:51
l'image avec les attributs comme tu veux, mais sans background-image   ;o)
<hr />                Cordialement            Bul         [mon Site]     [M'écrire]
0
Réponse 11 / 19
nicomilville Messages postés 3472 Date d'inscription lundi 16 juillet 2007 Statut Membre Dernière intervention 28 février 2014 36
28 avril 2008 à 16:53
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 !!!
0
Réponse 12 / 19
potter64 Messages postés 7 Date d'inscription samedi 21 janvier 2006 Statut Membre Dernière intervention 28 avril 2008
28 avril 2008 à 16:54
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é) ?
0
Réponse 13 / 19
Zobibol Messages postés 469 Date d'inscription mercredi 9 janvier 2002 Statut Membre Dernière intervention 20 février 2017 6
28 avril 2008 à 16:56
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]
0
Réponse 14 / 19
nicomilville Messages postés 3472 Date d'inscription lundi 16 juillet 2007 Statut Membre Dernière intervention 28 février 2014 36
28 avril 2008 à 16:58
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 !!!
0
Réponse 15 / 19
potter64 Messages postés 7 Date d'inscription samedi 21 janvier 2006 Statut Membre Dernière intervention 28 avril 2008
28 avril 2008 à 17:00
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 !
0
Réponse 16 / 19
Zobibol Messages postés 469 Date d'inscription mercredi 9 janvier 2002 Statut Membre Dernière intervention 20 février 2017 6
28 avril 2008 à 17:04
Si tu veux encore plus de ligne c'est faisable ;o) , mais la maintenance, je bonjour la galère !

[o-_-o]
0
Réponse 17 / 19
potter64 Messages postés 7 Date d'inscription samedi 21 janvier 2006 Statut Membre Dernière intervention 28 avril 2008
28 avril 2008 à 17:16
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 !
0
Réponse 18 / 19
nicomilville Messages postés 3472 Date d'inscription lundi 16 juillet 2007 Statut Membre Dernière intervention 28 février 2014 36
28 avril 2008 à 17:47
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 !!!
0
Réponse 19 / 19
PetoleTeam Messages postés 3426 Date d'inscription lundi 26 décembre 2005 Statut Membre Dernière intervention 14 janvier 2011 17
28 avril 2008 à 17:59
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)
0

Discussions similaires

Bannière publicitaire déroulante verticalement
quentin2b -
Gentlemenchris -

5 réponses
Utilitaire de résolution de problèmes
thomas_002003 -
pysco68 -

1 réponse
Overload resolution failed because no accessible 'Split' can be called without a
cs_flash007 -
casy -

1 réponse
problème de résolution
0redou -
matkano -

6 réponses
Probleme de resolution d'ecran d'ordinateur
Maybdb -
jmfmarques -

3 réponses
Rejoignez-nous