0
Ich habe etwas Zeit damit verbracht, ein neues Navigationsmenü für ein Projekt zu erstellen. Ich habe in meiner CSS-Datei Gleitkomma-Elemente verwendet, die einen wichtigen Beitrag dazu leisten, dass mein Navigationsmenü weiterhin angezeigt wird. Aber zur Zeit ist die Ausrichtung des Navigationsmenüs deaktiviert und mein Ziel ist es, dass es in der Ansicht zentriert ist.Float-Ausrichtung mit JSP- und CSS-Dateien
header {
background: #3d4144 url("../img/bg.png") 0 0 repeat;
border-bottom: 5px solid #ddd;
height: 170px;
padding-top: 15px;
}
#title {
color: white;
display: block;
letter-spacing: 2px;
margin-left: 50px;
padding: 20px;
position: relative;
text-align: left;
}
#headerMessage {
color: white;
display: block;
letter-spacing: 2px;
padding: 20px;
position: relative;
text-align: center;
}
.container {
margin: 0 auto;
width: 540px;
}
#navHeader {
-webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.06);
background: #464b4c;
background-image: -webkit-linear-gradient(top, #464b4c, #3f4344);
background-image: -moz-linear-gradient(top, #464b4c, #3f4344);
background-image: -o-linear-gradient(top, #464b4c, #3f4344);
background-image: linear-gradient(to bottom, #464b4c, #3f4344);
border-top: 1px solid #353939;
border-bottom: 1px solid #2e3131;
box-shadow: inset 0 1px rgba(255, 255, 255, 0.06);
height: 36px;
}
#navHeader a {
-webkit-transition: 0.1s ease-out;
-moz-transition: 0.1s ease-out;
-o-transition: 0.1s ease-out;
transition: 0.1s ease-out;
-webkit-transition-property: background-color, line-height;
-moz-transition-property: background-color, line-height;
-o-transition-property: background-color, line-height;
transition-property: background-color, line-height;
text-align: center;
}
#navHeader #navHeaderUL {
float: left;
border-left: 1px solid #353939;
border-left: 1px solid rgba(0, 0, 0, 0.2);
border-right: 1px solid #4d5354;
border-right: 1px solid rgba(255, 255, 255, 0.06);
}
#navHeader li {
float: left;
}
#navHeader a {
display: block;
padding: 0 20px;
line-height: 36px;
color: #ddd;
text-decoration: none;
text-shadow: 0 -1px #2e3131;
border-left: 1px solid #4d5354;
border-left: 1px solid rgba(255, 255, 255, 0.06);
border-right: 1px solid #353939;
border-right: 1px solid rgba(0, 0, 0, 0.2);
cursor: pointer;
}
#navHeader a:hover {
background: #4d5354;
background: rgba(255, 255, 255, 0.05);
}
#navHeader li.active a,
#navHeader li.active a:hover,
#navHeader a:active {
padding: 0 21px;
line-height: 33px;
color: #eee;
background: #323637;
border-left: 0;
border-right: 0;
border-bottom: 3px solid #48a9c0;
background-image: -webkit-linear-gradient(top, #484e4f, #323637);
background-image: -moz-linear-gradient(top, #484e4f, #323637);
background-image: -o-linear-gradient(top, #484e4f, #323637);
background-image: linear-gradient(to bottom, #484e4f, #323637);
-webkit-box-shadow: inset 0 -1px #151717, inset 0 -1px 8px rgba(0, 0, 0, 0.2);
box-shadow: inset 0 -1px #151717, inset 0 -1px 8px rgba(0, 0, 0, 0.2);
}
#navHeader li.green a,
#navHeader li.green a:active {
border-bottom-color: #56c93d;
}
#navHeader li.red a,
#navHeader li.red a:active {
border-bottom-color: #a54e49;
}
#navHeader li.purple a,
#navHeader li.purple a:active {
border-bottom-color: #c052b9;
}
#navHeader li.yellow a,
#navHeader li.yellow a:active {
border-bottom-color: #c0bb30;
}<header>
<h1 id="title">Insert Title</h1>
<h2 id="headerMessage">INSERT MESSAGE!</h2>
<nav id="navHeader">
<div class="container">
<ul id="navHeaderUL">
<li class="active"><a href="index.jsp">Home</a>
<li class="green"><a href="index.jsp">Schedule</a>
<li class="red"><a href="index.jsp">Track</a>
<li class="yellow"><a href="index.jsp">Contact</a>
</ul>
</div>
<!-- end of container -->
</nav>
<!-- end of navHeader -->
</header>