Editing my CSS for single navbar- want it chopped off at sides

[Edrol97]

Hi all,

I've got a navbar I want to create similar to the one below.



Currently my satirical version looks like this-



There are a few problems with the navbar- namely the shape of it- I want it to be slimmer cut down at the sides to about 75% width, and also there is a hover effect on the topnav in the first picture, that changes each of the menu options to a different colour. After trying defining each link as a specific class, i.e.,

<div class="topnavmail">
<a class="about" href="about_me.html">About</a>

and then styling the class

.topnavmail .about a:hover {
  color: red;
}

 

[Johna]

Rather than giving each link it's own class name, you could select all <a> elements in the parent .topnavmail element:

.topnavmail a:hover {
  color: red;
}

For the width of the header, set width: 75%; to the header element, and then you can add margin: 0 auto; to centre align the header.

 

[Edrol97]

Rather than giving each link it's own class name, you could select all <a> elements in the parent .topnavmail element:

.topnavmail a:hover {
  color: red;
}

For the width of the header, set width: 75%; to the header element, and then you can add margin: 0 auto; to centre align the header.

Hi John,

The problem is I want each <a> element in .topnavmail to appear a different colour on hover. I've done the margin: 0 auto for the header, and it works, but when I try and input the same logic for the footer, it doesn't position it to the center. The footer I wish to create a near repica of from the top footer up is below.


Currently what i have is this:




The width: 75% made the footer I had float to the very left despite having no left attribute set on it. I thought float: center could work, but tried that and it didn't

How would you rectify this?

Thanks,

Eliot

 

[Johna]

The float property doesn't have such a value as center, and I would normally advise against using the float property for aligning elements in this way.

If you have float: left; on this footer element, try removing it and applying the margin: 0 auto; to the footer. Otherwise, could you post the HTML and CSS for the footer element?

 

[tomliv]

You don't have a lot of links in the nav so you could use:

.topnavmail a:nth-of-type(1):hover{
    color: red;
}
.topnavmail a:nth-of-type(2):hover{
    color: pink;
}

and so on. You might need to adjust this selector if there is structure between .topnavmail and the <a> such as if your nav links are in a <ul>. If that is the case, the selector would change to:

.topnavmail li:nth-of-type(1) a:hover{
    color: red;
}
.topnavmail li:nth-of-type(2) a:hover{
    color: pink;
}

and so on.