O'Reilly logo

Raspberry Pi For Dummies by Mike Cook, Sean McManus

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Creating a Navigation Bar from a List

At the top of our web page is a list of links. We want to turn them into a navigation bar, a set of horizontal buttons. But we only want to make this list a navbar: We don’t want to affect other links or lists on the page. The first step is to add <div> tags to the HTML file to mark where the navbar starts and ends, like this:

<div class=”nav”>

<ul>

<li><a href=”index.html”>Home</a></li>

<li><a href=”galleries.html”>Galleries</a></li>

<li><a href=”tips.html”>Photography tips</a></li>

<li><a href=”contact.html”>Contact</a></li>

</ul>

</div>

We’ve used the class name nav for the navbar, so in the CSS file, add the following line, which makes the list items appear side by side, instead of starting a new line for each one:

.nav ul li { display:inline; }

Now you can style the links inside the nav class so they look like buttons. That just means turning off the underlining on the link text, making the text bold, using a light color on a dark background (we’ve chosen white on blue), and adding some padding to make the link appear bigger, like a button. Here’s the CSS code you need:

.nav a { text-decoration: none;

font-weight: bold;

color: white;

padding: 8px;

background-color: blue;

border: 1px blue solid;

border-radius: 16px; }

The last line makes the corners of the buttons rounded. It doesn’t work on some other browsers (including Netsurf on your Raspberry Pi), but browsers that don’t understand it just ignore it and show normal square ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required