5568 sujets

Sémantique web et HTML

IFrame et Objects : faire disparaitre les scrollbar.

Bonsoir,

Etant jeune padawan du dev web, je me suis mis en tete de faire mon blog grace a la superbe plate-forme DotClear.
Dans mon blog donc, j'ai décidé d'intégrer une radio.blog à la sidebar de droite afin de faire partager à tous mes coups de coeur.
Le problème c'est que je souhaite faire un site valide XHTML 1.0 Strict et que l'intégration par défaut d'une telle radio requière d'après plein de conseils vus ça et là ce genre de code :
<iframe src="radio.blog/index.php" name="radio" scrolling="no" frameborder="0" width="220" height="320"></iframe>

Comme ce la ne passe pas en Strict mais en Transitionnal, j'ai donc deux options : soit faire le fénéant et juste changer ma déclaration de XHTML, soit méditer un peu de code. N'étant pas fénéant je prends la deuxième option.
J'ai donc eu comme autre conseil (vu ici, le post de chiwalou) de mettre en lieu et place de mon iframe ce genre là de code :
<object data="radio.blog/index.php" type="text/html" />

Lorsque je fais cela je suppose être valide XHTML Strict mais le problème ce sont les horribles barres de scrolling que le navigateur met autour de ma radio (FF, Opera, IE même combat pour une fois). Ya t'il un moyen (soit dans le <div> soit dans le <object> de virer ces horribles bandes ?
Mon site
Bonjour Adam Hunter et bienvenue à toi ici Smiley smile

La propriété que tu recherches s'appelle overflow.


object {
   overflow: hidden;
}
Adam Hunter a écrit :

J'essaye donc d'intégrer à mon css ce code mais aucun résultat. Smiley bawling

C'est pourtant le code que tu cherches.

Je ne vois pas la modification en ligne !? (je ne peux donc pas voir où tu t'es gouré)
Modifié par Stephan (22 Jan 2006 - 00:20)
Le problème c'est que ça ne marche ni pour IE, ni pour Opera... Est ce normal ?
Pire encore, IE "coupe" l'interprétation de la sidebar à l'object e question Smiley bawling
Modifié par Adam Hunter (22 Jan 2006 - 00:23)
Essais de donner des dimensions à ton <object>.

<edit />
Oups. C'est fait. Désolé. Smiley confused
Modifié par Stephan (22 Jan 2006 - 00:39)
Aucun changement toutefois malgré la technique de clb56.
J'ai bien mis dans mon css les dimensions de mon object et mis le overflow en hidden, en auto pour body, opera et IE continuent de m'afficher les jolies Smiley biggol barre de scrolling.
Salut,

quand tu utilises <object> pour intégré un document html à ta page tu fais purement une iframe.

Partons donc de cela :

le scroll qui apparait est du au fait qu'intégrant une page html on intègre du coup toutes ses caractéristiques dont le fait qu'elle a son propre scrolling. C'est bien celui ci qu'il s'agit de faire disparaitre. C'est donc à la page mise dans la frame qu'il faur appliquer le style :


body {
overflow:auto;
}


N'ayant pas pratiqué ce genre de fantaisies (au demeurant bien agréables et pour peu qu'on y prenne quelques soins peu problématiques) depuis un certain temps, je ne me souviens plus trop quelles précautions en termes de css doivent être prises dans le document contenant le code de l'iframe (ou de l'object en l'occurence).

Un exemple en ligne de l'usage que j'ai pu en faire (suivre le lien "retour site" en bas de page pour voir le document lié inséré via object).
Modifié par clb56 (22 Jan 2006 - 01:54)
J'ai bien compris ces recommandations et de ce fait j'ai décrit dans le style.css relatif au index.php du radioblog la chose suivante :
body{
margin: 0;
padding: 0;
background-color : black;
color : white;
overflow:auto;
}

Tout le reste à part overflow y était déjà.
Donc je lance mon site. Même résultat qu'avant, l'overflow est affiché sous Opera et IE. Sous FF aucun problème mais il n'y en vait déjà pas quand je ne mettais pas ce code pour le body de la page mise en frame. Smiley bawling
Impossible donc ?
FF serait-il seul à réussir le overflow:hidden. Non pourtant car cette page s'affiche très bien comme il faut avec les 3.
Je vais sans doute me pendre :'(
Modifié par Adam Hunter (22 Jan 2006 - 12:37)
salut,

je viens d'extraire la css liée à la page http://adamhunter.free.fr/blog/radio/index.php


body {
	margin: 0;
        padding: 0;
        background-color : black;
        color : white;
}

img {
    border: 0;
}


Où est la propriété overflow? Où est la propriété border appliquée à l'élément html ? Et finalement sais tu exactement quelle technique tu es en train d'utiliser ?

Pour ce que j'en vois ce n'est pas le cas.

je te conseillerai donc de procéder plus par étapes :

1. Insérer un document via object avec contenu minimal (<p>blablabla</p> suffisant largement. Mais document complet bien sur : dtd, <title>, <meta> ad hoc)
2. Insérer un document avec un contenu plus "lourd" (typiquement un lorem ipsum un peu consistant). En profiter pour comprendre l'effet de la taille graphique de l'élément inséré sur l'apparition du scrolling dans la page insérante (là en effet l'utilisation de la valeur "auto" au lieu de "hidden" pour la propriété overflow est une sécurité très profitable).
3.Tester des cas concrets.

Pour ce qui te concerne le point 1 est très important et j'espère que tu seras capable de t'y astreindre
Modifié par clb56 (22 Jan 2006 - 23:37)
clb56 a écrit :


Où est la propriété overflow? Où est la propriété border appliquée à l'élément html ? Et finalement sais tu exactement quelle technique tu es en train d'utiliser ?


Et bien j'ai fait mes tests en local et n'ai pas pris le temps d'uploader la version avec le overflow. Je n'avais pas précisé désolé. J'avais moi aussi bien envie de tester une insertion d'image toute conne dans mon object.
Je vais suivre tes conseils
Ok,

ce serait bien que tu mettes en ligne le résultat du test simplifié. Sur du concret on voit mieux les problème quand il y en a.

à bientôt donc.
Test simplifié avec juste un <p>Ceci est un test<p> tout con en ligne mon commandant !

En local : j'arrive enfin à avoir un résultat probant en donnant au style.css relatif à ladite radio.blog la valeur hidden à l'attribut overflow.
Pour Opera cela marche nickel, pareil pour Firefox, mais toujours pas IE
Smiley bawling
Modifié par Adam Hunter (23 Jan 2006 - 22:40)
Je ne pourrais pas te détailler le pourquoi du comment mais plutot qu'une vilaine prise de tête j'ai préféré joué du pixel pour faire disparaitre les vilaines barres de défilement...
Résultat : I WIN... PERFECT !
Valide W3C strict, même pas mal.
Je suis pour l'instant satisfait du résultat et honnêtement, vous vyez la différence maintenant ?
Adam Hunter a écrit :
j'ai préféré joué du pixel pour faire disparaitre les vilaines barres de défilement...


Oui c'était dans mon point 2 si tu t'en souviens. sauf que tu as surtout joué du overflow:hidden; au lieu de auto !

Tricheur va Smiley lol

Sinon je pense que tu as remarqué que l'objet radioblog a une facheuse tendance à ne pas être très stable dans la page, il flotte un peu lors du scrolling de celle ci. C'est dire toutes les limites de cette technique.

bonne continuation Smiley smile
Sujet clos
Aller à