Forum de FilmDeCulte
http://forum.plan-sequence.com/

Le fil du webmaster en herbe
http://forum.plan-sequence.com/fil-webmaster-herbe-t13671.html
Page 1 sur 12

Auteur:  Delirium Tremens [ 29 Nov 2010, 15:01 ]
Sujet du message:  Le fil du webmaster en herbe

Je me permets de faire un fil pour ceux que ça intéresserait. Là je développe 2 projets pour des clients actuellement (dont 1 où je suis assez fier) avec pas mal de jquery mais surtout des petites trouvailles en CSS. Du coup je les partage (même si certains doivent les connaitre). Je ne m'occupe plus d'IE 5.5, je commence à la 6.

- Des rectangles arrondis pour tous les navigateurs en CSS sans images (je n'ai pas encore tout vérifié mais IE7 et 8 et les dernières versions de firefox et Chrome fonctionnent). Il faut rajouter un comportement (fichier htc) à IE (http://curved-corner.googlecode.com/fil ... radius.htc) vous le téléchargez et le mettez sur le ftp de votre site (c'est invisible pour le visiteur les comportements). Ensuite dans votre css, vous mettez ça :

Code:
.arrondi{-moz-border-radius:5px;-webkit-border-radius:5px;-khtml-border-radius:5px;border-radius:5px;behavior:url(border-radius.htc);}


Et vous avez plus qu'à faire un div class arrondi. Et vous pouvez jouer sur l'arrondi en modifiant les valeurs. A noter que ça ne fonctionne que pour faire un rectangle arrondi complet (avec les 4 coins arrondis) et pas des onglets par exemple. Ca simplifie grandement la vie. En sachant qu'au pire pour les vieux navigateurs on est sur une div au format carré c'est tout.

Auteur:  Delirium Tremens [ 29 Nov 2010, 15:18 ]
Sujet du message:  Re: Les petites astuces CSS

Et dans le même style avec les comportements IE, on peut s'affranchir des limites de ce navigateur avec notamment les hover sur autre chose que du "a" (http://www.xs4all.nl/~peterned/csshover.html) ou régler le problème des png (http://webfx.eae.net/dhtml/pngbehavior/pngbehavior.html). Le problème du png peut se régler en javascript mais c'est moins "universel" on va dire (cela dit les stats parlent maintenant de moins de 2% d'utilisateurs avec javascript désactivé) et le hover peut sinon se régler avec le a en display block, mais parfois on se retrouve avec une multiplication de balises inutiles.

Auteur:  Zaphod [ 30 Nov 2010, 00:52 ]
Sujet du message:  Re: Les petites astuces CSS

Je vais essayer ta première astuce si ça marche vraiment avec IE.
Avec FF et Chrome/Safari c'était facile... mais sur IE8 je n'y arrivais pas (IE6 et 7 de toutes façons... c'est difficile d'avoir une visu correctes, surtout avec IE6 qui ne connait pas min-width ni display:table-cell).

Pour le problème du PNG et du hover... si ça peut marcher aussi, c'est bien.
L'idéal serait de trouver un moyen de ne charger ces fichiers que pour IE (voire IE6 pour le PNG et hover).

Auteur:  Delirium Tremens [ 30 Nov 2010, 11:41 ]
Sujet du message:  Re: Les petites astuces CSS

Zaphod a écrit:
L'idéal serait de trouver un moyen de ne charger ces fichiers que pour IE (voire IE6 pour le PNG et hover).

Alors à vérifier mais vu que c'est un format spécifique à IE, je pense que ça n'est chargé que pour IE. Si réellement ça télécharge même sur les autres navigateurs, tu peux mettre une condition et une feuille spécifique où tu ne rajoutes que les comportements dans cette feuille. Ou un hack css sur ce comportement donc soit :

Dans le code html :

Code:
<!--[if IE X]><link href="tonfichier.css" rel="stylesheet" type="text/css" /><![endif]-->


Ou alors dans ton css :

Code:
.arrondi{behaviour:url(border-radius.htc\9 ;}


Ca ça ne devrait fonctionner que pour les IE 8 et inférieur...

Auteur:  Zaphod [ 30 Nov 2010, 22:36 ]
Sujet du message:  Re: Les petites astuces CSS

J'ai essayé mais sans succès le border-radius.
Tu as un exemple de page où ça marche ?

Chez moi le seul effet est de faire disparaitre la couleur de fond...

Auteur:  Delirium Tremens [ 01 Déc 2010, 11:41 ]
Sujet du message:  Re: Les petites astuces CSS

Zaphod a écrit:
Tu as un exemple de page où ça marche ?

Je t'envoie un mp pour te montrer (le site est en cours de dev)

Auteur:  Delirium Tremens [ 12 Fév 2011, 13:25 ]
Sujet du message:  Re: Les petites astuces CSS

Y'a quand même des trucs hallucinants sur les css, là je suis confronté au problème le plus con du monde, je fais un design semi-fluide (le contenu restera sur une taille fixe, mais le design autour sera fluide) et j'ai besoin de mettre 4 coins de page et une bordure tout autour de la page, en gros faire comme un cadre de tableau, et tout ceci sans qu'il n'y ait de scroll... Mais non c'est pas possible ! Enfin c'est possible en créant je sais pas combien de div... Ca me flingue parfois ce genre de trucs...

Auteur:  Mon Colonel [ 12 Fév 2011, 17:31 ]
Sujet du message:  Re: Les petites astuces CSS

Delirium Tremens a écrit:
Y'a quand même des trucs hallucinants sur les css, là je suis confronté au problème le plus con du monde, je fais un design semi-fluide (le contenu restera sur une taille fixe, mais le design autour sera fluide) et j'ai besoin de mettre 4 coins de page et une bordure tout autour de la page, en gros faire comme un cadre de tableau, et tout ceci sans qu'il n'y ait de scroll... Mais non c'est pas possible ! Enfin c'est possible en créant je sais pas combien de div... Ca me flingue parfois ce genre de trucs...


C'est pour ça qu'on passe (doucement) à HTML5 et CSS3 (en css3 je crois que tu peux mettre plusieurs background dans un conteneur ça devrait régler une partie de ton problème).

Auteur:  Delirium Tremens [ 12 Fév 2011, 17:42 ]
Sujet du message:  Re: Les petites astuces CSS

Mon Colonel a écrit:
C'est pour ça qu'on passe (doucement) à HTML5 et CSS3 (en css3 je crois que tu peux mettre plusieurs background dans un conteneur ça devrait régler une partie de ton problème).

En css3 tu peux choisir des images pour les bordures, dans les coins et au centre, donc sur une div théoriquement tu peux mettre 8 bordures... Parfait, sauf qu'aucun navigateur actuellement n'est compatible avec cette fonctionnalité (y compris les chrome, safari, firefox...). Et quand tu vois qu'IE6 fait encore 10%, ça veut dire que j'utiliserai seulement le html5 et css3 pas avant 2-3 ans et encore... donc c'est un doux rêve le css3 pour l'instant malheureusement !

Auteur:  rotary [Bot] [ 12 Fév 2011, 17:56 ]
Sujet du message:  Re: Les petites astuces CSS

Delirium Tremens a écrit:
Des rectangles arrondis pour tous les navigateurs en CSS (...). Il faut rajouter un comportement (fichier htc) à IE (http://curved-corner.googlecode.com/fil ... radius.htc)

J'avais trouvé ça léger et simple. Par contre, la compatibilité avec une image d'arrière plan, qui est un des + officiels de cette méthode, n'est pas au rendez-vous.

Auteur:  Delirium Tremens [ 12 Fév 2011, 18:02 ]
Sujet du message:  Re: Les petites astuces CSS

rotary [Bot] a écrit:
J'avais trouvé ça léger et simple. Par contre, la compatibilité avec une image d'arrière plan, qui est un des + officiels de cette méthode, n'est pas au rendez-vous.

La bibliothèque jQuery avec jesaisplusquelplugin le permet. Ca te fait une compatibilité autour de 95-98% c'est correct quand même... par contre c'est plus lourd...

Auteur:  Delirium Tremens [ 12 Fév 2011, 23:31 ]
Sujet du message:  Re: Les petites astuces CSS

Delirium Tremens a écrit:
Y'a quand même des trucs hallucinants sur les css, là je suis confronté au problème le plus con du monde, je fais un design semi-fluide (le contenu restera sur une taille fixe, mais le design autour sera fluide) et j'ai besoin de mettre 4 coins de page et une bordure tout autour de la page, en gros faire comme un cadre de tableau, et tout ceci sans qu'il n'y ait de scroll... Mais non c'est pas possible ! Enfin c'est possible en créant je sais pas combien de div... Ca me flingue parfois ce genre de trucs...

Lol pour finir j'ai réussi avec... 8 DIV (si quelqu'un a mieux je prends, mais d'ailleurs je conseille ce test aux écoles de webmaster : un cadre fluide sans scroll avec bordure et 4 coins différents, j'ai mis la journée pour finir par revenir à cette méthode vu que j'ai rien trouvé de mieux) ! Magnifique... Et le code css :

Code:
#hg,#hd,#bg,#bd{position:absolute;width:40px;height:40px}
#hg{top:20px;left:20px;background:url(../images/coin-haut-gauche.png) no-repeat;}
#hd{top:20px;right:20px;background:url(../images/coin-haut-droit.png) no-repeat;}
#bg{bottom:20px;left:20px;background:url(../images/coin-bas-gauche.png) no-repeat;}
#bd{bottom:20px;right:20px;background:url(../images/coin-bas-droit.png) no-repeat;}
#h,#b,#g,#d{position:absolute;background:#FFF}
#g,#d{top:60px;bottom:60px;;width:3px;}
#g{left:20px;}
#d{right:20px;}
#h,#b{left:60px;right:60px;height:3px;}
#h{top:20px;}
#b{bottom:20px;}


L'avantage c'est que c'est du positionnement absolute, donc je pourrais mettre ça en fin de page... Mais c'est quand même bien pourri !

Auteur:  rotary [Bot] [ 13 Fév 2011, 05:12 ]
Sujet du message:  Re: Les petites astuces CSS

Delirium Tremens a écrit:
La bibliothèque jQuery avec jesaisplusquelplugin le permet.

mais c'est lourd. Ce nouveau code était censé être tout aussi compatible avec une image d'arrière plan, la légèreté en prime. Eh ben non. IE8 fait des trucs bizarres avec l'image.

Auteur:  rotary [Bot] [ 14 Fév 2011, 17:36 ]
Sujet du message:  Re: Les petites astuces CSS

Delirium Tremens a écrit:
petites trouvailles en CSS

un truc que j'avais particulièrement aimé en css, c'est par exemple le bouton facebook en bas de cette page : http://www.e-monsite.com/ J'avais trouvé élégante l'idée de mettre dans le même fichier image le bouton par défaut et l'image hover, et de faire coulisser le tout dans une fenêtre de visibilité. Depuis, je ne me suis servi que de cette méthode. Elle marche avec IE FF Chrome ...

Auteur:  Delirium Tremens [ 14 Fév 2011, 17:49 ]
Sujet du message:  Re: Les petites astuces CSS

rotary [Bot] a écrit:
un truc que j'avais particulièrement aimé en css, c'est par exemple le bouton facebook en bas de cette page : http://www.e-monsite.com/ J'avais trouvé élégante l'idée de mettre dans le même fichier image le bouton par défaut et l'image hover, et de faire coulisser le tout dans une fenêtre de visibilité. Depuis, je ne me suis servi que de cette méthode. Elle marche avec IE FF Chrome ...

Ca revient au même que 2 images, je trouve ça même plus simple d'avoir 2 images, on a pas géré le positionnement du background et à bien positionner chaque image à égale distance. Cela dit pour des barres de menu avec icônes ça peut être pratique...

Page 1 sur 12 Heures au format UTC + 1 heure
Powered by phpBB® Forum Software © phpBB Group
http://www.phpbb.com/