Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Bom dia pessoal, tudoo belezinha? rsrsrs... to bem para quem quiser saber sobre mim.. husdahuashua..
Agora indo ao ponto que peço ajuda.
Estou fazendo um layout e gostaria que o menu ficasse com border-radius centralizado na página, e quando o browser for diminuido ou aumentado de tamanho o mesmo menu iria acompanhar isso. Capiche? eu sei que não, então vou postar umas imagens para se ter idéia.
Quero que fiquei (ex) desse jeito:/applications/core/interface/imageproxy/imageproxy.php?img=http://www.marcelogarbin.com.br/temp/layout_01.jpg&key=863e1456230cf09e1acfb992db6007ad1ed1bf43ced30c8ae24b16ea03f3c640" alt="layout_01.jpg" />
Porém quando eu diminuo a página o menu fica fixo em tal posição(isso por que certamente eu defini o valor de top e left?):
/applications/core/interface/imageproxy/imageproxy.php?img=http://www.marcelogarbin.com.br/temp/layout_02.jpg&key=3fe5fa86e8400cb35a2fd02ad82fbe1bf25641bc439d0cc071464978f63a3cc6" alt="layout_02.jpg" />
Sobre o código eu já fiz ISSO <==
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="utf-8">
<title>Layout</title>
<link rel="stylesheet" type="text/css" href="[http://meyerweb.com/eric/tools/css/reset/reset.css](http://meyerweb.com/eric/tools/css/reset/reset.css)">
<style type="text/css">#wrap{min-height:100%;}
#main{padding-bottom:120px;}
header{
height:120px;
position:relative;
box-shadow:0px 3px 10px #999;
-moz-box-shadow:0px 3px 10px #999;
-webkit-box-shadow: 0px 3px 10px #999;
-o-box-shadow:0px 3px 10px #999;
background:#CCC;
}
#logo{
width:218px;
height:106px;
display:block;
padding:5px;
float:left;
background:#0F0;
}nav{
width:800px;
height:60px;
margin:0 auto;
background-color:#06C;
border-bottom:2px #F00 solid;
position:absolute;
bottom:-30px;
left:315px;
border-radius:60px;
-webkit-border-radius:60px;
}section{
max-width:960px;
margin:0 auto;
text-align:justify;
}footer{
position:relative;
margin-top:-120px;
height:120px;
clear:both;
background-color:#090;
}/Opera Fix/
body:before {
content:"";
height:100%;
float:left;
width:0;
margin-top:-32767px;
}#wrap, #main, header, section, footer{
min-width:960px;
width:100%;
}
</style> <style type="text/css">
#wrap {display:table;height:100%}
</style></head>
<body>
<div id="wrap">
<div id="main">
<header>
<div id="logo">LOGO</div>
<nav>
<p>NAV</p>
</nav>
</header>
<section id="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut dolor at ligula cursus suscipit. Mauris lacus dolor, aliquet ac semper nec, elementum sit amet massa. Aliquam tempor semper nibh ac placerat. Cras porta scelerisque mattis. Ut at massa urna. Aenean at massa magna, at commodo nunc. Proin sollicitudin dolor et est varius nec egestas orci lacinia.</p>
</section>
</div>
</div>
<footer>
<p>FOOTER</p>
</footer>
</body>
</html>O que me dizem? Poderiam me ajudar?
Obrigado desde já! =)
Carregando comentários...