Search code examples
htmlcssbuttonheaderhref

Text wont go on the header

The href buttons will not go on the header, I have no clue why, please help me out on this. I've tried around with margin-top, but the minimum on that is -14px which isnt enough. I have no clue what other code to use. I am a beginner in css and am still learning.

I want the buttons to be in the middle height of the header, forgot to mention that, sorry.

styles.css

    body { 
    margin: 0; 
    padding: 0; 
} 

header div, main { 
    max-width: 100%; 
    margin: 0 auto; 
    padding: 0 1em 0 1em;   
} 

header { 
    background: #d000c2; 
    width: 100%; 
    height: 40px;
    position: absolute; 
    -webkit-box-shadow: 0px 3px 5px rgba(100, 100, 100, 0.49);
    -moz-box-shadow:    0px 3px 5px rgba(100, 100, 100, 0.49);
    box-shadow:         0px 3px 5px rgba(100, 100, 100, 0.49);
}

header h1 { 
    float: left;
    margin-top: 0px;
} 

main { 
    padding: 21; 
} 

header a { 
    margin-top: -14px;
    text-decoration: none; 
    color: white; 
} 

header li {
    text-transform: uppercase;
    display: inline; 
    margin-right: -14 px;
    margin-top: 0 px;
    font-family: Helvetica;
    font-size: 24px;
    z-index: 11;
}

header a:hover {
    border-top: 3px cyan;
    border-style: solid;
    border-bottom: 0px white;
    border-right: 0px white;
    border-left: 0px white;
 }

header li a:hover { 
    color: cyan;
} 

header ul { 
    float: right; 
    list-style-type: none; 
    padding-top: 1em; 
} 

#vid{
            position:fixed;
            right:0;
            bottom:0;
            min-width:100%;
            min-height:100%;
            background-size:cover;
            z-index: -1;
            }

@media only screen and (max-width: 520px) { 
    header { 
        text-align: center;
        position: relative; 
    } 
    main { 
        padding: 14 px; 
        } 
    header h1 { 
        float: none; 
        margin: 0; 
    } 
    header ul { 
        float: none; 
        margin: 0;
    } 
}

index.html

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <link href="./css/styles.css" rel="stylesheet">
</head>
<body>

    <header>
        <div>
            <h1><img src=""></h1>
            <ul>
                <li><a href="#">home</a></li>
                <li>  </li>
                <li><a href="">log-in</a></li>
                <li>  </li>
                <li><a href="">contact</a></li>
                <li>  </li>
                <li><a href="">test</a></li>
            </ul>
        </div>
    </header>
    <main>
        <video autoplay loop id="vid">
            <source src="./videos/background.mp4" type="video/webm">
        </video>        
    </main> 
</body>

Solution

  • See the fiddle

    The reason why the <li> tags will not go on the header is because of the 1em padding-top applied for header ul.

    Thus, the new CSS for header ul would be like this

    header ul { 
    float: right; 
    list-style-type: none; 
    /* padding-top: 1em; */ 
}

    UPDATE

    To centralize, the links vertically inside the header, you may use flexbox.

    Please see the fiddle that uses