html - Lots of unused space below my footer "div" -
i'm trying create footer div on master page. kinda works, when run website, there's lot of unused space below footer. how can remove it? i'm using vs2012. reason can't use jsfiddle @ work. sorry long post.
my html:
<!doctype html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>território levita - portal</title> <script src="../js/jquery-1.9.1.js"></script> <script src="../js/jquery.maskedinput.js"></script> <link href="../css/stylemaster.css" rel="stylesheet" /> <asp:contentplaceholder id="head" runat="server"> </asp:contentplaceholder> </head> <body> <form id="form1" runat="server"> <div id="header"> <h1><a href="#">território levita - portal</a></h1> </div> <div id="menunav"> <ul> <li class="ativo"><a href="#">principal</a></li> <li class="temsub"><a href="#">eventos</a> <ul> <li><a href="#">´~~´ç55,,.\\visualizar eventos</a></li> <li><a href="#">manter eventos</a></li> </ul> </li> <li class="temsub"><a href="#">dados pessoais</a> <ul> <li><a href="#">visualizar dados pessoais</a></li> </ul> </li> </ul> </div> <div id="conteudo"> <asp:contentplaceholder id="content" runat="server"> </asp:contentplaceholder> </div> <div id="footer"> <h3>"mas, no tocante às cidades, às casas das cidades da sua possessão, direito perpétuo de resgate terão os levitas." levítico 25:32 </h3> </div> </form> </body> </html> my css:
body { min-width: 1024px; min-height: 768px; } #header { /*estilo cabeçalho*/ background-color: #67bcdb; /*cor de fundo*/ width: 95%; /*comprimento - 95% da tela*/ margin: 0 auto; /*margin: espaçamento entre o elemento e outro - tá 0 para top e bottom, e auto para left e right (alinha no centro)*/ height: 80px; /*altura header*/ line-height: 80px; /*tamanho da linha. como tá igual à altura, o texto fica no meio.*/ padding-left: 20px; /*espaço entre borda header e o conteúdo - o elemento a*/ } #header { /*estilo texto cabeçalho*/ text-decoration: none; /*sem decoração no texto*/ color: #fff; /*cor branca*/ } #menunav { margin-left: 23px; } /*menu*/ #menunav > ul { list-style: none; /*tirando o estilo da lista de dentro da div*/ margin: 0; padding: 0; vertical-align: baseline; line-height: 1; } #menunav > ul { /*container*/ display: block; width: 20%; float: left; margin-top: 25px; position: relative; } #menunav > ul li { /*contem links*/ display: block; position: relative; margin: 0; padding: 0; width: 150px; } #menunav > ul li { /*estilo dos botões "pais"*/ display: block; position: relative; margin: 0; border-top: 1px dotted #fff; border-bottom: 1px dotted #d9d9d9; padding: 11px 20px; width: 100px; /*tipografia*/ font-family: helvetica, arial, sans-serif; color: #3dafea; text-decoration: none; text-transform: uppercase; font-size: 13px; font-weight: 300; background: #eaeaea; } #menunav > ul > li > a:hover, #menunav > ul > li:hover > { /*quando o mouse estiver por cima*/ color: #fff; /*cor de texto branca*/ background: #54cdf1; /*muda cor de fundo para um azul*/ background: -webkit-linear-gradient(bottom, #54cdf1, #74d7f3); /*gradientes para cor de fundo.*/ background: -ms-linear-gradient(bottom, #54cdf1, #74d7f3); background: -moz-linear-gradient(bottom, #54cdf1, #74d7f3); background: -o-linear-gradient(bottom, #54cdf1, #74d7f3); border-color: transparent; /*tira bordas*/ } /*a seta submenu*/ #menunav > ul .temsub > a::after { content: ''; position: absolute; top: 16px; right: 10px; width: 0px; height: 0px; border: 4px solid transparent; border-left: 4px solid #3dafea; } #menunav > ul .temsub > a::before { content: ''; position: absolute; top: 17px; right: 10px; width: 0px; height: 0px; /* creating arrow using borders */ border: 4px solid transparent; border-left: 4px solid #fff; } /* changing color of arrow on hover */ #menunav > ul li > a:hover::after, #menunav > ul li:hover > a::after { border-left: 4px solid #fff; } #menunav > ul li > a:hover::before, #menunav > ul li:hover > a::before { border-left: 4px solid rgba(0, 0, 0, .25); } /*submenus*/ #menunav > ul ul { position: absolute; left: 150px; top: -9999px; padding-left: 5px; -webkit-transition: opacity .3s ease-in; -moz-transition: opacity .3s ease-in; -o-transition: opacity .3s ease-in; -ms-transition: opacity .3s ease-in; } /* showing submenu when user hovering parent link */ #menunav > ul li:hover>ul { top: 0px; opacity: 1; } #conteudo { margin: 25px 50px 0 50px; float: right; width: 70%; } /*rodapé*/ #footer { clear:both; width: 95%; height: 80px; /*altura header*/ line-height: 80px; background-color: #67bcdb; margin: 10px auto 0 auto; text-align: center; } #footer h3 { color: #fff; }
delete rule below body:
min-height: 768px; also have line-height footer. remove remove spaces after footer (fiddle demo). can add padding-top: 10px; style footer want.
Comments
Post a Comment