Comment définir l’apparence de ses liens? CSS permet d'appliquer des styles différents aux liens suivant leur état: normal, visité, survolé, cliqué. Pour cela, on utilise les pseudo-classes suivantes: :link (état par défaut); :visited (lien pointant sur une page déjà visitée, et présente dans l'historique du navigateur); :hover (état survolé); :focus (état d'un élément qui a reçu «l'attention», par exemple un lien lorsqu'on y accède grâce au clavier, ou un champ texte d'un formulaire lorsqu'on clique dedans); :active (état cliqué). (Notons que si :link et :visited sont réservés aux liens (élément HTML a), les pseudo-classes :hover, :focus et :active peuvent s'appliquer à d'autres éléments.) Ordre des déclarations Attention à l'ordre des déclarations! Il faut donc définir une priorité pour savoir quel état doit s'appliquer. L'ordre classique (par priorité croissante) est le suivant: link < visited < hover < focus < active. On peut encore simplifier en se passant de la pseudo-classe :link.
Div et CSS : une mise en page rapide et facile Tout au long de cet exercice, nous allons utiliser deux fichiers : index.html : contiendra tout notre code HTML. style_div.css : contiendra toutes les informations relatives au positionnement de nos différents blocs. Pour inclure notre CSS dans notre page HTML, rien de plus simple, il nous suffit d'insérer le code suivant entre les balises <head> et </head> : Définissons tout d'abord les propriétés de base de nos blocs. Dans notre fichier CSS : Ce petit bout de code définit simplement que pour tous les éléments de type div, le texte sera centré (text-align). Nous allons commencer par créer un modèle de page tout bête, comprenant un bandeau, une zone de contenu, et un pied de page Nous alons définir (parfaitement arbitrairement) des couleurs (uniquement pour bien se représenter les positions) ainsi que les dimensions de nos différents blocs : Bandeau : 600 x 50 px - couleur : #00CCFF Contenu : 600 x 400 px - couleur : #FFCC00 Pied de page : 600 x 50 px - couleur : #33FF99 Mais, mais, mais !!!
Modèles de menus CSS Voici des modèles de menus de sites web réalisés en feuilles de styles CSS sans tableaux. Structure des menus Les menus sont structurés sous forme de listes : listes non ordonnées (ul, li) ou listes de définition (dl, dt, dd) pour les menus déroulants ou menus spéciaux avec titres et sous-parties. Vous êtes invités à voir la source HTML des menus avec un clic droit / "afficher source". Normes et Standards Tous les menus de la liste sont conformes aux Standards de langage actuel (XHTML Strict) tels qu'ils sont définis par le W3C. L'ensemble des menus est compatible avec la plupart des navigateurs internet respectant les Standards. Galerie de menus CSS : Horizontal simple 1 Vertical simple 1 Puces 1 Boutons 1 Graphique 1 : Médiéval Graphique 2 : Expérimental Graphique 3 : Portrait Graphique 4 : Smileys Graphique 5 : Coquelicots Graphique 6 : Minou Graphique 7 : Indéfinissable ! Menu Graphique 8 : Venise Menu Graphique 9 : Kitsch
Exemple de menu fixe en CSS solution avec "padding-top" Cette mise en page illustre la façon d'obtenir un menu fixe en haut, avec un bloc défilant dans la partie basse et ce, quel que soit le navigateur affichant la page. Quand on scinde une page en plusieurs blocs dont les défilements verticaux (ascenseur de droite) sont indépendants, on parle de "pseudo-frames". Cette page a été testée et s'affiche correctement sur : De la géométrie avec CSS Grâce aux CSS et à la nouvelle norme CSS3, nous pouvons créer de plus en plus de formes telles que les carrés, les rectangles, les ronds, etc. Dans cet article, je vais présenter les différentes possibilités de formes faisables en CSS (du moins une liste non exhaustive). Tous les exemples auront pour structure HTML cette base : Compatibilité : Chrome, Safari, Opera, Firefox 4, IE9.Compatibilité partielle : Firefox 3.5 et IE8 (problème avec le border-radius). 5 commentaires Article lu 102502 fois. Ici, rien de bien compliqué, il suffit de définir une largeur et une hauteur identiques pour chaque côté de notre élément HTML. Le principe est le même que le carré sauf que la largeur est plus grande que la hauteur (ou l'inverse selon l'effet désiré). Le rond est obtenu grâce à la propriété border-radius sur un élément carré. J'ai appris récemment que l'on pouvait donner deux valeurs au border-radius équivalant à l'arrondi de départ et l'arrondi d'arrivée d'un coin de bordure. Par exemple :
Identité et citoyenneté numérique — Enseigner avec le numérique Le site web Pédagogie numérique en action est un espace qui « a pour objet de faciliter les initiatives mises en œuvre pour assurer la réussite du virage au 21e siècle » notamment dans le domaine de l’éducation à l’ère numérique. Il s’adresse plus particulièrement aux écoles et aux conseils scolaires de langue française de l’Ontario. Outre les documents de fondement et autres écrits de référence, le site met tout particulièrement en valeur le jeu éducatif iCN, identité et citoyenneté numérique. Disponible en version primaire (élèves de la 3e à la 6e année) et en version secondaire (élèves de la 7e à la 10e année), cet outil ludique et éducatif interactif s'organise en 7 modules ayant trait au monde du numérique : données, identité, littératie, transactions, éthique, dépendance et discrimination. En complément, trois séries d’activités pédagogiques accompagnant ces 2 modules iCN sont mis à la disposition sur le site TacTIC du CFORP. Sources Réseaux et médias sociaux
Résolution, tablettes & smartphones Avec une troisième génération d’iPad, Apple a semé le trouble dans les résolutions d’écrans. En effet l’iPad 3 présente un nombre plus élevé de pixels que la majorité des PC avec une taille d’écran divisé par deux. Je propose donc un petit tableau pour essayer de faire le point sur le parc des résolutions d’écrans. Les smartphones convergent vers une taille physique de l’écran de 3,5 pouces. Les tablettes convergent aussi vers un format « livre » entre 7 et 10 pouces, avec une bordure autour de l’écran permettant de le tenir, pendant qu’on le manipule de l’autre mains. Il est probable que les prochains supports à bénéficier d’un écran « rétina » soit les ordinateurs portables avec des écrans de 11 à 15 pouces et une distance d’usage un peu supérieur à 40 cm. [MAJ] c’est le cas maintenant avec le MacbookPro Retina. Quelques ressources pour se dépatouiller avec la technique Comme il y a des gens plus compétent que moi dans le domaine, je vous propose quelques liens :
Ouvrir une URL en JavaScript avec l’objet window | Développement Web I. Présentation Vous connaissez surement les liens HTML grâce à la balise <A> et son attribut « HREF » où l’on indique l’URL du lien à suivre en cas de clique sur l’élément <A>. Cependant, grâce au JavaScript il est possible d’effectuer une redirection de la page en cours vers une autre page ou de l’ouverture d’une page dans une nouvelle fenêtre, selon un événement précis (clique sur une image, passage de la souris sur une image,…). Pour cela il faut utiliser l’attribut « href » du sous-objet « location », qui est un objet de « window », qui permet de rediriger l’utilisateur vers la page indiquée en valeur de l’attribut, ou bien alors utiliser le sous-objet « open » de l’objet « window » qui permet d’ouvrir l’URL passée en paramètre dans une nouvelle fenêtre de navigateur. II. Comme je l’ai dis ci-dessus, window.location.href permet une redirection de la page en cours vers l’URL précisée en paramètre, cela s’écrit de la manière suivante : window.location.href=" III.
jQuery Mobile | jQuery Mobile Boîtes de dialogue en Javascript - Avec les méthodes ALERT, CONFIRM et PROMPT - Trucsweb.com · Niveau : DÉBUTANT· Compatibilité : Tous les navigateurs La plupart des langages de programmation utilisent les boîtes de messages du système et la programmation Web n’y échappe pas. Il y a 3 méthodes, l’alerte ou " Alert dialog box " qui permet d’afficher un simple message avec un bouton fermé, la confirmation ou " Confirm dialog box " qui retourne une valeur booléenne selon un choix " oui ou non " du visiteur et finalement la méthode " Prompt " qui permet la saisie et le retour d’une valeur entrée par le visiteur. Noter que l’apparence des boîtes de dialogue change selon le système d’exploitation et le navigateur. Il n’est pas possible de changer le texte des boutons. ATTENTION de toujours utiliser des minuscules, l’erreur la plus fréquente… " Alert dialog box "Afficher un message dynamique dans une boîte de dialogue avec un bouton " fermer " est souvent utilisé pour souhaiter la bienvenue aux visiteurs ou encore indiquer une erreur dans la saisie d’un formulaire. Exemples : ou
960 Grid System