Fighting with CSS questions – a way from newbie to master CSS

May 1, 2007

6th ques: Can you create a simple Navigation Menu?

Filed under: --- Level: 2, ♥ List of CSS Questions — cssquestions @ 9:26 am

A website must have a Navigation Menu (or Navigation Bar). Can you create a Navigation Menu like the following one:

Picture of Navigation Menu

==============Some more knowledge==================

- The link you’ve visited is called “visited link” – its color is always changed by browser. In the example above, the visited link is in purple color (the ones you haven’t visited is in blue color)

About these ads

5 Comments »

  1. <html>
    <title>My firs styled page </title>
    <head>
    <style type=”text/css”>
    body {
    padding left: 20 em
    font-family: arial;
    color: red;
    background-color: yellow;
    }
    ul.navbar {
    list-style-type: none;
    padding: 1em;
    margin: 0.1em;
    top: 2em;
    left: 2em;
    width: 10em
    }
    h1 {
    font-family: arial;
    font-size: 25pt;
    }
    ul.navbar li {
    background: white;
    margin: 1em 0;
    padding:1em;
    border-right: 1em solid black }
    ul.navbar a {
    text-decoration: none }
    a:link {
    color: blue }
    a:visited {
    color: purple }
    </style>
    </head>

    <body>
    <p>
    <ul class=”navbar”>
    <li><a href=”homepage.htm”>
    homepage</a> </li>
    <li><a href=”musing.htm”>
    musings</a> </li>
    <li><a href=”musing.htm”>
    musings</a> </li>
    <li><a href=”link.htm”>
    link</a></li>
    </ul>
    </body>
    </html>

    Comment by trang do — May 3, 2007 @ 4:04 pm

  2. Have you tested your html file? It doesn’t work. I’ve checked your post, the html file doesn’t look like the example.

    Some wrong things:
    1)You forgot again: the head includes the title.
    2) the h1-style is for nothing. (’cause no h1 in the body)
    3) a:link {
    color: blue => you’ve lost a “;” in the end.

    Comment by cssquestions — May 4, 2007 @ 3:36 am

  3. oh, how strange! I checked and it worked. I’ll fix what u say

    Comment by trang do — May 4, 2007 @ 12:37 pm

  4. <html>
    <head>
    <title>My firs styled page </title>
    <style type=”text/css”>
    body {
    background-color: green; }
    ul.navbar {
    list-style-type: none;
    padding: 1em;
    margin: 0.1em;
    top: 2em;
    left: 2em;
    width: 10em
    }
    ul.navbar li {
    background: white;
    margin-top: 1em;
    margin-bottom:0;
    padding:1em;
    border-right: 1em solid black }
    ul.navbar a {
    text-decoration: none }
    a:link {
    color: blue; }
    a:visited {
    color: purple; }
    </style>
    </head>

    <body>
    <p>
    <ul class=”navbar”>
    <li><a href=”homepage.htm”>
    homepage</a> </li>
    <li><a href=”musing.htm”>
    musings</a> </li>
    <li><a href=”musing.htm”>
    musings</a> </li>
    <li><a href=”link.htm”>
    link</a></li>
    </ul>
    </body>
    </html>

    Comment by trang do — May 4, 2007 @ 12:41 pm

  5. Please check your answer on both IE and FF:
    http://cssquestions.wordpress.com/learners-tips/

    Do you see some differences?

    Comment by cssquestions — May 5, 2007 @ 5:38 am


RSS feed for comments on this post. TrackBack URI

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

The Banana Smoothie Theme. Blog at WordPress.com.

Follow

Get every new post delivered to your Inbox.

%d bloggers like this: