Bienvenue
Connexion automatique    Nom d’utilisateur:    Mot de passe:    
           



Répondre
  
Nouveau
Page 1 sur 2
Aller à la page: 1, 2  >
Astuces HTML
Auteur Message
Répondre en citant

Message Astuces HTML 

Bonjour à tous

sur ce topic pourront être expliciter certaines des balises html les plus interessantes

Visiter le site web du posteur
Auteur Message

Message Publicité 

PublicitéSupprimer les publicités ?


Auteur Message
Répondre en citant

Message Astuces HTML 

je commence avec la balise « IFRAME »


Contraction de « inline frame », Il s'agit d'une forme particulière de frame (cadre) qui s'affiche au milieu de votre page. Cela permet, par exemple, de donner un aperçu d'un site extérieur sans pour autant quitter les pages de votre site.


<IFRAME SRC="adresse du site" HEIGHT="350" WIDTH="450"></IFRAME>

Les attributs de la balise iframe :

Src=" " : L'url de la page à afficher dans l'iframe
Height=" " : Hauteur du cadre
Width=" " : Largeur du cadre
Name=" " : Permet d'identifier la balise
Scrolling=" " : Détermine la présence d'une barre de défilement (auto, yes, no )
AllowTransparency=" " : Accepter ou non la transparence (true, false)
Visibility=" " : permet de spécifié si l'Iframe est visible ou pas (visible, hidden)
Style=" " : Permet de définir des cascading style sheets dans la balise même
Align=" " : Contrôle l'alignement ( left, center, right, justify )
Frameborder=" " : Active/désactive la bordure entre les cadres (0,1)
Marginwidth=" " : Définit l'espacement horizontal entre la bordure et le contenu
Marginheight=" " : Définit l'espacement vertical entre la bordure et le contenu
Hspace=" " : Détermine l'espace entre texte et frame sur les côtés verticaux
Vspace=" " : Détermine l'espace entre texte et frame sur les bords horizontaux
Left=" " : Positionne l'ordonné du coin supérieur gauche de l'Iframe avec celui de la page
Top=" " : Positionne l'abscisse du coin supérieur gauche de l'Iframe avec celui de la page

Visiter le site web du posteur
Auteur Message
Répondre en citant

Message Astuces HTML 

En voici un exemple de l'utilisation d'une Iframe






Visiter le site web du posteur
Auteur Message
Répondre en citant

Message Astuces HTML 

...


La balise « DIV » (pour division)
Cette commande permet de cadrer un bloc de texte ou de diviser un document en plusieurs sections qui seront alignées chacune d'une façon différente

elle est aussi utilisée pour creer des calques dynamiques et des menus déroulants...
le calque vous permet de placer du texte, une image... où vous le désirez sur votre page

(c'est cette commande qui permettait sur les profils du chat, de placer des images en dehors des limites du profil)

Visiter le site web du posteur
Auteur Message
Répondre en citant

Message Astuces HTML 

Voici un site expliquant les differents codes et languages utilisés sur le net


http://webprogrammation.free.fr/Accueil.php


_________________
Tout ce que je sais, c'est que je ne sais rien

Socrate

Auteur Message
Répondre en citant

Message Astuces HTML 

Lors de l'utilisation de plusieurs bibliothèques JavaScript sur une même page, il arrive que seule l'une d'entre elles fonctionne correctement.

Cela est en général dû à un problème d'écrasement des gestionnaires d'événement "DOM 0" : en effet, si l'attribut "onload" est défini plusieurs fois (soit sur l'objet "window" dans le JavaScript, soit sur l'élément "body" dans le (X)HTML), seule la dernière définition est prise en compte.

Par exemple :



Pour éviter ce problème, il existe plusieurs solutions :

1/ Regrouper toutes les initialisations :

- dans le code JavaScript :



- dans le code (X)HTML :



2/ Utiliser une fonction qui gère l'ajout des gestionnaires d'événement en évitant l'écrasement, comme celle de Simon Willison : http://simon.incutio.com/archive/2004/05/26/addLoadEvent.

3/ Passer par les gestionnaires d'événement DOM 2 / IE.

Les deux dernières solutions sont évoquées dans le tutoriel "JavaScript : organiser son code en modules" (http://css.alsacreations.com/Tutoriels-JavaScript/JavaScript-organiser-son-code-en-modules#tuto4).

source: http://reader.feedshow.com/show_items-feed=edffd828e8922e2b38d3eff037e1269d


_________________
http://cityscapes.ma
Auteur Message
Répondre en citant

Message Astuces HTML 

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.

----------------------------------

1- 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") :




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 :




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.

NOTE : merci à clb56 pour ce point de la FAQ (http://forum.alsacreations.com/profile-97-clb56.html)

----------------------------------

2- La solution est semblable pour la propriété min-width :



Le code dit que si la largeur du document est inférieure à 600px, alors elle est forcée à 600px (il y'a donc une apparition des barres d'ascenseur horizontales au seuil de 600px).
Si JavaScript n'est pas actif, alors la largeur est fixée à 770px.


----------------------------------

2bis. Concilier min-width et max-width en même temps :





Si la fenêtre dépasse 1000px, elle sera ramenée à 1000px. Si elle est inférieure à 600px, elle sera ramenée à 600px. Si JavaScript n'est pas actif, alors la largeur est fixée à 770px.


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

----------------------------------

3- La solution pour min-height.

Notez que IE n'interprête pas correctement la propriété "height" et la considère comme "min-height" : elle s'allongera en fonction du contenu.

Ce n'est pas le comportement normal : les autres navigateurs vont respecter la hauteur de façon rigoureuse et le contenu dépassera du bloc.

Il suffit donc d'indiquer une hauteur (height) uniquement à IE6, et une hauteur minimale (min-height) pour les autres navigateurs.





----------------------------------

4- La solution pour max-height :




Si la hauteur de la fenêtre est supérieure à 800px, alors elle sera forcée à 800px. Si JavaScript n'est pas actif, la hauteur sera de 500px.

D'autres solutions pour min-height et Internet Explorer :
* Module javascript [en] : http://www.doxdesk.com/software/js/minmax.html
* Div supplémentaire [en] : http://www.greywyvern.com/code/min-height-hack.html
* Jeu avec paddings [fr] : http://www.ultra-fluide.com/ressources/css/css-hacks.htm#min-height


_________________
http://cityscapes.ma
Auteur Message
Répondre en citant

Message Astuces HTML 

Le format d'images PNG (et plus particulièrement le PNG-24) permet de gérer des images RVB dotées d'une couche alpha, c'est à dire d'indications de transparence graduelle. Contrairement au format GIF et à son équivalent, le PNG-8, il ne s'agit pas d'une transparence binaire (un pixel est soit transparent, soit opaque), mais bien d'une transparence graduelle: chaque pixel peut être un un peu, beaucoup ou pas du tout transparent (256 nuances).

C'est donc un format très pratique pour le design web. Sauf que… le navigateur Internet Explorer est réputé pour ne pas supporter la transparence PNG, et afficher les images PNG transparentes avec un fond gris opaque particulièrement laid.

Il est faux de dire qu'Internet Explorer ne supporte pas la transparence PNG. La version 7 de ce navigateur l'interprète aussi bien que tous les autres navigateurs modernes. Par contre, c'est effectivement le cas pour la version 6, encore très largement utilisée, et sur laquelle il faudra compter pour quelques temps encore.

Il existe toutefois un moyen détourné d'obtenir «plus ou moins» du PNG transparent avec Internet Explorer 5.5 et 6.0, que nous allons détailler.

LES FILTRES ALPHAIMAGELOADER

À partir de la version 5.5, Internet Explorer intègre le support de fonctions propriétaires permettant de faire appel à DirectX pour certaines manipulations graphiques. L'une de ces manipulations graphiques consiste à intercaler, entre le fond d'un bloc et son contenu, une image avec transparence graduelle.

On peut utiliser cette fonctionnalité via Javascript, mais nous passerons ici par la propriété CSS non standard "filter". Afin d'éviter que cette propriété ne s'applique à IE7 également, et pour garder un code CSS valide par ailleurs, on utilisera un commentaire conditionnel:


Attention, si on place cette propriété dans une feuille de styles externes (une feuille de correctifs CSS pour IE6 et inférieurs appelée via un commentaire conditionnel, par exemple), le chemin ne s'appliquera pas depuis la feuille de style (comme c'est normalement le cas en CSS), mais depuis la page HTML. Une solution pour ne pas s'emmêler les pinceaux: utiliser des chemins absolus, commençant par "/".

Le code ci-dessus permet donc d'afficher l'image PNG, qui sera étirée (sizingMethod="scale") dans le bloc. Les valeurs possibles pour la propriété sizingMethod sont:
- "crop" (rogne l'image pour qu'elle tienne dans le bloc);
- "image", valeur par défaut (réduit ou élargit le bloc pour correspondre aux dimmensions de l'image);
- "scale" (étire l'image aux dimmensions du bloc).

LES LIMITES DE CETTE MÉTHODE

Tout d'abord, il faut bien noter que le filtre AlphaImageLoader ne substitue pas une image (avec transparence PNG activée) à l'image de fond d'un bloc. L'image placée en «fond» du bloc (en fait entre le fond et le contenu) n'est pas une image de fond à proprement parler, et on ne pourra pas utiliser les propriétés CSS pour les images de fond.

Donc:
1. pas de background-position (et pas d'équivalent via des propriétés d'AlphaImageLoader);
2. pas de background-repeat (et pas d'équivalent… sauf peut-être sizingMethod="scale" pour les images unies, sans motif, et dans les cas où on aurait pu utiliser une image de fond de 1px de haut répétée en hauteur -- ou une image de 1px de large répétée en largeur).

Une autre limite importante vient du fait que POUR QUE CELA FONCTIONNE, LE BLOC DOIT AVOIR LE LAYOUT. Il faudra donc peut-être également conférer le "layout" au bloc, par exemple de la manière suivante:


Au sujet du HasLayout, on pourra lire:
http://forum.alsacreations.com/faq/faq-91-Qu039est-ce-que-le-HasLayout-et-c…

AUTOMATISER L'UTILISATION DE ALPHAIMAGELOADER AVEC JAVASCRIPT

Plusieurs scripts Javascript se proposent d'appliquer automatiquement les correctifs nécessaires à la prise en compte de la transparence PNG dans IE6, soit pour les images dans le code HTML, soit pour les images de fond CSS, soit pour les deux.

Celui-ci est régulièrement cité (nota: explications en anglais):
http://www.twinhelix.com/css/iepngfix/


_________________
http://cityscapes.ma
Auteur Message
Répondre en citant

Message Astuces HTML 

Opéra et FireFox gèrent parfaitement la transparence des fichiers PNG. Seulement il reste Internet Explorer qui a bien du mal y parvenir. Il existe heureusement des hacks pour que vos créations soient retranscritent à la perfection sous ce dernier navigateur Web. Je vous propose une liste de différents hacks et leurs inconvénients :

La première solution est l’appel à un script en JavaScript :

1. Téléchargez la routine JavaScript ici
2. Ajoutez dans le <head> de votre site ce code :


Le problème est que cette méthode ne marche pas si vous désirez intégrer un PNG transparent dans le fichier CSS via la propriété background-image…

La seconde solution fait appel la fonction de transparence de DirectX (rien que ça!) et permet de palier ce problème :

1. Intégrez ce code dans votre fichier CSS dans la partie désirée :

2. Attention, si vous voulez que l’image se répete via la propriété repeat, intégrez ce code :

3. De plus, si vous désirer ajouter un lien sur du texte se trouvant dans un bloc dont le style contient une image de fond (background-img), intégrez ce code :
a, input{position: relative;z-index: 1;}

Le problème de cette méthode est l’appel même des routines DirectX qui font ralentir le site.

Alors voici la solution utlime qui provient de twinhelix:

1. Téléchargez l’archive ici
2. Ajoutez ce code à votre CSS :

3. Voici d’autres exemples d’application :


source: http://www.info-graphistes.com/tutoriaux/gestion-des-png-transparents-sous-…


_________________
http://cityscapes.ma
Auteur Message
Répondre en citant

Message Astuces HTML 

code pour changer de styles css en fonction de l'heure



Visiter le site web du posteur
Auteur Message

Message Astuces HTML 



Montrer les messages depuis:

Répondre
Page 1 sur 2
Aller à la page: 1, 2  >
Modération




Index | Créer un forum | Forum gratuit d’entraide | Annuaire des forums gratuits | Signaler une violation | Conditions générales d'utilisation remonter




Cityscapes.ma