Place button in the center of the page which already has a navigation bar at the top

Anurag

New Member
#1
My button is getting placed behind my navigation bar.(The blue outline which can be seen is actually the box which is wrongly placed.)How can I place the Enroll now box in the center of the page?I have tried using a separate class for my button link but nothing seems to work.

HTML
Mã:
<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Counter Strike</title>
 <!--<link rel="stylesheet" type="text/css" href="cs.css">-->
 <link rel="stylesheet" type="text/css" href="csx.css">
</head>
<body>
<section class="screen">
    <div class="inner">
        <div class="cs-img">
            <img src="https://www.nvidia.com/content/dam/en-zz/Solutions/geforce/products/10series/counter-strike/NV-GF-GTX-Game-Ready-logo-RGB.png"><img src="http://media.kingston.com/images/hyperx-logo-lrg.png">
        </div>
        <div class="menu">
            <ul>
    <li><a href="#">Home</a></li>       
    <li><a href="#">About</a>
    <ul>
        <li><a href="#">Our Team</a></li>
        <li><a href="#">Mission</a></li>
        <li><a href="#">Achievements</a></li>
    </ul>
    </li>
    <li><a href="#">Teams Playing</a>
    <ul>
        <li><a href="#">Faze Clan</a></li>
        <li><a href="#">Ninja in Pyjamas</a></li>
        <li><a href="#">Liquid</a></li>
        <li><a href="#">SK_Gaming</a></li>
        <li><a href="#">Cloud_9</a></li>
    </ul>
    </li>
    <li><a href="#">Contact</a>
    </li>
    <li><a href="#">News</a></li>
</ul>       

            </div>
        </div>
        <div class="submit">   
            <a href="#middle" class="navbar"><font face="Times New Roman" size="70">Enroll Now</font></a>
</section>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur molestias, aperiam dignissimos excepturi dolores? Recusandae, perferendis necessitatibus autem doloribus, sapiente iusto itaque? Quo sequi delectus dolorum, quia praesentium maiores. Eveniet, deserunt saepe? Voluptatibus atque officia rem nostrum, quam perferendis, quis ratione iusto vitae quae enim possimus ducimus architecto cumque repellendus ipsum, esse ex magni nesciunt itaque animi. Aliquam labore consectetur laboriosam minus illo at nobis, delectus, voluptas? Ut doloribus cumque, maxime fuga reprehenderit officiis provident quaerat dignissimos unde nemo ipsam itaque expedita, labore at. Fugiat porro nam laborum maxime veritatis neque explicabo placeat repellendus quisquam quo, nemo, enim facilis fugit.</p>

<section id="middle">
    <img src="https://images4.alphacoders.com/653/653563.jpg">
</section>
CSS
Mã:
@import url('https://fonts.googleapis.com/css?family=Yantramanav:100');
@import url('https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300');
html,body
{
padding: 0;
margin: 0;
height:100%;
width:100%;
}

*{
scroll-behavior: smooth;
}

.screen
{
height:100%;
width:100%;
margin: auto;
background: url(https://images7.alphacoders.com/587/587593.png) no-repeat center center fixed ;
background-size: cover;
}

.cs-img img{
height: 20%;
width: 10%;
 }

ul{
margin: 0;
padding: 0;
list-style: none;
position: absolute;
}

li
{
display: block;
float: left;
margin-right: 1px;
}

 li a
 {
display: block;
min-width: 140px;
height: 50px;
text-align: center;
line-height: 50px;
font-family: 'Open Sans Condensed', sans-serif;
text-decoration: none;
background: #2f3036;
color:#fff;
 }

li a:hover{
background-color: #19c589;
}

li:hover ul li a{
background: #f3f3f3;
color: #2f3036;
height: 40px;
line-height: 40px;
}

li:hover ul li a:hover{
background: #19cf98;
color: #fff;
}

li ul li{
display: none;
float: none;
}

li:hover ul li{
display: block;
}

.submit{
display:table-cell;
vertical-align: middle;
width: 100%;
max-width: none;
}

.navbar{
font-family: 'Montserrat',sans-serif;
font-size: 135%;
font-weight:400%;
color:#3a6168;
text-transform: uppercase;
text-anchor: start;
text-decoration: none;
border: solid #3a6168;
padding: 10px 20px;
border-radius: 9px;
transition: all;
}
This is the error in my code

LABqh.png
 

Admin

Administrator
Thành viên BQT
#2
try this: click the full page for best result. fiddle : https://jsfiddle.net/1p2ef7mx/1/
Mã:
@import url('https://fonts.googleapis.com/css?family=Yantramanav:100');
@import url('https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300');
html,body
{
padding: 0;
margin: 0;
height:100%;
width:100%;
}

*{
scroll-behavior: smooth;
}

.screen
{
height:100%;
width:100%;
margin: auto;
background: url(https://images7.alphacoders.com/587/587593.png) no-repeat center center fixed ;
background-size: cover;
}

.cs-img img{
height: 20%;
width: 10%;
 }

ul{
margin: 0;
padding: 0;
list-style: none;
position: absolute;
}

li
{
display: block;
float: left;
margin-right: 1px;
}

 li a
 {
display: block;
min-width: 140px;
height: 50px;
text-align: center;
line-height: 50px;
font-family: 'Open Sans Condensed', sans-serif;
text-decoration: none;
background: #2f3036;
color:#fff;
 }

li a:hover{
background-color: #19c589;
}

li:hover ul li a{
background: #f3f3f3;
color: #2f3036;
height: 40px;
line-height: 40px;
}

li:hover ul li a:hover{
background: #19cf98;
color: #fff;
}

li ul li{
display: none;
float: none;
}

li:hover ul li{
display: block;
}

.submit{
display:table-cell;
vertical-align: middle;
width: 366px;
height: 80px;
max-width: none;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}

.navbar{
font-family: 'Montserrat',sans-serif;
font-size: 135%;
font-weight:400%;
color:#3a6168;
text-transform: uppercase;
text-anchor: start;
text-decoration: none;
border: solid #3a6168;
padding: 25px 20px;
border-radius: 9px;
transition: all;
}
Mã:
<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Counter Strike</title>
 <!--<link rel="stylesheet" type="text/css" href="cs.css">-->
 <link rel="stylesheet" type="text/css" href="csx.css">
</head>
<body>
<section class="screen">
    <div class="inner">
        <div class="cs-img">
            <img src="https://www.nvidia.com/content/dam/en-zz/Solutions/geforce/products/10series/counter-strike/NV-GF-GTX-Game-Ready-logo-RGB.png"><img src="http://media.kingston.com/images/hyperx-logo-lrg.png">
        </div>
        <div class="menu">
            <ul>
    <li><a href="#">Home</a></li>       
    <li><a href="#">About</a>
    <ul>
        <li><a href="#">Our Team</a></li>
        <li><a href="#">Mission</a></li>
        <li><a href="#">Achievements</a></li>
    </ul>
    </li>
    <li><a href="#">Teams Playing</a>
    <ul>
        <li><a href="#">Faze Clan</a></li>
        <li><a href="#">Ninja in Pyjamas</a></li>
        <li><a href="#">Liquid</a></li>
        <li><a href="#">SK_Gaming</a></li>
        <li><a href="#">Cloud_9</a></li>
    </ul>
    </li>
    <li><a href="#">Contact</a>
    </li>
    <li><a href="#">News</a></li>
</ul>       

            </div>
        </div>
        <div class="submit">   
            <a href="#middle" class="navbar"><font face="Times New Roman" size="70">Enroll Now</font></a>
</section>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur molestias, aperiam dignissimos excepturi dolores? Recusandae, perferendis necessitatibus autem doloribus, sapiente iusto itaque? Quo sequi delectus dolorum, quia praesentium maiores. Eveniet, deserunt saepe? Voluptatibus atque officia rem nostrum, quam perferendis, quis ratione iusto vitae quae enim possimus ducimus architecto cumque repellendus ipsum, esse ex magni nesciunt itaque animi. Aliquam labore consectetur laboriosam minus illo at nobis, delectus, voluptas? Ut doloribus cumque, maxime fuga reprehenderit officiis provident quaerat dignissimos unde nemo ipsam itaque expedita, labore at. Fugiat porro nam laborum maxime veritatis neque explicabo placeat repellendus quisquam quo, nemo, enim facilis fugit.</p>

<section id="middle">
    <img src="https://images4.alphacoders.com/653/653563.jpg">
</section>
 
Top