Discussion :

[bond70]

Bonjour à tous,

Voici la page de mon site qui pose problème : http://tinyurl.com/ntzz6vp
(Il s'agit d'un site Joomla)

Comme vous pouvez le remarquer, il s'agit d'une page Iframe issue d'un serveur externe à mon site : http://tinyurl.com/psbvkhz

Le problème que je rencontre, c'est quand je réduis en largeur la fenêtre du navigateur, le contenu de mon Iframe est coupé !

Pouvez-vous m'indiquer comment régler ce problème ?

Merci à vous !

[arthur57]

Bonjour,

C'est peut-être parce que le css de cette page http://quickdentalweb.com/_cabinet_m...ire-la-defense est en pixel ?

Cordialement.

[bond70]

Bonjour,

De quel élément CSS s'agit-il exactement ?

Merci !

[arthur57]

Bonjour,

Ici http://quickdentalweb.com/html_templ...le-ammanou.css

#page width:1000px;
#bandeau-sup width:980px;
#menu width:980px;
etc..

Logiquement, si c'est en pixel, ca seras coupé si tu réduis ta page (ou que tu es sur tablette/smartphone).

Cordialement.

[bond70]

Ok merci !

Vous me conseiller d'utiliser quelle unité de mesure pour éviter ce genre de coupures ?

Merci !

[arthur57]

Pour qu'un élément soit adaptable sur différentes tailles d'écran, il est possible de faire un affichage "intelligent" comme ceci :

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
div {
  width: 80%;
  max-width: 1000px;
  min-width: 700px;
}

Par exemple le <div> va occuper 80% de la largeur de l'écran.
Si la largeur dépasse 1000px, la taille du div seras remise à 1000px.
Si la largeur est inférieure à 700px, sa taille seras remise à 700px.

Cordialement.

[bond70]

Si je comprends bien dans mon cas de figure : "Iframe coupée quand la fenêtre est trop petite", vous me conseillez de préciser au moins un "min-width:" pour éviter ce genre de problème.

Merci !

[arthur57]

Dans mon exemple si la taille de la fenetre est comprise entre 700px et 1000px, le div prendra 80% de l'écran. A toi de modifier les valeurs de max-width et min-width pour que l'affichage reste correct.
Pense à mettre le sujet en résolu, et bonne continuation

[bond70]

Bonjour,

Merci pour votre réponse !

Avec Firebug j'ai tenté de faire cela sans succès :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
#contenu-principal .centre {
    background-color: #f9f8f1;
    border: 1px solid #e3ebee;
    padding: 10px;
    width: 80%;
    min-width:700px;
    max-width:1000px;
}

Fichier CSS : http://quickdentalweb.com/html_templ...le-ammanou.css

L'Iframe se coupe toujours quand on réduit la fenêtre...

Merci !

[NoSmoking]

Bonjour,
quoiqu'il arrive tu dépends, sans pouvoir y toucher, au CSS du contenu de l'IFRAME et si j'ai bien vu ce contenu est dimensionné en px, donc en dessous de la valeur ton IFRAME laissera apparaître des scrollBars.

[bond70]

Ok, merci !

Si je comprends bien je dois toucher au CSS de cette page : http://tinyurl.com/ntzz6vp

Et non de cette page : http://tinyurl.com/psbvkhz ?

Merci à vous,

[NoSmoking]

Bizarre...

Comme vous pouvez le remarquer, il s'agit d'une page Iframe issue d'un serveur externe à mon site : http://tinyurl.com/psbvkhz

... j'avais cru comprendre que tu ne pouvais pas modifier la page en IFRAME mais si c'est le cas il te vaut mieux effectivement modifier le CSS de celle ci.

[bond70]

Pardon de m'être mal exprimé !

Oui, je peux modifier la page de source externe.

Pouvez-vous me dire comment modifier le code CSS de cette page source pour régler mon problème d'affichage...car je n'y suis pas arrivé

Merci !!!

[arthur57]

Si c'est bien ce CSS la : CSS

Tu devrais changer ce qui est pourcentage, je remarque notamment : width: 1000px;