Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Marcelo Garbin

Menu absolute com border-radius centralizado

Por , em Desenvolvimento frontend

Recommended Posts

Marcelo Garbin    30

Marcelo Garbin
Postado

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: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?):

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">
<style type="text/css">
html, body{height:100%;}

#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>
<!--[if !IE 7]>
	<style type="text/css">
		#wrap {display:table;height:100%}
	</style>
<![endif]-->
</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á! =)

Compartilhar este post

Link para o post
Compartilhar em outros sites

Marcelo Garbin    30

Marcelo Garbin
Postado

 

Já tentou

 

margin:10px auto;//coloquei 10px mas você altera como precisar

 

Colocar aonde essa margem? no nav/menu??

 

 

Me diz uma coisa,

 

 

 

Se eu fazer um Container para o <nav>, seria uma "gambiarra" ???

 

Exemplo do header com container (Assim da certo!!!):

 

#nav-container{
	width:800px;
	display:block;
	margin:0 auto;
	position:relative;
	top:90px;
}

nav{
	width:800px;
	height:60px;
	background-color:#06C;	
	border-bottom:2px #F00 solid;
}
<header>
            <div id="logo">LOGO</div>  

            <div id="nav-container"> 
               <nav>
        	<p>menu</p>
               </nav> 
            </div>

</header>

 

Resultado após insereir um container => AQUI

Compartilhar este post

Link para o post
Compartilhar em outros sites

Marcos Xavier    189

Marcos Xavier
Postado

Fiz com a tag nav. Segue:

 

<!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">
<style type="text/css">
html, body{height:100%;text-align:center;margin:0 auto}

#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:relative;
    bottom:-30px;
    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>

</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>

 

Ps: Retirei o position:absolute da nav e deixei como relative

Compartilhar este post

Link para o post
Compartilhar em outros sites

Marcelo Garbin    30

Marcelo Garbin
Postado

Show Marcos, isso mesmo, eu havia feito com o container como havia passado antes, havia dado certo também.

 

Mas após sua solução removi o mesmo, pois não á necessidade de fazer ele para o alinhamento, assim acredito =D

 

Obrigado pela ajuda!

Compartilhar este post

Link para o post
Compartilhar em outros sites

Marcelo Garbin    30

Marcelo Garbin
Postado

Marcos,

 

Aproveitando a sua palavra hehehe...

 

Hoje pra mim fazer um site 100% em HTML5 e CSS3 é viável??? Se eu usar o Modernizr para isso, não vai ficar tudo certo?

 

Negócio é fazer um VM e testar nos IE's nativos.. cara que herva daninha esse tal de IE hSAUhaUhsahushu

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito