[Résolu] Design fluide Em % px? Lequel choisir?

(reprise du message précédent)

Raphael a écrit :

Je trouve ton tuto un peu trop orienté sur la technique, clb56.

En fait ce n'est pas un tuto, rien de ce que je fait n'entre dans la catégorie tuto. C'est d'ailleurs sur cet aspect que j'alerte sur l'accueil de mon site :

a écrit :

Ce site présente un certain nombre de tests et de réflexions sur quelques langages web. Les exposés qui le composent ne sont pas des tutoriels mais plutôt des comptes rendus de mes propres expériences.

Il est donc souhaitable de les appréhender avec tout l'esprit critique qui convient.

La première conséquence de cela c'est que je ne prend pas spécialement en charge les néophytes. Ceux ci peuvent donc trouver les exposés un peu abscons mais après tout l'état de néophytes n'est que transitoire et des ressources existent (et il y en a même certaines qui sont bonnes) par ailleurs.

Et si ce que je produit peut avoir une quelconque valeur c'est justement pour cette raison. Sans m'embarquer dans de la technique de très haut vol, on en est très loin en fait, j'impose à mes lecteurs éventuels le pre requisit d'un minimum de background qu'avec un minimum d'effort ils peuvent acquérir.

Pour le dire autrement je n'ai pas du tout l'âme d'un évangéliste.

C'était juste une précision...


PS :
je viens de regarder le point de FAQ et je viens de me rendre compte que je n'ai pas mis à jour mon propre topo quant à la gestion du cas js inactif pour IE less than IE7.
je règle ça tout de suite et reposte derrière
Modifié par clb56 (06 Jan 2007 - 13:54)

Bon voilà ma proposition pour le point de faq :

a écrit :

Max-width sur Internet Explorer

Internet Explorer dans ses versions inférieures à (less than) IE7 ne reconnait pas les propriétés max-width, max-height, min-width, min-height.

Il faut donc avoir recours à des subtilités pour les mettre en oeuvre.

La solution concernant le min-height est exposée dans le point suivant de la faq :
<a href="http://forum.alsacreations.com/faq/faq-60-Min-height-sur-Internet-Explorer.html">Min-height sur Internet Explorer</a>

Concernant max-width, qui est une propriété très utile pour les design fluides à largeur controlée, on peut, par exemple, utiliser cette technique JavaScript développée ici : http://www.svendtofte.com/code/max_width_in_ie/

Exemple de style à placer en commentaire conditionnel pour IE lt IE 7 (lt signifiant less than : "plus petit que") :
<!--[if lt IE 7]>
<style type="text/css">
div {
width:expression(document.body.clientWidth > 1000? "1000px": "auto" );
}
</style>
<! [ endif ] -->/* En enlevant tous les espaces*/
Ce code dit que si la largeur du document est supérieure à 1000px, alors il sera forcé à 1000px, sinon il restera à "auto".

On peut aussi gérer la situation où le javascript est inactif en jouant sur le fait que plusieurs déclarations de la même propriété sont écrasées par la dernière de ces déclarations.
div {
width:770px;
width:expression(document.body.clientWidth > 1000? "1000px": "auto" );
}

Dans ce cas si javascript est inactif le deuxième width sera purement et simplement ignoré et on aura un résultat en design fixe "raisonnable" d'une largeur de 770px.
Et si javascript est actif la deuxième déclaration du width écrasera la première.

Modifié par clb56 (07 Jan 2007 - 11:58)

Patidou a écrit :
Et hop une discussion dans mes favoris.

Merci à tous.

De rien content d'avoir ouvert un sujet brulant car finalement on a peu d'information la dessus

clb56 a écrit :
Bon voilà ma proposition pour le point de faq :

Je ne vois rien à redire : c'est parfait comme ça ! Merci beaucoup.
Modifié par Raphael (06 Jan 2007 - 14:10)

Raphael a écrit :

Je ne vois rien à redire : c'est parfait comme ça ! Merci beaucoup.

Trop content

Je vais tout de même le modifier un peu pour inclure min-width aussi et ainsi n'avoir qu'un seul point de FAQ regroupant min-width et max-width.

Par contre, y'a t-il moyen avec cette méthode d'avoir à la fois un max-width et un min-width ? Je ne suis pas sûr

Quelque chose comme ça est possible ?

width:expression(document.body.clientWidth < 600? "600px": "auto" && document.body.clientWidth > 1000? "1000px": "auto");

Modifié par Raphael (06 Jan 2007 - 14:26)

Notons tout de même qu'il reste des lacunes quant au support de ces deux propriétés sous IE7. Je vais essayer de synthétiser tout ça
Modifié par Antoine Cailliau (06 Jan 2007 - 14:24)

Antoine Cailliau a écrit :
Notons tout de même qu'il reste des lacunes quant au support de ces deux propriétés sous IE7. Je vais essayer de synthétiser tout ça

Merci, ça pourra être utile dans le cadre d'un tuto sur les designs élastiques intelligents

Antoine Cailliau a écrit :
Notons tout de même qu'il reste des lacunes quant au support de ces deux propriétés sous IE7.

Si tel est le cas alors je me fais trolleur officiel Anti IE jusqu'à la fin de mes jours NA !!!!!!!!!!

Dans l'article de Sven, il donne aussi la solution pour le min-height et le max-height, on peut peut-être aussi modifier la note dans la faq?
Modifié par Patidou (06 Jan 2007 - 14:57)

Patidou a écrit :
Dans l'article de Sven, il donne aussi la solution pour le min-height et le max-height, on peut peut-être aussi modifier la note dans la faq?

Oui tu as raison. Je planche dessus.

J'ai toujours du mal à concilier les deux.

Le code suivant me fait planter IE6 à chaque fois lorsque je modifie la taille de fenêtre :

<style type="text/css">
div {
border: 2px solid red;
max-width: 1000px;
min-width: 600px;
width:expression(document.body.clientWidth > 1000? "1000px": "auto");
width:expression(document.body.clientWidth < 600? "600px": "auto");
}
</style>

Bref, si quelqu'un arrive à concilier min-width et max-width sur IE6, je suis preneur.
Modifié par Raphael (06 Jan 2007 - 15:13)

Moi ca ne me fait pas planter IE6 mais une des deux propriété ne marche pas!

J'ai trouver ceci:

width: expression(document.body.clientWidth < 600 ? "600px" : document.body.clientWidth > 1000? "1000px" : "auto");

Source:
http://www.cameronmoll.com/archives/000892.html
Modifié par cerede2000 (06 Jan 2007 - 15:42)

Et en passant, peut on remplacer body par autre chose?

width: expression(document.conteneur.clientWidth < 742? "740px" : document.conteneur.clientWidth > 1202? "1200px");

Modifié par cerede2000 (06 Jan 2007 - 15:47)

C'est pourtant très simple

Il suffit d'envoyer un mp à koala64 et d'attendre l'arrivée des ooOOooo

<edit>
C'est fait
</edit>
Modifié par clb56 (06 Jan 2007 - 15:48)

cerede2000 a écrit :
Moi ca ne me fait pas planter IE6 mais une des deux propriété ne marche pas!

J'ai trouver ceci:

width: expression(document.body.clientWidth < 600 ? "600px" : document.body.clientWidth > 1000? "1000px" : "auto");

Source:
http://www.cameronmoll.com/archives/000892.html

Merci, ton lien a d'ailleurs confirmé mon problème :

a écrit :
If you’re using IE 6 and you drag the window pane to resize, it freezes.

Il faut donner des valeurs différentes pour que le freeze n'ait pas lieu :

width: expression(document.body.clientWidth < 742? "740px" : document.body.clientWidth > 1202? "1200px" : "auto");

EDIT : bon en fait ça freeze aussi chez moi dans tous les cas
Modifié par Raphael (06 Jan 2007 - 16:09)

Et ma reponse

cerede2000 a écrit :
Et en passant, peut on remplacer body par autre chose?

Oui mais il n'y aurait aucun intérêt.
Le calcul se base sur la largeur de la fenêtre du client (donc body).
Cela ne t'empêche pas d'appliquer le min-width sur autre chose que le body, mais le "code" du calcul doit s'appliquer sur le body.

cerede2000 a écrit :
Et en passant, peut on remplacer body par autre chose?

Oui sans doute par

expression(document.getElementById('tel_element').offsetWidth=etc...);

à tester en fait...

Par rapport à cette discussion très intéressante, j'ai un peu remodelé l'article Faire un site pour toutes les résolutions.

Que pensez-vous d'y ajouter un paragraphe assez simple sur les méthodes de largeurs minimales et maximales ? L'endroit me semble approprié.