Forum d'entraide PHPFrance

Bonjour,

J'ai réalisé un site que je voulais voir respecter les standards aux plus proches, compatible avec les différents navigateurs et visible par les internautes avec une résolution 800x600/1024x768 et c'est le cas mais j'ai eu une désagréable surprise quand j'ai passé mon site dans une résolution type 16:9 sur un pc portable par exemple (1680x1050 sur un dell latitude d830). Le site se trouve écrasé et le contenu explose des div (ca dépasse en clair). Comment faire ? Où ai-je merdé ?
Vous avez une idée ou la soluce pour remédier au problème svp merci.

Merci de votre aide.

Mega

Ma boule de cristal est en panne... Un ptit lien, sivouplé.

pardon

C'est ici (pseudo prod, je finalise des trucs

)

Merci de ton aide

Mega

Je viens de tester sous Firefox 3, IE 6 & 7, Opera, Safari (tout sous win xp) : aucun souci, à n'importe quelle résolution et n'importe quel niveau de zoom, sur la page d'accueil.

Quel est le navigateur et le système du portable sur lequel tu as constaté le souci ?

Quel est le navigateur et le système du portable sur lequel tu as constaté le souci ?

IE 7.0.5730.13CO
Windows XP pro pack 3
Résolution 1680x1050.

Merci de prendre du temps pour moi. C'est frustrant comme problème...

Mega

Je n'arrive malheureusement pas à reproduire ton problème chez moi (je n'ai pas xp sp3, ni cette version d'ie7). Je laisse la main à d'autres pour t'aider

Pas de soucis chez moi non plus avec IE8 et XP SP3

IE 7.0.5730.13CO
Windows XP pro pack 3
Résolution 1680x1050.

J'ai rigoureusement la même résolution écran, la même version d'IE
et... tout s'affiche très bien.

Bonjour et merci de votre aide à tous.

Ci-joint un print écran pour vous montrer le résultat obtenu :
http://vls76.free.fr/Doc1.doc

Le texte déborde des div comme vous pouvez le voir

Mega

Personne ne voit le truc ? J'ai pensé aussi à la taille du texte dans Affichage > taille du texte.
Si lui met en "Petite" c'est ok. Il était en normal, car si on met taille du texte en grand ca explose les div. Vous aussi ?

Autre chose, une petite ( : est-ce que la vidéo d'intro rame chez vous ? J'ai fait un import flv sous flash classique et par moment ca mouline, mais pas chez tout le monde one more time. Une idée ? Un preload ?

Si lui met en "Petite" c'est ok. Il était en normal, car si on met taille du texte en grand ca explose les div. Vous aussi ?

Preuve, s'il en est, qu'il faut veiller à fluidier le design autant que possible en CSS (par exemple, en privilégiant min-height à height, voire en laissant les blocs libres de toute hauteur), afin qu'il s'étire lorsque la taille de police s'agrandit.

Bonsoir, excuse moi Victor Brito je suis dans le gaz, j'ai pas tout saisi...

En gros, si tu as un petit texte dans un div

Code : Tout sélectionner

<div>ton court texte</div>

et que tu fixes une hauteur à ce div

Code : Tout sélectionner

div {
  color: white;
  background: black;
  height: 20px;
}

Eh bien, lorsque tu agrandis la taille de police sous IE (ou sous Safari), le texte déborde de son élément et, vu que je l'ai coloré en blanc en CSS, il risque d'être en partie invisible si le blanc est la couleur du fond qui entoure le div en question.

Afin que le div puisse s'étirer quand on agrandit la taille de police, deux solutions sont envisageables :

tu ne fixes aucune hauteur au div (autrement dit, tu supprimes la ligne height: 20px de ta règle CSS) et le div aura une hauteur s'adaptant automatiquement au contenu (pour rappel, la propriété height a une valeur par défaut, qui est auto),
si une hauteur doit être spécifiée, il faut que ce soit une hauteur minimale (autrement dit, tu remplaces height par min-height).

Code : Tout sélectionner

div {
  color: white;
  background: black;
  min-height: 20px;
}

Pour IE 6, qui ignore min-height, mais interprète height comme si c'était min-height (ce qui n'est pas un comportement conforme au standard CSS), une feuille de style supplémentaire appelée au moyen d'un commentaire conditionnel apportera le correctif nécessaire.

Code : Tout sélectionner

/* Feuille de style à part pour IE 6 seulement */
div {
  height: 20px;
  /* Dans le cas d'IE 6, la propriété height peut être utilisée
  pour la raison donnée ci-dessus */
}

Pour résumer, il y a, en CSS, trois propriétés gérant la hauteur :

min-height, indiquant une hauteur minimale (valeur par défaut : 0) : si le contenu dépasse cette hauteur minimale, la hauteur réelle du bloc s'adapte au contenu, qui ne déborde donc pas ;
max-height, indiquant une hauteur maximale (valeur par défaut : none) : si le contenu dépasse cette hauteur maximale, il déborde ;
height, indiquant une hauteur fixe (valeur par défaut : auto) : si le contenu dépasse cette hauteur, il déborde ;

Ai-je été plus clair, à présent ?

Bonjour,

Ai-je été plus clair, à présent ?

Oui ou c'est p'tet certainement moi qui n'était pas en phase

Merci beaucoup pour ces précisions.

Sinon une idée pour le problème sachant qu'albat a la même conf et ca reste normal chez lui ?

Pour le FLV en page d'accueil vous préférez un autre topic lié à flash ou bien si quelqu'un peut me dire si ca rame chez lui ou à un élément de réponse...

Métalliquement,

Mega

Forum d'entraide PHPFrance

problème avec les résolutions

problème avec les résolutions