How can the menu center right (СSS) - html

Question

I want the menu to be in the center of the page in the browser. I add my CSS file in question. I kind of wrote everything correctly, you can help me fix the error. The table is centered and I want the menu too. I want the menu to be in the center of the page in the browser. I add my CSS file in question. I kind of wrote everything correctly, you can help me fix the error. The table is centered and I want the menu too.
My CSS file
html, body {
background: black;
font: 100% helvetica, arial, sans-serif;
margin: 0;
padding: 0;
}
#container {
margin: 40px auto;
width: 800px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
#header {
border-bottom: 1px solid white;
margin: 0 0 20px;
overflow: hidden;
padding: 0 0 10px;
}
a {
color: white;
background: red;
font-weight: bold;
text-decoration: none;
-moz-transition: all 300ms ease-out;
-webkit-transition: all 300ms ease-out;
-ms-transition: all 300ms ease-out;
transition: all 300ms ease-out;
}
a:hover {
color: white;
}
/*============================*/
/* Main Navigation
/*============================*/
#nav {
height: 50px;
line-height: 50px;
width: 100%;
}
#nav ul {
list-style: none;
margin: 0;
padding: 0;
}
#nav li {
background: white;
background-image: -o-linear-gradient(bottom, #222222 0%, #555555 100%);
background-image: -moz-linear-gradient(bottom, #222222 0%, #555555 100%);
background-image: -webkit-linear-gradient(bottom, #222222 0%, #555555 100%);
background-image: -ms-linear-gradient(bottom, #222222 0%, #555555 100%);
background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #222222),color-stop(1, #555555));
background-image: linear-gradient(bottom, #222222 0%, #555555 100%);
float: left;
position: relative;
width: 20%;
}
#nav li:first-child, #nav li:first-child a {
-webkit-border-radius: 3px 0 0 3px;
-moz-border-radius: 3px 0 0 3px;
border-radius: 3px 0 0 3px;
}
#nav li:last-child, #nav li:last-child a {
-webkit-border-radius: 0 3px 3px 0;
-moz-border-radius: 0 3px 3px 0;
border-radius: 0 3px 3px 0;
}
#nav a {
border-right: 1px solid red;
border-left: 1px solid red;
color: white;
display: block;
font-size: 14px;
height: 50px;
overflow: hidden;
text-align: center;
text-shadow: 0 -1px 0 red;
-webkit-box-shadow: inset 0 0 10px transparent;
-moz-box-shadow: inset 0 0 10px transparent;
}
#nav a:after {
background: rgba(255,255,255,.07);
content: "";
height: 25px;
left: 0;
position: absolute;
width: 100%;
}
#nav li:hover > a {
background: black;
border-left-color: #222;
color: white;
text-shadow: 0 1px 0 #000;
-webkit-box-shadow: inset 0 0 10px #111;
-moz-box-shadow: inset 0 0 10px #111;
box-shadow: inset 0 0 10px #111;
}
#nav span {
position: relative;
}
#nav a:active span {
color: red;
position: relative;
top: 1px;
}
#nav li:first-child a {
border-left: none;
}
#nav li:last-child a {
border-right: none;
}
.dropdown > a span:after {
border-top: 5px solid transparent;
border-bottom: 5px solid transparent;
border-left: 5px solid #ccc;
content: "";
right: -13px;
position: absolute;
top: 3px;
}
.dropdown:hover > a span:after {
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 5px solid #fff;
content: "";
right: -15px;
position: absolute;
top: 6px;
}
/*============================*/
/* Sub Navigation
/*============================*/
#nav ul ul {
opacity: 0;
position: absolute;
top: 50px;
visibility: hidden;
width: 0;
-moz-transition: all 300ms ease-out;
-webkit-transition: all 300ms ease-out;
-ms-transition: all 300ms ease-out;
transition: all 300ms ease-out;
}
#nav ul li:hover ul {
opacity: 1;
visibility: visible;
width: 100%;
}
#nav ul ul li {
background: white;
float: none;
line-height: 0;
width: 100%;
}
#nav ul ul li:nth-child(odd) {
background: white;
}
#nav ul ul li:first-child, #nav ul ul li:first-child a {
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
}
#nav ul ul li:last-child, #nav ul ul li:last-child a {
-webkit-border-radius: 0 0 3px 3px;
-moz-border-radius: 0 0 3px 3px;
border-radius: 0 0 3px 3px;
}
#nav ul ul li a {
border-right: none;
border-left: none;
border-top: 1px solid white;
color: #555;
font-size: 12px;
height: 36px;
line-height: 36px;
padding: 0 0 0 15px;
text-align: left;
text-shadow: 0 -1px 0 #eee;
}
#nav ul li ul li a:after {
background: rgba(0,0,0,.02);
content: "";
height: 18px;
left: 0;
position: absolute;
top: 19px;
width: 100%;
}
#nav ul ul li a:hover {
background: white;
color: #111;
text-shadow: 0 1px 0 #fff;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
#nav ul ul a:active span {
color: white;
position: relative;
top: 1px;
}
.login-form {
position:absolute;
width:200px;
height:150px;
left:50%;
top:50%;
margin-left:-100px;
margin-top:-100px;
}
<div id="container">
<div id="header">
</div>
<div id="nav">
<ul>
<li><span>Главная</span></li>
<li class="dropdown"><span>Студенты</span>
<ul>
<li><span>Список студентов</span></li>
<sec:authorize access="hasRole('ADMIN') || hasRole('USER')">
<li><span>Добавить студента</span></li>
</sec:authorize>
</ul>
</li>
<sec:authorize access="!isAuthenticated()">
<li class="dropdown"><span>Войти</span>
</li>
</sec:authorize>
<sec:authorize access="!isAuthenticated()">
<li><span>Выйти</span></li>
</sec:authorize>
</ul>
</div>
</div>

Answer 1

html, body {
background: black;
font: 100% helvetica, arial, sans-serif;
margin: 0;
padding: 0;
box-sizing: border-box;
}
#container {
margin: 40px auto;
width: 800px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
#header {
border-bottom: 1px solid white;
margin: 0 0 20px;
overflow: hidden;
padding: 0 0 10px;
}
a {
color: white;
background: red;
font-weight: bold;
text-decoration: none;
-moz-transition: all 300ms ease-out;
-webkit-transition: all 300ms ease-out;
-ms-transition: all 300ms ease-out;
transition: all 300ms ease-out;
}
a:hover {
color: white;
}
/*============================*/
/* Main Navigation
/*============================*/
#nav {
height: 50px;
line-height: 50px;
width: 100%;
text-align: center;
}
#nav ul {
list-style: none;
margin: 0;
padding: 0;
display: inline-block;
}
#nav li {
background: white;
background-image: -o-linear-gradient(bottom, #222222 0%, #555555 100%);
background-image: -moz-linear-gradient(bottom, #222222 0%, #555555 100%);
background-image: -webkit-linear-gradient(bottom, #222222 0%, #555555 100%);
background-image: -ms-linear-gradient(bottom, #222222 0%, #555555 100%);
background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #222222),color-stop(1, #555555));
background-image: linear-gradient(bottom, #222222 0%, #555555 100%);
float: left;
position: relative;
/* width: 20%; */
}
#nav li:first-child, #nav li:first-child a {
-webkit-border-radius: 3px 0 0 3px;
-moz-border-radius: 3px 0 0 3px;
border-radius: 3px 0 0 3px;
}
#nav li:last-child, #nav li:last-child a {
-webkit-border-radius: 0 3px 3px 0;
-moz-border-radius: 0 3px 3px 0;
border-radius: 0 3px 3px 0;
}
#nav a {
border-right: 1px solid red;
border-left: 1px solid red;
color: white;
display: block;
font-size: 14px;
height: 50px;
overflow: hidden;
text-align: center;
text-shadow: 0 -1px 0 red;
-webkit-box-shadow: inset 0 0 10px transparent;
-moz-box-shadow: inset 0 0 10px transparent;
padding: 0 60px;
}
#nav a:after {
background: rgba(255,255,255,.07);
content: "";
height: 25px;
left: 0;
position: absolute;
width: 100%;
}
#nav li:hover > a {
background: black;
border-left-color: #222;
color: white;
text-shadow: 0 1px 0 #000;
-webkit-box-shadow: inset 0 0 10px #111;
-moz-box-shadow: inset 0 0 10px #111;
box-shadow: inset 0 0 10px #111;
}
#nav span {
position: relative;
}
#nav a:active span {
color: red;
position: relative;
top: 1px;
}
#nav li:first-child a {
border-left: none;
}
#nav li:last-child a {
border-right: none;
}
.dropdown > a span:after {
border-top: 5px solid transparent;
border-bottom: 5px solid transparent;
border-left: 5px solid #ccc;
content: "";
right: -13px;
position: absolute;
top: 3px;
}
.dropdown:hover > a span:after {
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 5px solid #fff;
content: "";
right: -15px;
position: absolute;
top: 6px;
}
/*============================*/
/* Sub Navigation
/*============================*/
#nav ul ul {
opacity: 0;
position: absolute;
top: 50px;
visibility: hidden;
width: 0;
-moz-transition: all 300ms ease-out;
-webkit-transition: all 300ms ease-out;
-ms-transition: all 300ms ease-out;
transition: all 300ms ease-out;
left: 0;
}
#nav ul li:hover ul {
opacity: 1;
visibility: visible;
width: 100%;
}
#nav ul ul li {
background: white;
float: none;
line-height: 0;
width: 100%;
}
#nav ul ul li:nth-child(odd) {
background: white;
}
#nav ul ul li:first-child, #nav ul ul li:first-child a {
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
}
#nav ul ul li:last-child, #nav ul ul li:last-child a {
-webkit-border-radius: 0 0 3px 3px;
-moz-border-radius: 0 0 3px 3px;
border-radius: 0 0 3px 3px;
}
#nav ul ul li a {
border-right: none;
border-left: none;
border-top: 1px solid white;
color: #555;
font-size: 12px;
height: 36px;
line-height: 36px;
padding: 0 0 0 15px;
text-align: left;
text-shadow: 0 -1px 0 #eee;
}
#nav ul li ul li a:after {
background: rgba(0,0,0,.02);
content: "";
height: 18px;
left: 0;
position: absolute;
top: 19px;
width: 100%;
}
#nav ul ul li a:hover {
background: white;
color: #111;
text-shadow: 0 1px 0 #fff;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
#nav ul ul a:active span {
color: white;
position: relative;
top: 1px;
}
.login-form {
position:absolute;
width:200px;
height:150px;
left:50%;
top:50%;
margin-left:-100px;
margin-top:-100px;
}
<div id="container">
<div id="header">
</div>
<div id="nav">
<ul>
<li><span>Главная</span></li>
<li class="dropdown"><span>Студенты</span>
<ul>
<li><span>Список студентов</span></li>
<sec:authorize access="hasRole('ADMIN') || hasRole('USER')">
<li><span>Добавить студента</span></li>
</sec:authorize>
</ul>
</li>
<sec:authorize access="!isAuthenticated()">
<li class="dropdown"><span>Войти</span>
</li>
</sec:authorize>
<sec:authorize access="!isAuthenticated()">
<li><span>Выйти</span></li>
</sec:authorize>
</ul>
</div>
</div>

Answer 2

Please change the following two class:-
#container {
width: 100%; //Change width to 100%
height: 100vh; //Add height 100vh
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
#nav {
height: 50px;
line-height: 50px;
width: 80%; // Change width to 80%
margin: 0 auto; // Add margin 0 auto
}

Answer 3

you can use margin to #nav tag, just add the following code in your css.
#nav
{ margin-left:11%;}

Answer 4

Add the below lines in your code. This will help you:
#nav ul {
list-style: none;
margin: 0;
padding: 0;
text-align: center;
}
#nav li {
background: white;
background-image: -o-linear-gradient(bottom, #222222 0%, #555555 100%);
background-image: -moz-linear-gradient(bottom, #222222 0%, #555555 100%);
background-image: -webkit-linear-gradient(bottom, #222222 0%, #555555 100%);
background-image: -ms-linear-gradient(bottom, #222222 0%, #555555 100%);
background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #222222),color-stop(1, #555555));
background-image: linear-gradient(bottom, #222222 0%, #555555 100%);
position: relative;
width: 20%;
display: inline-block;
}