Simple scalable CSS based breadcrumbs | Veerle's blog. A few days ago I was implementing breadcrumbs in a website I’m working on. Not that I sincerely believe every site needs this, but on some occasions and to some users breadcrumbs are practical. Anyhow, it gave me the idea to write an article about it because it’s been a while since I last wrote about anything CSS-related. The one I’ll share with you is a very simple one.
It uses only one simple graphic. The rest is basic CSS styling with an unordered list as HTML code. The one I implemented in the project I'm working on looks a bit similar, but was more complex to code. The HTML code Here is our HTML code. <ul id="crumbs"> <li><a href="#">Home</a></li> <li><a href="#">Main section</a></li> <li><a href="#">Sub section</a></li> <li><a href="#">Sub sub section</a></li> <li>The page you are on right now</li> </ul> All items have links, except the page you're on. The CSS Here is the CSS styling: I've given the list an ID called #crumbs.
We want to have the entire arrow area clickble. Contourner le code CSS avec des hacks - CSS / Firefox, IE6, IE7. Le hack, comme le précise Wikipedia, est un terme employé en informatique pour désigner une analyse de code, parfois une optimisation, pour une meilleure utilisation. Le hack CSS est souvent employé par le webmaster pour s’assurer d’un affichage similaire de son site sur les différents navigateurs. A vrai dire, il s’agit plus de l’utilisation de bugs du navigateur, l’interprétation du code CSS employé, ou de son manque de conformité à la norme CSS.
Il ne s’agit pas réellement ici d’une optimisation de code, mais plutôt d’un contournement. Par exemple, quelques lignes de CSS : Affiche le titre (h1) en rouge pour les navigateurs qui respectent au mieux CSS, en vert pour IE6 et en bleu pour IE7. Le seul défaut de cet exemple, c’est qu’il n’est lui aussi pas conforme à CSS. Les erreurs sont signalées ici dans les commentaires respectifs.
Dans la même lignée, vous pouvez aussi utiliser : La première ligne définit le titre en noir, la seconde en bleu pour IE6 et IE7, la dernière en vert pour IE6. CSS débutant : les feuilles de style en cascade. Initiation au positionnement CSS : 3. position absolue et fixe. La position absolue et la position fixe permettent de placer une boîte par rapport aux limites de la zone d’affichage ou du conteneur.
Comment les utiliser dans une mise en page CSS ? Cet article fait suite à l'initiation au positionnement CSS: 2.position float. Une boîte en positionnement absolu peut être placée n'importe-où dans le code HTML et s'afficher à l'endroit de votre choix. Ceci s'avère très utile en particulier pour : placer les menus de navigation en fin de page, pour améliorer l'accessibilité de votre site en donnant un accès immédiat à son contenu dans les navigateurs textes, tout en les faisant apparaître en haut de page ou encore dans une colonne pour les navigateurs graphiques ; créer plusieurs colonnes au positionnement indépendant de l'ordre dans lequel elles se trouvent en HTML. Le fonctionnement de la position absolue Le positionnement absolu « retire » totalement du flux le contenu concerné : sa position est déterminée par référence aux limites du conteneur.
En CSS : CSS Background Properties.