Aller au contenu

  • Pas encore inscrit ?

    Pourquoi ne pas vous inscrire ? C'est simple, rapide et gratuit.
    Pour en savoir plus, lisez Les avantages de l'inscription... et la Charte de Zébulon.
    De plus, les messages que vous postez en tant qu'invité restent invisibles tant qu'un modérateur ne les a pas validés. Inscrivez-vous, ce sera un gain de temps pour tout le monde, vous, les helpeurs et les modérateurs ! :wink:

Intégrer SimpleViewer dans HTML

domi et minouche

Par domi et minouche
dans Programmation

 Partager

Messages recommandés

domi et minouche Member

domi et minouche

Posté(e)
Posté(e)

Bonjour.

Je voudrais intégrer simpleviewer dans ma page html (simpleviewer généré par sv BUIDER, mais mes photos sont trop hautes dans ma page (visible ici: http://conteuse.minouche.perso.sfr.fr/ à la page photos.

 

Je ne sais pas quelle ligne modifier ni dans quel dossier.

 

Deuxième problème: sous Ie cette page n' s'affiche pas bien

Troisième problème, malgré ma div id="bloc-page et quelque soit la valeur de #bloc-page dans mon css la page s'affiche sur tout la largeur.

 

Pouvez vous aider un débutant qui rame !!!!!

 

 

Merci

  • Modérateurs
Dylav Devil Member !

Dylav

Posté(e)
  • Modérateurs
Posté(e)

Bonjour domi et minouche,

 

Tout tourne autour de la ligne 26 de ta page HTML,

 

[01] <!DOCTYPE html>

[02] <html style="overflow: hidden; height: 100%; margin: 0px; padding: 0px;"><head>

[03] <meta http-equiv="content-type" content="text/html; charset=UTF-8">

[04] <meta charset="utf-8">

[05] <link rel="stylesheet" href="photos_fichiers/stylediapo.css">

[06] <title> Mes photos</title>

[07] <style media="screen" type="text/css">#svcp-0-sv-mobile-flash-swf {visibility:hidden}</style></head>

[08]

[09] <body style="height: 100%; overflow: hidden; margin: 0px; padding: 0px;">

[10] <div id="page">

[11] <header>

[12] <div id="titre">

[13] <h1>Minouche Auteur Conteuse</h1>

[14] </div>

[15] <div id="logo">

[16] <img src="photos_fichiers/sorciere.gif" alt="Sorcière" id="sorciere">

[17] </div>

[18] </header>

[19] <!--START SIMPLEVIEWER EMBED -->

[20] <script type="text/javascript" src="photos_fichiers/simpleviewer.js"></script><script type="text/javascript" src="photos_fichiers/swfobject.js"></script><link rel="stylesheet" href="photos_fichiers/simpleviewer.css" type="text/css">

[21] <script type="text/javascript">

[22] simpleviewer.ready(function () {

[23] simpleviewer.load('sv-container', '100%', '100%', 'transparent', true);

[24] });

[25] </script>

[26] <div style="width: 100%; height: 100%; position: static;" id="sv-container"><div style="height: 596px; width: 847px;" id="svcp-0-sv-mobile-flash" class="cls-mobile-flash"><object style="visibility: visible;" id="svcp-0-sv-mobile-flash-swf" data="photos_fichiers/simpleviewer.swf" type="application/x-shockwave-flash" height="100%" width="100%"><param value="true" name="allowfullscreen"><param value="always" name="allowscriptaccess"><param value="transparent" name="wmode"><param value="#222222" name="bgcolor"><param value="embedurl=http://conteuse.minouche.perso.sfr.fr/photos.html" name="flashvars"></object></div></div>

[27] <!--END SIMPLEVIEWER EMBED -->

[28] <nav>

[29] <ul>

[30] <li> <a href="http://conteuse.minouche.perso.sfr.fr/index.html"> Accueil</a></li>

[31] <li> <a href="http://conteuse.minouche.perso.sfr.fr/contes.html"> Contes</a></li>

[32] <li> <a href="http://conteuse.minouche.perso.sfr.fr/presse.html"> Presse</a></li>

[33] <li> <a href="http://conteuse.minouche.perso.sfr.fr/photos.html"> Photos</a></li>

[34] <li> <a href="http://conteuse.minouche.perso.sfr.fr/liens.html"> Liens</a></li>

[35] </ul>

[36] </nav>

[37] </div>

[38]

[39] </body></html>

 

que nous allons plutôt présenter ainsi…

 

<div style="width: 100%; height: 100%; position: static;" id="sv-container">
<div style="height: 596px; width: 847px;" id="svcp-0-sv-mobile-flash" 
    class="cls-mobile-flash">
<object style="visibility: visible;" id="svcp-0-sv-mobile-flash-swf"
    data="photos_fichiers/simpleviewer.swf"
    type="application/x-shockwave-flash" height="100%" width="100%">
<param value="true" name="allowfullscreen">
<param value="always" name="allowscriptaccess">
<param value="transparent" name="wmode">
<param value="#222222" name="bgcolor">
<param value="embedurl=http://conteuse.minouche.perso.sfr.fr/photos.html"
    name="flashvars">
</object>
</div>
</div>

On trouve donc un premier bloc <div> qui englobe (en tout et pour tout) un second bloc <div> (l'un des deux est donc inutile, si ce n'est qu'ils sont peut-être tous deux référencés dans le script JavaScript). Ce second bloc contient un objet flash.

 

Le premier bloc est décrit comme devant occuper tout l'espace disponible, grâce aux paramètres width et height à 100%. Les dimensions du second bloc (intérieur) sont imposées (847 pixels sur 596), et imposeront donc une taille au moins égale au premier bloc. Enfin, l'objet flash prendra tout l'espace disponible dans le second bloc.

 

À partir de ces indications, essaie de jouer sur les dimensions du bloc intérieur, pour constater les changements de comportement de ta page HTML… ;)

domi et minouche Member

domi et minouche

Posté(e)
  • Auteur
Posté(e) (modifié)

:super: Bonjour Dylav et merci pour ton aide.

 

Super ça marche, c'est à la bonne hauteur et à la bonne taille.

Reste plus que les modifs pour l'affichage dans IE et continuer mon site mais ça c'est autre chose ;;;;;

 

Un grand merci.

 

Domi

Modifié par domi et minouche

Rejoindre la conversation

Vous pouvez publier maintenant et vous inscrire plus tard. Si vous avez un compte, connectez-vous maintenant pour publier avec votre compte.
Remarque : votre message nécessitera l’approbation d’un modérateur avant de pouvoir être visible.

Invité
Répondre à ce sujet…

×   Collé en tant que texte enrichi.   Coller en tant que texte brut à la place

  Seulement 75 émoticônes maximum sont autorisées.

×   Votre lien a été automatiquement intégré.   Afficher plutôt comme un lien

×   Votre contenu précédent a été rétabli.   Vider l’éditeur

×   Vous ne pouvez pas directement coller des images. Envoyez-les depuis votre ordinateur ou insérez-les depuis une URL.

×
 Partager
Aller sur la liste des sujets

  • En ligne récemment   0 membre est en ligne

    • Aucun utilisateur enregistré regarde cette page.
×
×
  • Créer...