Créer un menu full CSS horizontal. - Voici une méthode pour créer un menu full CSS horizontal. Tout tient dans le style d’une liste appliqué grâce à CSS mais le résultat est vraiment sympa. Bien dans le style web 2.0. Pour voir le résultat final de ce menu rendez vous sur cette page : Allez c’est partit. Je crée un nouveau fichier HTML avec les éléments de base html. <! Je vais commencer par créer ma liste en HTML, je vais pour cela utiliser les balises ul et li pour les différents boutons. Voici le code HTML correspondant à la liste : <ul> <li><a href="#">Accueil</a></li> <li><a href="#">Produits</a></li> <li><a href="#">Services</a></li> <li><a href="#">Références</a></li> <li><a href="#">Contacter nous</a></li> <li><a href="#">Partenaires</a></li> </ul> Je vais maintenant créer une classe en css qui va me permettre de styliser mon menu, cela va s’articuler en deux étapes : 1 Je vais simplement créer la structure de ma classe : .menu { }
La transparence de couleur avec RGBa en CSS3 Le module de couleurs de CSS3 introduit la notion de transparence dans les valeurs associées à une couleur, l'écriture RGBa. Cette composante de la couleur permet de jouer sur les effets d'opacité entre les différentes couches d'éléments HTML. Contrairement à ce que l'on peut croire, le principe de la transparence RGBa est radicalement différent de la propriété opacity (également CSS3 mais assez ancienne déjà) : cette dernière est une propriété qui s'applique à l'élément dans son intégralité (ainsi qu'à tous ses descendants) tandis que RGBa est une valeur qui s'applique à une propriété de l'élément sélectionné uniquement. De ce fait, RGBa est susceptible de s'appliquer à toutes les propriétés dont la valeur peut être une couleur : background-color, color, border-color, box-shadow, text-shadow, etc. Voici une illustration du principe de transparence de la couche Alpha (RGBa) (Voir le résultat (RGBa) sur votre navigateur) : Principe de la notation RGBa <div><h1>Joli titre</h1></div>
The Definitive Guide to symfony | Chapter 3 - Running Symfony As you've learned in previous chapters, the symfony framework is a set of files written in PHP. A symfony project uses these files, so installing symfony means getting these files and making them available for the project. Being a PHP 5 framework, symfony requires PHP 5. Make sure you have it installed by opening a command line and typing this command: > php -v PHP 5.2.0 (cli) (built: Nov 2 2006 11:57:36) Copyright (c) 1997-2006 The PHP Group Zend Engine v2.2.0, Copyright (c) 1998-2006 Zend Technologies If the version number is 5.0 or higher, then you're ready for the installation, as described in this chapter. Installing the Sandbox If you just want to see what symfony is capable of, you'll probably go for the fast installation. The sandbox is a simple archive of files. To install it, download the sandbox archive from /get/sf_sandbox.tgz. caution Having all the files under the root web directory is fine for your own tests in a local host, but is a bad practice in a production server. > . tip
Mise en page CSS avancée grâce à la propriété display L'abandon par de plus en plus d'intégrateurs de l'utilisation de tableaux pour l'élaboration de mises en page a indiscutablement apporté de nombreux avantages, mais également son lot d'inconvénients. Parmi ceux-ci, un majeur: le centrage vertical simple et automatisé du contenu d'un objet. Les habitudes de plusieurs années de développement par tables ont laissé des traces, des habitudes ancrées de manière indélébile qui ne sont pas systématiquement préjudiciables; c'est entre autres le cas du recours à la propriété vertical-align. Fort de ce constat, et vu la puissance qu'offre les cellules de tableaux en terme d'alignement vertical de leurs contenus, la spécification CSS admet logiquement l'attribution de ce comportement à tout élément qui en nécessiterait. Prenons un exemple simple de disposition d'un texte scindé en trois paragraphes que l'on souhaite agencer en drapeau: Logiquement, ma structure HTML sera des plus simplistes:
javascript - toujours centrer un element Voici une fonction qui vous permettra de positionner un élément au centre de son parent. La fonction javascript function centerPopup(element) { var height=document.getElementById(element).offsetHeight;//hauteur de l'élément à positionner var width=document.getElementById(element).offsetWidth;//largeur de l'élément à positionner myParent=document.getElementById(element).parentNode; var pHeight=myParent.offsetHeight;//Hauteur de l'élément parent var pWidth=myParent.offsetWidth;//Largeur de l'élément parent var sTop=myParent.scrollTop;//Hauteur de défilement de l'élément parent var sLeft=myParent.scrollLeft;//Longueur de défilement de l'élément parent var posY=(pHeight/2)-(height/2)+sTop;//Calcul de la position en Y var posX=(pWidth/2)-(width/2)+sLeft;//Calcul de la position en X document.getElementById(element).style.top=posY+"px"; document.getElementById(element).style.left=posX+"px"; } Utilisation Il vous suffit d'appeler la fonction de cette manière. centerPopup('idDeMonElement');
CSS current work & how to participate Explanation of colors & status codes W3C indicates the maturity of specifications by a status code. The CSS working group uses the following, from least to most stable: The names are defined in sections 7.3 and 7.4 of the W3C process document. A REC is what is normally referred to as a “standard.” W3C encourages everyday use starting from CR. The informal stability levels used to group the specs are defined in this 2007 description of CSS stability levels. If you want to help Everybody can take part in the discussions on the archived mailing list www-style@w3.org. On the mailing list, you will be talking to many people, many very busy people. If you are sending comments on a specific CSS module, please prefix the subject of your message with the appropriate spec code (given in the “Status of this document” section) in brackets, e.g. Laurens Holst (a.k.a. If you work for a W3C member organization, you can also join the CSS working group and see drafts before they are published.
Symfony avec WAMP 1. Modifier la configuration Apache / PHP Nous allons commencer par modifier la configuration PHP. Dans ce fichier php.ini, faites une recherche sur la valeur memory_limit, et vérifiez que vous avez la ligne :memory_limit = 128M En effet, il se peut que la valeur soit moins élevée que 128M (16M, 32M..), mais il faut mettre 128M pour que Symfony puisse bien fonctionner. Refaites exactement la même opération avec le fichier php.ini qui se trouve dans le répertoire bin\apache\apache2.2.8\bin de Wamp cette fois-ci : Nous allons maintenant modifier la configuration Apache, pour activer le module de réécriture d'URLs, car Symfony s'en sert beaucoup. Trouvez la ligne "LoadModule rewrite_module modules/mod_rewrite.so" et enlevez le caractère # qui se trouve au début de cette ligne, s'il y en a un (= décommentez cette ligne). Sauvegardez. Enfin, nous allons modifier la variale d'environnement "PATH". Cliquez sur le bouton "Modifier" afin de l'éditer. Cliquez sur "OK" pour valider. 2. 3.
CSS Débutant : les CSS3 Réaliser des coins arrondis Arrondir les coins est sûrement l'un des effets graphiques les plus recherchés par les webdesigners. Pour cela, on a longtemps utilisé des images avec plus ou moins de bonheur et de facilité pour obtenir l'effet recherché. Tous les navigateurs récents permettent à présent d'arrondir les coins de cadres, d'images, de tableaux etc. avec une facilité déconcertante. Créer des ombres sur les boites et du texte Ombrer des boites ou du texte sans images c'est possible ! Voici les explications, illustrées de quelques exemples, de réalisations d'ombres en CSS. Images multiples dans un même background La propriété background-image n'acceptait, en CSS 2.1, qu'une seule image. Les CSS3 permettent des background multiples, et maintenant que même Internet Explorer (version 9) l'implémente, pourquoi s'en priver ? Réaliser des fonds en dégradé sans image On peut maintenant s'en passer grâce à de nouvelles valeurs de background : linear-gradient et radial-gradient. Les Media-Queries
Installer Symfony en local avec Wamp Ovale et forme elliptique avec CSS3 sans image La propriété border-radius offre la possibilité d'arrondir les angles de vos blocs en CSS 3. Comme le présente très bien cet article de Raphaël sur le border-radius, son utilisation est plutôt aisée. Une utilisationp plus poussée La propriété border-radius de CSS3 prévoit une utilisation plus poussée puisqu'elle permet d'accueillir deux valeurs pour chaque angle de boîte à modifier dans l'optique de générer des formes très variées, voire elliptiques. Voici comment pourrait se présenter un de ces codes : Les deux valeurs utilisées représentent l'arrondi horizontal, pour la première, et l'arrondi vertical, pour la seconde. Comme vous pouvez le constater, l'utilisation d'un slash entre les deux valeurs est indispensable pour un souci de compatibilité entre les navigateurs. Mais encore... ? En poussant le vice un peu plus loin on peut facilement imaginer construire un ovale. Les dimensions des arrondis d'un ovale sont de moitié égales à celles du rectangle qui le contient. Allons plus loin
Tutorial : mettre en place SVN Subversion avec WampServer | Blog de Stéphane Quantin Subversion est un système de gestion de version. Cela permet de garder les différentes versions de chaque fichier du projet. Ainsi en cas d'erreurs ou de retour vers une version précédente du site, il est très simple de retrouver la version désirée. WampServer disposant d'un serveur Apache, il est possible d'intégrer SVN pour qu'il l'utilise et ainsi pouvoir disposer d'un serveur SVN sous Windows. Il faut d'abord télécharger les fichiers binaires sources de SVN. Une fois le téléchargement fini et l'installation lancée, l'installeur proposera comme chemin par défaut C:\Program Files\Subversion\. Une fois l'installation finie, il faut créer un répertoire pour les repository, qui sera par exemple c:\wamp\svn\repos. cd c:\wamp\svn Maintenant pour créer le dossier repos : mkdir repos Après être passé dans le dossier repos (cd repos), il faut créer un dossier pour le projet : mkdir projet1 Et finalement, il faut créer le repository SVN pour ce projet en utilisant la commande svnadmin : [/]*=r
Créer des coins arrondis en CSS et sans images Vouloir créer facilement des blocs aux coins arrondis est un rêve de webdesigner aussi vieux que le Web lui-même. Traditionnellement, depuis les débuts du web, on réalisait ceci à l'aide de plusieurs éléments <div> imbriqués (ou autres), ou à l'aide d'un tableau à 9 cellules : la cellule du centre accueillait le contenu, tandis que les autres recevaient des images ou des images de fond étirables afin de dessiner les quatre coins et les bordures. Cette technique est généralement lourde et peu accessible. C'est pourquoi depuis quelques années et l'avènement des feuilles de style, de multiples techniques ont vu le jour pour proposer des solutions que l'on peut regrouper selon les critères suivants : avec ou sans images, avec ou sans JavaScript, avec ou sans ajout de markup (éléments dans le code HTML), fluide ou non fluide (blocs étirables en hauteur et/ou en largeur selon le contenu), toutes plus ou moins accessibles. Simple et approprié : border-radius Exemple : Et c'est tout !
Plusieurs projets symfony sous Wamp Vous avez certainement déjà souhaiter gérer plusieurs projets symfony sur votre machine après avoir installé Wamp Server. Ce n'est pas simple en apparence, un seul dossier www et des sous répertoire en alias... Alors qu'en réalité, tous les outils pour une gestion, en local, de vos projets sont présent. Cette méthode n'est pas la seul, ni la meilleur, c'est la mienne et elle me convient. Pourquoi pas à vous ? Installation de wamp Rien a dire de particulier, je vous laisse le soins de télécharger et d'installer où vous le souhaitez votre wamp favori. Configuration DNS (quoique) Pour utiliser plusieurs sites sur votre machine, il vous faudra plusieurs nom de domaine, mais comment avoir plusieurs nom de domaine là où l'on vous à toujours certifié que windows, en local, ne connaissait que le localhost ? Ajouter lui, pour chaque site de test que vous souhaitez utiliser une entrée du style : 127.0.0.1 www.test.loc La structure de dossier pour nos applications J'ai placé wamp aussi.