Comment créer une barre de navigation à partir d'une liste sur la PI de framboise

Au sommet d'une page web est une liste de liens. Vous souhaitez utiliser votre Raspberry Pi pour les transformer en une barre de navigation, un ensemble de boutons horizontales. Mais vous voulez seulement faire cette liste un navbar- vous ne voulez pas affecter d'autres liens ou des listes sur la page.

La première étape consiste à ajouter

balises pour le fichier HTML pour marquer où la barre de navigation commence et se termine, comme ceci:

Accueil
Galeries
Conseils photo
Contact

Vous verrez le nom de classe nav pour la barre de navigation, donc dans le fichier CSS, ajoutez la ligne suivante, ce qui rend les éléments de la liste apparaissent côte à côte, au lieu de commencer une nouvelle ligne pour chacun d'eux:

.nav ul li {display: inline-}

Maintenant, vous pouvez coiffer les liens à l'intérieur du nav classe afin qu'elles ressemblent à des boutons. Cela signifie tout simplement éteindre le soulignement sur le texte du lien, ce qui rend le texte en gras, en utilisant une couleur claire sur un fond sombre (nous avons choisi blanc sur fond bleu), et en ajoutant quelques rembourrage pour faire le lien apparaît plus grand, comme un bouton. Voici le code CSS vous avez besoin:

.nav un {text-decoration: none; font-weight: bold-color: white-padding: 8px; background-color: blue-border: 1px solide bleu-border-radius: 16px; }

La dernière ligne rend les coins des boutons arrondis. Il ne fonctionne pas sur certains autres navigateurs (y compris Netsurf sur votre Raspberry Pi), mais les navigateurs qui ne le comprennent pas simplement l'ignorer et de montrer coins carrés normales place, donc il est possible de l'inclure. En ligne, vous pouvez trouver des solutions que vous pouvez utiliser pour faire des coins arrondis travaillent sur d'autres navigateurs.

Vous avez maintenant une barre de navigation de travail créé à partir d'une liste. Vous remarquerez peut-être, cependant, qu'il est pas aligné avec le reste de votre contenu, et il est légèrement en retrait. Cela est parce que la liste a certains types de remplissage sur elle habituellement, si vous avez besoin d'enlever cela. Voici comment:

.nav ul {padding: 0px; }

A propos Auteur

Comment faire pour activer des liens dans des boutons pour HTML5 et CSS3 programmation

En ce qui concerne le code HTML5 est concerné, il est tout simplement une liste de liens. Il n'y a rien de spécial ici qui rend cet acte comme un groupe de boutons, à l'exception de la création d'un div appelé menu. Tout le travail réel se…

Conversion des noms de propriété CSS à javascript

Vous pouvez convertir les noms de propriétés CSS pour javascript. Cependant, il ya quelques choses que vous devriez vous rappeler si vous prévoyez de le faire. Lors du changement de styles avec javascript, il ya quelques règles…

Comment formater les listes de votre page web sur la PI de framboise

Lors de la création d'une page sur le Raspberry Pi web, vous aurez probablement besoin de savoir comment formater une liste. Les listes sont utilisées plus que vous pourriez penser à communiquer des informations, donc il ya un moyen standard de…

Trouver votre destination avec la barre de navigation eBay

La barre de navigation est en haut de chaque page eBay et énumère cinq liens qui vous mèneront directement à différentes sections d'eBay. Planant au-dessus certains des liens dévoile une liste de sous-navigation avec des liens vers d'autres,…

Quatre types de feuilles de style en cascade dans la conception web

Cascading Style Sheets (CSS) se répartissent en quatre types différents (ou styles). Lorsque vous comprenez comment ces quatre types différents de travailler, vous serez coiffer vos pages Web plus efficacement.Pour garder votre CSS organisée,…

Comment appliquer l'effet border-radius CSS3

L'effet CSS3 border-radius définit des coins arrondis. Et, vous devez utiliser des préfixes spécifiques au navigateur lors de la définition d'un border-radius. Voici quelques règles pour définir un border-radius:Vous ne pouvez pas appliquer un…

Comment créer une barre de navigation

Création d'une simple barre de navigation de texte sur votre site Web est utile. Même une barre de navigation simple composé de texte est la différence entre un site Web site et une masse sans lien de pages Web. Création d'une barre de…

Comment créer une barre de navigation de texte en html

Y compris une barre de navigation permet à vos lecteurs à trouver des informations sur votre site. Si vous construisez votre page Web dans un éditeur de texte HTML, le codage pour créer une barre de navigation est facile. Voici un exemple d'une…

Comment mettre en place une navigation rapide avec CSS3

La plupart des sites offrent une certaine sorte d'aide de navigation du site. Si vous ne fournissez pas ce genre de soutien avec votre programmation de CSS3, l'utilisateur peut se perdre et vous perdrez affaires ou au moins une activité. Navigation…

Comment faire pour coiffer les paragraphes, les titres, et les pieds avec CSS3

Lorsque vous êtes style paragraphes, titres, et pieds de page, la plupart des travaux peuvent être automatiquement accompli par la création de styles tag Redéfinir pour le tag et cependant de nombreuses balises de titre que vous souhaitez…

Comment faire pour coiffer listes et des tableaux avec CSS3

Listes de style et tables est un peu différent de coiffage contenu dans le corps de la page, parce que les deux listes et des tableaux ont des étiquettes spécifiques qui peuvent être redéfinis pour contrôler la façon dont le contenu se trouve…

Faire des coins arrondis avec CSS 3

Si vous avez créé une boîte avec des coins arrondis en utilisant les versions précédentes de CSS, des images et des tableaux HTML, vous savez ce qu'est une douleur, il était - comment vous aviez à créer quatre images (une pour chaque coin),…

Comment créer des liens de navigation dans vos e-mails de marketing

Y compris les liens de navigation dans vos e-mails marketing peuvent économiser votre temps d'audience et les diriger vers exactement où vous voulez qu'ils soient. Créer des liens comme une table des matières ou de prendre votre auditoire à des…

Création d'un lien de blog Drupal

Créer des liens sur votre blog Drupal est un bon moyen pour vos visiteurs de se déplacer facilement parmi vos pages et donne de nouveaux visiteurs la chance d'explorer vos anciens messages. Si vous cliquez sur le lien vers votre blog Drupal sous…

godiches.com » Ordinateurs et logiciels » Tarte aux framboises » Tarte aux framboises » Comment créer une barre de navigation à partir d'une liste sur la PI de framboise