Alinhar menu ao centro
Boa noite,
Estou com um problema ao alinhar o menu ao centro.
Quando coloco no NAV - text-align: center; e no NAV li - display: inline-block o menu fica ao centro mas o restante conteúdo sobrepõe o mesmo.
segue o código:
<?php
error_reporting(E_ALL);
?>
<html>
<head>
<meta charset="UTF-8" />
<meta property="og:site-name" content='Sistema de Filtragem de Água'/>
<meta property="og:title" content='Sistema de Filtragem de Água'/>
<meta name="description" content="Sistema de Filtragem de Água"/>
<title>Sistema de Filtragem de Água</title>
<link rel="stylesheet" href="css/estilo.css" type="text/css" />
<link rel="apple-touch-icon" href="favicon.jpg"/>
<link rel="shortcut-icon" href="favicon.ico"/>
<!-- Javascript efeitos -->
<script type="text/javascript" src="js/modernizr-1.5.min.js"></script>
</head>
<body>
<div id="main">
<header>
<div id="logo">
<img src="imagens/logo.png" />
</div>
<div id="menubar">
<ul id="nav">
<li class="current"><a href="index.php">Inicio</a></li>
<li><a href="somos.php">Quem somos</a></li>
<li><a href="produtos.php">Produtos</a></li>
<li><a href="contactos.html">Contactos</a></li>
</ul>
</div><!--Fecha menubar-->
</header>
<div id="site_content">
<div class="sidebar_container">
<div class="sidebar">
<div class="sidebar_item">
<h2>Produtos</h2>
<p>Possuimos uma vasta gama de produtos, seja para utilização em sua casa ou trabalho, entre em contacto connosco para solicitar uma demonstração dos nossos produtos.</p>
</div><!--Fim sidebar_item-->
</div><!--Fim sidebar-->
<div class="sidebar">
<div class="sidebar_item">
<h2>Contactos</h2>
<p>Largo Terras do Forno, 2</p>
<p>2635-022 - Rio de Mouro</p>
<p>Tel. (+351) 000 000 561</p>
<p>Tlm. 910 000 000 / 960 000 000</p>
<p>e-mail: <a href="geral@aguarela.pt">geral@aguarela.pt</a></p>
</div><!--Fim sidebar_item-->
</div><!--Fim sidebar-->
</div><!--Fim sidebar_container-->
<div class="slideshow">
<ul class="slideshow">
<li class="show"><img width="680" height="250" src="imagens/home_1.jpg" alt=""Descrição do Produto"" /></li>
<li><img width="680" height="250" src="imagens/home_2.jpg" alt=""Descrição do Produto"" /></li>
</ul>
</div>
<div id="content">
<div class="content_item">
<h1>Bem-vindo</h1>
<p>A água é um bem essencial para a vida na terra, e a cada dia que passa fica mais excassa em alguns pontos, sendo dificil às vezes de a encontrar limpa e pura.</p>
</div><!--Fim content_item-->
</div><!--Fim content-->
</div><!--Fim site_content-->
<footer>
<a href="index.php">Inicio</a> | <a href="somos.html">Quem Somos</a> | <a href="produtos.html">Produtos</a> | <a href="contactos.html">Contactos</a><br/><br/>
</footer>
</div><!--Fecha main-->
<!-- javascript at the bottom for fast page loading -->
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/image_slide.js"></script>
</body>
</html>
CSS@font-face {
font-family: PacificoRegular;
src: url('../fonts/Pacifico-webfont.eot');
src: local("PacificoRegular"), url('../fonts/Pacifico-webfont.ttf');
}html
{ height: 100%;}
*
{ margin: 0;
padding: 0;}body
{ font: normal 80% Arial, Helvetica, sans-serif;
color: #000;
}/ tell the browser to render HTML 5 elements as block /
article, aside, figure, footer, hgroup, section {
display:block;
}p
{ padding: 0 0 10px 0;
color: #2F4F4F;
text-shadow: 1px 1px #FFFFFF;
line-height: 1.7em;
font-size: 100% }p a
{ padding: 0 0 10px 0;
color: #2F4F4F;
text-shadow: 1px 1px #FFFFFF;
line-height: 1.7em;
font-size: 100% }img
{ border: 0;}
h1, h2, h3, h4, h6
{ font: normal 175% 'PacificoRegular', Arial, sans-serif;
color: #2F4F4F;
text-shadow: 0px 1px 0px #FFFFFF;
letter-spacing: -1px;
margin: 0 0 10px 0;}h2
{ font: normal 165% Arial, Helvetica, sans-serif;}
h3
{ font: normal 130% Arial, Helvetica, sans-serif;}
h4, h5, h6
{ margin: 0;
padding: 0 0 0px 0;
font: normal 150% Arial, Helvetica, sans-serif;
text-shadow: 0px 1px 0px #000;
color: #2F4F4F;
line-height: 1.5em;}h5, h6
{ font: normal 95% Arial, Helvetica, sans-serif;
color: #FFFFFF;
padding-bottom: 15px;}span
{ color: blue;
text-shadow: 0px 1px 0px #FFF;}a, a:hover
{ color: #FFF;
background: transparent;
font-weight: bold;
outline: none;
text-decoration: underline;}a:hover
{ text-decoration: none;}
ul
{ margin: 2px 0 22px 30px;
line-height: 1.7em;
font-style: normal;
font-size: 100%;}ol
{ margin: 8px 0 22px 20px;}
ol li
{ margin: 0 0 11px 0;}
#main, #banner, #site_content, footer, #content_grey
{ margin-left: auto;
margin-right: auto;}
#main
{ padding: 30px 0px;
background: transparent url(../imagens/fundo.png) no-repeat;
background-size: 100%;
width: 100%;
}header
{ height: 230px;
width: 100%;
margin: 0 auto;
/*background: #0043A8;
background: -moz-linear-gradient(#43A9FF, #0043A8);
background: -o-linear-gradient(#43A9FF, #0043A8);
background: -webkit-linear-gradient(#43A9FF, #0043A8);*/
border-radius: 15px 15px 0px 0px;
-moz-border-radius: 15px 15px 0px 0px;
-webkit-border: 15px 15px 0px 0px; }nav
{ height: 50px;
text-align: center;
}
#strapline
{ width: 100%;
height: 140px;
padding-bottom: 10px;
text-align: center;
margin: 0 auto;}
#logo{
height: 100%;
}
#menubar{
width: 100%;
height: 50px;
line-height: 50px;
margin-top: 10px;
text-align: center;
}ul#nav
{ margin:0;
text-align: center;}
ul#nav li
{ padding: 0 0 0 0px;
list-style: none;
margin: 2px 0 0 0;
text-align: center;
display: inline;
background: transparent;}ul#nav li a
{ float: left;
font: bold 130% 'PacificoRegular', Arial, sans-serif;
text-align: center;
height: 24px;
margin: 8px 0 0 20px;
text-shadow: 0px 1px 0px #000;
padding: 0px 20px 10px 20px;
background: transparent;
border-radius: 7px 7px 7px 7px;
-moz-border-radius: 7px 7px 7px 7px;
-webkit-border: 7px 7px 7px 7px;
text-align: center;
color: #5A5ACD;
text-decoration: none;}ul#nav li.current a, ul#nav li:hover a
{ color: #FFF;
background: #0055D4;
background: -moz-linear-gradient(#43A9FF, #0043A8);
background: -o-linear-gradient(#43A9FF, #0043A8);
background: -webkit-linear-gradient(#43A9FF, #0043A8);
text-shadow: none;}
#site_content
{ width: 100%;
overflow: hidden;
padding-bottom: 20px;
margin-bottom: 30px;
}
.sidebar_container
{ float: right;
margin: 20px 10px 0 10px;
width: 210px;
padding: 0;
border-radius: 0px 0px 15px 15px;
-moz-border-radius: 0px 0px 15px 15px;
-webkit-border: 0px 0px 15px 15px;
-webkit-box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 5px;
-moz-box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 5px;
box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 5px;
}
.sidebar
{ float: left;
width: 190px;
padding-left: 10px;
margin-bottom: 10px;}
.sidebar_item
{ font: normal 100% Arial, Helvetica, sans-serif;
width: 190px;}.sidebar h2
{ padding: 5px 0 0 0;
font: normal 140% 'PacificoRegular', Arial, sans-serif;
height: 30px;}
#content
{ width: 680px;
margin: 0 0 20px 20px;
float: left;}
.content_item
{ width: 680px;
margin-top: 20px;
margin-bottom: 20px;
text-align: justify;}
.content_container
{ width: 330px;
margin: 20px 10px 0 0;
float: left;}footer
{ width: 96%;
height: 50px;
padding-top: 25px;
padding-bottom: 20px;
font-weight: bold;
text-align: center;
text-shadow: 1px 1px #000;
color: #FFF;
background: #0043A8;
background: -moz-linear-gradient(#43A9FF, #0043A8);
background: -o-linear-gradient(#43A9FF, #0043A8);
background: -webkit-linear-gradient(#43A9FF, #0043A8);
border-radius: 15px 15px 15px 15px;
-moz-border-radius: 15px 15px 15px 15px;
-webkit-border: 15px 15px 15px 15px;
-webkit-box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 5px;
-moz-box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 5px;
box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 5px;}footer a, footer a:hover
{ text-shadow: 1px 1px #FFF;
color: #1D1D1D;
text-decoration: none;
padding-bottom: 20px;}footer a:hover
{ text-decoration: underline;}
footer a, footer a:hover
{ text-shadow: 1px 1px #000;
color: #FFF;
text-decoration: none;}footer a:hover
{ text-decoration: underline;}
Discussão (3)
Carregando comentários...