Website Navigation

17 Dec

I have recently been working on the navigation for my portfolio website. To do this I have been using Brackets, a free source coding software produced by Adobe. I used a mixture of HTML 5 and CSS 3 to produce the look that I require.

Image

I chose to colour the text of each of the navigation button a pastel red. When working with the CSS I wanted to have a hover over feature so that when someone moved their mouse over a button the text would change white. This was the code I used to implement this function.

 nav ul li a:hover {

            color: white;  

}

The problem I had then was that I also had a white rounded rectangle that was applied to the current page the viewer was on, this meant that when the user hovered over the current page the text would then also change white, resulting in not being able to see the text due to white on white. To change this I had to write another line of code to overwrite the hover feature only on the current page, this was the code used to do this.

nav ul li a.currentpage:hover {

    color:#67CE8A;

}

Image

To style the white box around the current page navigation button I added a background colour line of code the navigation styling and also added a line to made the top left and right corners have an 11px-rounded edge. Below is the code that I used to implement this.

.currentpage {

    color: #67CE8A;

    background-color: white;      

    border-radius: 11px 11px 0px 0px;

    -moz-border-radius: 11px 11px 0px 0px;

    -webkit-border-radius: 11px 11px 0px 0px;

}

Advertisements

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

%d bloggers like this: