Forum de FilmDeCulte

Le forum cinéma le plus méchant du net...
Nous sommes le 21 Nov 2024, 18:39

Heures au format UTC + 1 heure




Poster un nouveau sujet Répondre au sujet  [ 170 messages ]  Aller à la page 1, 2, 3, 4, 5 ... 12  Suivante
Auteur Message
 Sujet du message: Le fil du webmaster en herbe
MessagePosté: 29 Nov 2010, 15:01 
Hors ligne
Sacré trou du cul
Avatar de l’utilisateur

Inscription: 19 Juin 2005, 22:59
Messages: 11249
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.

_________________
Delirium Tremens


Haut
 Profil  
 
 Sujet du message: Re: Les petites astuces CSS
MessagePosté: 29 Nov 2010, 15:18 
Hors ligne
Sacré trou du cul
Avatar de l’utilisateur

Inscription: 19 Juin 2005, 22:59
Messages: 11249
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.

_________________
Delirium Tremens


Haut
 Profil  
 
 Sujet du message: Re: Les petites astuces CSS
MessagePosté: 30 Nov 2010, 00:52 
Hors ligne
Expert
Avatar de l’utilisateur

Inscription: 04 Juil 2005, 18:42
Messages: 2615
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).


Haut
 Profil  
 
 Sujet du message: Re: Les petites astuces CSS
MessagePosté: 30 Nov 2010, 11:41 
Hors ligne
Sacré trou du cul
Avatar de l’utilisateur

Inscription: 19 Juin 2005, 22:59
Messages: 11249
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...

_________________
Delirium Tremens


Haut
 Profil  
 
 Sujet du message: Re: Les petites astuces CSS
MessagePosté: 30 Nov 2010, 22:36 
Hors ligne
Expert
Avatar de l’utilisateur

Inscription: 04 Juil 2005, 18:42
Messages: 2615
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...


Haut
 Profil  
 
 Sujet du message: Re: Les petites astuces CSS
MessagePosté: 01 Déc 2010, 11:41 
Hors ligne
Sacré trou du cul
Avatar de l’utilisateur

Inscription: 19 Juin 2005, 22:59
Messages: 11249
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)

_________________
Delirium Tremens


Haut
 Profil  
 
 Sujet du message: Re: Les petites astuces CSS
MessagePosté: 12 Fév 2011, 13:25 
Hors ligne
Sacré trou du cul
Avatar de l’utilisateur

Inscription: 19 Juin 2005, 22:59
Messages: 11249
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...

_________________
Delirium Tremens


Haut
 Profil  
 
 Sujet du message: Re: Les petites astuces CSS
MessagePosté: 12 Fév 2011, 17:31 
Hors ligne
Expert

Inscription: 04 Juil 2005, 15:04
Messages: 10218
Localisation: Montréal
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).


Haut
 Profil  
 
 Sujet du message: Re: Les petites astuces CSS
MessagePosté: 12 Fév 2011, 17:42 
Hors ligne
Sacré trou du cul
Avatar de l’utilisateur

Inscription: 19 Juin 2005, 22:59
Messages: 11249
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 !

_________________
Delirium Tremens


Haut
 Profil  
 
 Sujet du message: Re: Les petites astuces CSS
MessagePosté: 12 Fév 2011, 17:56 
Hors ligne
Le quoteur fou
Avatar de l’utilisateur

Inscription: 23 Juil 2005, 17:40
Messages: 11786
Localisation: Hill Valley
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.

_________________
Tennis de Table Bordeaux


Haut
 Profil  
 
 Sujet du message: Re: Les petites astuces CSS
MessagePosté: 12 Fév 2011, 18:02 
Hors ligne
Sacré trou du cul
Avatar de l’utilisateur

Inscription: 19 Juin 2005, 22:59
Messages: 11249
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...

_________________
Delirium Tremens


Haut
 Profil  
 
 Sujet du message: Re: Les petites astuces CSS
MessagePosté: 12 Fév 2011, 23:31 
Hors ligne
Sacré trou du cul
Avatar de l’utilisateur

Inscription: 19 Juin 2005, 22:59
Messages: 11249
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 !

_________________
Delirium Tremens


Haut
 Profil  
 
 Sujet du message: Re: Les petites astuces CSS
MessagePosté: 13 Fév 2011, 05:12 
Hors ligne
Le quoteur fou
Avatar de l’utilisateur

Inscription: 23 Juil 2005, 17:40
Messages: 11786
Localisation: Hill Valley
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.

_________________
Tennis de Table Bordeaux


Haut
 Profil  
 
 Sujet du message: Re: Les petites astuces CSS
MessagePosté: 14 Fév 2011, 17:36 
Hors ligne
Le quoteur fou
Avatar de l’utilisateur

Inscription: 23 Juil 2005, 17:40
Messages: 11786
Localisation: Hill Valley
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 ...

_________________
Tennis de Table Bordeaux


Haut
 Profil  
 
 Sujet du message: Re: Les petites astuces CSS
MessagePosté: 14 Fév 2011, 17:49 
Hors ligne
Sacré trou du cul
Avatar de l’utilisateur

Inscription: 19 Juin 2005, 22:59
Messages: 11249
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...

_________________
Delirium Tremens


Haut
 Profil  
 
Afficher les messages postés depuis:  Trier par  
Poster un nouveau sujet Répondre au sujet  [ 170 messages ]  Aller à la page 1, 2, 3, 4, 5 ... 12  Suivante

Heures au format UTC + 1 heure


Articles en relation
 Sujets   Auteur   Réponses   Vus   Dernier message 
Aucun nouveau message non-lu dans ce sujet. Hop au boulot les hackers en herbe ...

Karlito

12

1790

21 Mar 2006, 21:01

Delirium Tremens Voir le dernier message

Aucun nouveau message non-lu dans ce sujet. Pour Liam et tous les vidéastes en herbe

Juan

0

1644

05 Juil 2006, 11:44

Juan Voir le dernier message

 


Qui est en ligne

Utilisateurs parcourant ce forum: Aucun utilisateur enregistré et 3 invités


Vous ne pouvez pas poster de nouveaux sujets
Vous ne pouvez pas répondre aux sujets
Vous ne pouvez pas éditer vos messages
Vous ne pouvez pas supprimer vos messages

Rechercher:
Aller à:  
Powered by phpBB® Forum Software © phpBB Group
Traduction par: phpBB-fr.com
phpBB SEO
Hébergement mutualisé : Avenue Du Web