Ir para conteúdo

POWERED BY:

Arquivado

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

aoteulado

Posicionamento Div em uma Div 100%

Recommended Posts

Olá, preciso de uma ajudinha em relação de posicionamento.

 

É o seguinte, tenho um menu topo com width 100% da tela e height de 89px dentro desse menu tenho os topicos " HOME - SOBRE - PORTFOLIO - CONTATO", com uma posição float:right, mas eu quero q meu menu fique com a posição em uma lugar único quando eu aumentar a tela, apenas mude quando eu diminuiu para q ele fique responsivo.

 

Link da pagina de teste:

 

http://mbdesigner.pe.hu/

http://jsfiddle.net/7zuvqko7/

 

Código html

<nav class="fluid nav">
        			 
            	<ul class="menu-bar">
                    <li><a href="#">HOME</a></li>
                    <li><a href="#">SOBRE</a></li>
                    <li><a href="#">PORTFÓLIO</a></li>
                    <li><a href="#">CONTATO</a></li>
                </ul>
              
             
        </nav> 

Código css

.nav {
	width:100%;
	height:89px;
-webkit-box-shadow: 0 1px 15px -3px #000000;
   -moz-box-shadow: 0 1px 15px -3px #000000;
        box-shadow: 0 1px 15px -3px #000000;
	background-color:#fff;

	
}
.nav ul {
	display:inline;
	float:right;
	margin-top:2em;
	margin-right:20px;	
}
.nav ul li {
	display:inline;
	margin-right:40px;
	background-color:transparent;
	border:none;
	
}
.nav ul li a {
	display:inline;
	color:#000;
}
.nav ul li:hover {
	
	background-color:transparent;
}
.nav ul li a:hover {
	color:blue;	
	background-color:transparent;
}
.mobile-nav {
	background-color:blue;
	width:100%;
	height:70px;	
} 

Eu quero q quando a tela seja maior a posição do menu fique em um único lugar, alinhado com a div laranja

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

Você pode criar uma div antes da <ul> do menu, limitando a largura para o tamanho da largura do conteúdo laranja, assim, a largura preenchida pelo menu não será 100%, mas apenas o limite do laranja.

Compartilhar este post


Link para o post
Compartilhar em outros sites

×

Informação importante

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