heigth 100%

Milkeo · novembre 2014

Bonjour, tout d'abord j'aimerais remercier les créateurs de ce cms formidable, simple et léger. Je suis une adepte de wordpress mais compte bien devenir une adepte de Pluxml.

J'ai actuellement déjà un site crée à ma façon avec un theme trouvé sur w3layouts. J'ai découvert Plugxml ce matin et je souhaiterai pouvoir y transférer mon site. Je pense pouvoir y arriver en changeant un peu la feuille de style mais je rencontre un petit soucie..

Mon site est fait de page référencent des jeux avec la balise height à 100%. J'ai donc ajouté à la feuille de style :

[== CSS ==]
.container2 { height: 100%; background: #a0d468; padding: 20px;}

et ajouté mon jeu dans la div container2 et choisi l'article en full width:

[== JavaScript ==]
<div class="container2">				
	<script type='text/javascript' id=469953>
    (function(d, gn,scriptId){
    var prop = {'agent': 'big-jeux.com', 'bgcolor':'#fff', 'wrapperwidth':'100%', 'wrapperheight':'100%', 'gamewidth':'100%', 'gameheight':'100%', 'fullscreen_on_mobile':'true'};    jsid = 'sgEmbedJS';if( d.getElementById(jsid) ) {embed(d,scriptId,gn, prop); } else {
    var s = d.createElement('script'); s.id = jsid; s.type = 'text/javascript'; s.onload = function(){embed(d,scriptId,gn, prop);};
    s.src='http://publishers.softgames.de/embedder.js'; d.getElementsByTagName('head')[0].appendChild(s);}
    }(document,'sweet-sorter',469953));
</script></div>

Mais cela ne semble pas fonctionner.. y at'il une autre étape que j'aurais loupé ?
Voici la page test: http://jeu.netau.net/index.php?article1/premier-article

Merci pour votre aide

Pio154 · novembre 2014

La taille de ton jeu doit forcément avoir une taille fixe. Car si tu utilises height et width en 100% il faut que son parent/référent ait une taille fixe.

Si ton jeu s'adapte à n'importe quelle résolution, fixe une taille pour le height et width.

En l’occurrence, ton body a une taille maximale de 1200px en largeur. Sauf que ton contenu n'est pas à 1200px mais à 1120px, donc moins les deux marges intérieurs que tu lui as mis. (40px en padding-left/right)

Je te propose donc de fixer le container2 avec :

[== CSS ==]
#container2 {
width: 1080px; /* 1120 - (20px + 20px) MARGES*/
padding: 20px;
height: 1080px; /* 1120 - (20px + 20px) MARGES */
}

Milkeo · novembre 2014

Merci pour ton aide Pio154,
Si j'utilise une taille fixe le contenu ne s'adapte plus, c'est pour cela que je dois utiliser un height à 100%.

Pio154 · novembre 2014

Hmm, je vois que tu as modifié ta page en ligne.

Je parlais de height (hauteur), pas de width (largeur).

Quelle est la hauteur de ton/tes jeux ?

Milkeo · novembre 2014

oui, je test.. les jeux non pas de hauteur, ils sont à 100%

[== JavaScript ==]
<script type='text/javascript' id=469953>
    (function(d, gn,scriptId){
    var prop = {'agent': 'big-jeux.com', 'bgcolor':'#fff', 'wrapperwidth':'100%', 'wrapperheight':'100%', 'gamewidth':'100%', 'gameheight':'100%', 'fullscreen_on_mobile':'true'};    jsid = 'sgEmbedJS';if( d.getElementById(jsid) ) {embed(d,scriptId,gn, prop); } else {
    var s = d.createElement('script'); s.id = jsid; s.type = 'text/javascript'; s.onload = function(){embed(d,scriptId,gn, prop);};
    s.src='http://publishers.softgames.de/embedder.js'; d.getElementsByTagName('head')[0].appendChild(s);}
    }(document,'sweet-sorter',469953));
</script>

Pio154 · novembre 2014

Ton 100% ne se réfère à rien en fait, j'essaie de faire comprendre :

Sur une page vierge, tu peux adapter ton jeu à la page entière height/width à 100%.
Mais lorsque tu l'intègres à un contenu, comme dans ton exemple, dans la news, la largeur prendra effectivement la taille de ton bloc mais en hauteur, il faut le définir.

Un jeu flash par exemple, tu as plusieurs formats, 750x480px; 640x480px; 540x405px etc.
Il faut obligatoirement mettre une valeur fixe.

Et donc, s'ils sont à 100% ils sont adaptables, donc à toi de choisir la valeur fixe.
Si tu utilisais wordpress, comment tu faisais à ce moment là ?

Milkeo · novembre 2014

Cet fois-ci je n'utilise pas wordpress mais un theme trouvé sur le site w3layouts que j'ai refais à ma sauce..et pour que cela fonctionne sur mon site je doit ajouter dans mon head :

[== Indéfini ==]
<style type="text/css">
.container2 { height: 100%; background: #a0d468; padding: 20px;}
</style>

et là à ce moment là, le jeu s'affiche à 100% et est à bonne dimension sur tablette, smartphone et pc. Si je met une valeur fixe, ce n'est plus le cas..

Je tient à préciser que j'ai mis des jours à trouver comment l'intégrer comme il faut pour vista!! car sur 7 le script seul affiche le jeu parfaitement à 100% sans que j'ajoute quoi que ce soit.. une vrai plait au bout du compte..

Ce qu'il faudrait, c'est que je puisse ajouter cette balise de style dans la page d'édition de la full page. J'ai regarder cette page avec notepad et je ne vois pas comment l'intégrer..

Milkeo · novembre 2014

non, non, je n'utilise pas wordpress .. c'est mon theme à moi

voici une page de jeu http://boulbaga.com/jeu-gem-crush

Pio154 · novembre 2014

D'accord, je comprends !

Ton container2 se trouve à la racine de body, c'est normal qui prend une hauteur à 100% tandis que dans le contenu de l'article, il se réfère au div.full-width.

Milkeo · novembre 2014

ok, mais comment faire pour qu'il se refaire à container2 ?

Pio154 · novembre 2014

Gwen a écrit:

ok, mais comment faire pour qu'il se refaire à container2 ?

Tu ne peux pas, la logique du CSS pour les pourcentages est de pouvoir adapter la hauteur ou largeur en fonction du parent.

D'ailleurs sur ton ancien site, c'était pas jolie parce que le height:100% sur le body lui se référer à la hauteur de la fenêtre disponible.
Je te propose de cliquer sur un lien avec javascript et d'ouvrir le div en position:fixed ou absolute;height:100%;width:100%. Comme ça là, le jeu sera en plein écran.

Milkeo · novembre 2014

Je tiens à ce que les jeux soient sur la page..tant pis.
En tous les cas, merci pour ta patience et ton aide

Un chose est sur, c'est que j'utiliserai PluXml pour un autre site .. vraiment super.. :cool:

Milkeo · novembre 2014

Jormun a écrit:

tu peux le faire facilement en javascript.

Ton script devra :
- Déterminer la hauteur disponible (hauteur du navigateur)
- Modifier la hauteur de ton jeu
- Se lancer une fois que la page est chargée
- Se lancer lorsque l'utilisateur redimensionne son navigateur

C'est assez simple a faire si tu utilises jquery (j'ai vu que tu l'utilisais sur ton ancien site).

Merci Jornum, est ce que tu aurais plus d'info, un site un tuto ...? car la je comprend pas tout ..

Pio154 · novembre 2014

A toi de voir sinon pour utiliser Javascript. OpenClassRooms peut être un bon allié !

[== JavaScript ==]
# http://api.jquery.com/height/

var hauteurDuNavigateur = $(window).height(); // retourne la hauteur de navigateur. (je crois)

$('#container2').height(hauteurDuNavigateur);

Milkeo · novembre 2014

je suis un vrai boulet désolé...je ne voit pas pas du tout vers où me diriger pour trouver un tel script..est ce ca peut me guider ? : http://api.jquery.com/height/. J'ai testé le srcipt en ajoutant le mien mais ca ne fonctionne pas pour le height à 100%..

Milkeo · novembre 2014

du coup je vais faire une page description avec un lien vers le jeu. En effet si je met une valeur fixe, cela s'adapte à n'importe quel android ou smartphone, mais comme j'en est pas, je peu pas tester..

Voilà, je pense que je sujet est clos..je vous remercie encore pour votre aide

heigth 100%

Réponses