CODEWITHSUNDEEP
htmlcss
canthandlehtml
canthandlehtml

Reputation: 93

Navigation bar buttons fall in one place

I've only started programming with html two days ago, I've searched all over the internet for a solution to my problem. Know this, that my html knowledge is very poor at this moment so please don't be harsh.

My problem is that the navigation bar I came up with is being lumped into one place.

.button {
    position: fixed;
    text-decoration: none;
    color: #ffffff;
    background-color: #E7EDE7;
    color: #0d96d6;
    line-height: 3em;
    display: block;
    padding-left: 10px;
    padding-right: 10px;
    font-family: courier new;
    -moz-transition: 1s linear;
    -ms-transition: 1s linear;
    -o-transition: 1s linear;
    -webkit-transition: 1s linear;
    transition: 1s linear;
}
.mainn {
    width: 64em;
    height: 25em;
    position: fixed;
}
.menuu {
    background-color: #E7EDE7;
    height: 3em;
    position: fixed;
}
<div class="menuu">
    <div class="mainn">
        <a class="button" href="home.html"> Home </a>
        <a class="button" href="contacts.html"> Contacts </a>
        <a class="button" href="pictures.html"> Pictures </a>
    </div>
</div>

enter image description here

Upvotes: 1

Views: 49

Answers (3)

zgood
zgood

Reputation: 12611

Remove the position:fixed from your button class.

Also use the . for targeting classes.

#menuu should be .menuu

you have position:fixed; on all your buttons and have not set a top, bottom, left, or right so the will all default to top:0; and left:0; which will in turn stack them all

For reference, read this article about CSS positioning

Upvotes: 1

K2R
K2R

Reputation: 163

On your button class you may want to change to 

display: inline

and add a 

width

Upvotes: 0

markegli
markegli

Reputation: 398

This is luckily a pretty simple problem. You just need to remove position: fixed from the styling for your buttons, as this is what is causing them to overlap!

You can get a better understanding of how layout and positioning works in CSS by looking at The Mozilla documentation for the position attribute. Setting an item's position to fixed lays it out on the page relative to the parent element without any consideration for sibling elements.

Upvotes: 0

Related Questions