Below am posting my jsp page.
home.jsp
<%@taglib uri="/WEB-INF/struts-bean.tld" prefix="bean"%>
<%@taglib uri="/WEB-INF/struts-html.tld" prefix="html" %>
<%@taglib uri="/WEB-INF/struts-tiles.tld" prefix="tiles"%>
<html>
<head>
<title>MindBest</title>
</head>
<style type="text/css">
<%@include file="../include/style.css"%>
</style>
<body>
<div class="container">
<div class="header" align="center">
<div class="content">
<h1>MIND BEST,DENMARK</h1>
</div>
</div>
<div class="menutab">
<div class="menu" class="blue">
<ul>
<li><a href="">Home</a></li>
<li class="active"><a href="">About Us</a></li>
<li><a href="">Products</a></li>
<li><a href="">Infrastructure</a></li>
<li><a href="">Pharmaceutical Formulations</a></li>
<li><a href="">Contact Us</a></li>
<li><a href="">Search Products</a></li>
</ul>
</div>
</div>
<div class="body"></div>
<div class="footer"></div>
</div>
</body>
</html>
and css
style.css
.body {
margin:0;
padding:0;
height:70%;
border-style:solid;
border-color:#38FFBE;
}
.container {
height:90%;
position:relative;
}
.header {
padding:10px;
height:42%;
border-style:solid;
border-color:#38FFBE;
text-align:center;
background-image: linear-gradient(left , #FFFFFF 22%, #4BDB1B 61%, #00FFFF 81%);
background-image: -o-linear-gradient(left , #FFFFFF 22%, #4BDB1B 61%, #00FFFF 81%);
background-image: -moz-linear-gradient(left , #FFFFFF 22%, #4BDB1B 61%, #00FFFF 81%);
background-image: -webkit-linear-gradient(left , #FFFFFF 22%, #4BDB1B 61%, #00FFFF 81%);
background-image: -ms-linear-gradient(left , #FFFFFF 22%, #4BDB1B 61%, #00FFFF 81%);
background-image:
-webkit-gradient(
linear,
left bottom,
right bottom,
color-stop(0.22, #FFFFFF),
color-stop(0.61, #4BDB1B),
color-stop(0.81, #00FFFF)
);
}
.header .content{
font-family: fantasy;
font-style: normal;
font-variant: normal;
font-weight: bolder;
font-size: larger;
line-height: 100%;
word-spacing: normal;
letter-spacing: normal;
text-transform: none;
text-align: center;
text-indent: 0ex;
height:90%;
background-image:url("add1-.png"),url("dancing-capsules.jpg"),url("dancing-capsules2.jpg"),url("colors3.jpg"),url("colors3.jpg"),url("colors3.jpg"),url("Flying Bird.jpg") ;
background-position:left top,left bottom,200px 0px,300px 80px,680px 80px,1060px 80px, right top;
background-repeat: no-repeat,no-repeat,no-repeat;
}
.menutab
{
height:80px;
width:100%;
border-style:none;
background-color:#00FA9A;
}
.menutab .menu{
font-family: Arial, sans-serif;
font-weight: bold;
text-transform: uppercase;
margin: 50px 140px ;
padding: 10px 10px 0px 10px;
list-style-type: none;
font-size: 13px;
background: #7FFF00;
height: 40px;
width:80%;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-top: 2px solid #eee;
border-left: 2px solid #eee;
border-bottom: 2px solid #ccc;
border-right: 2px solid #ccc;
}
.menutab .menu ul
{
margin: auto;
}
.menutab .menu li{
float: left;
margin: 0;
}
.menutab .menu li a {
text-decoration: none;
display: block;
padding: 0 20px;
line-height: 40px;
color: #666;
}
.menutab .menu li a:hover,.menutab.menu li.active a {
background-color: #CAFF70;
border-bottom: 2px solid #DDD;
color: #999;
}
.menutab .menu.blue {
border-top: 2px solid #CAFF70;
border-left: 2px solid #CAFF70;
border-bottom: 2px solid #204061;
border-right: 2px solid #204061;
background: #CAFF70;}
.menutab.menu.blue a {color: #fff;}
.menutab.menu.blue li a:hover,.menutab.menu.blue li.active a
{color: #90CDFF; background: #3D7BBB; border-bottom: 2px solid #356AA0;}
.body {
padding:10px;
padding-bottom:60px; /* Height of the footer */
background-color:#38FFBE;
}
.footer {
position:absolute;
bottom:0;
width:100%;
height:80px; /* Height of the footer */
background:#38FFBE;
}
Once you run this code there is some gap between header and menu tab.am not able to adjust that. How to eliminate that gap?
How to align it properly?
remove margin to your menu class
this will work fine..