Ir para conteúdo

POWERED BY:

Arquivado

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

lucasolbc

Menu sincronizado - CSS

Por , em Desenvolvimento frontend

Recommended Posts

lucasolbc    0

lucasolbc
Postado

Boa noite pessoal!
Acabei de me inscrever no fórum e essa é a minha primeira postagem!
Bom, vamos lá...
Sou iniciante no HTML/CSS e estou criando um site para aprendizado. Eis a minha dúvida:
Estou tratando todos os elementos no CSS com porcentagem, para o site se adaptar bem em diferentes monitores e resoluções desktop. Estou criando um logo, ao lado banner e, embaixo desse banner um menu (sendo que o tamanho do banner e do menu juntos são iguais ao do logo, para ficarem do lado dele). Só que quando eu aumento ou diminuo a tela do navegador o banner "engole" o menu, porque a imagem dele aumenta ou diminui de acordo com o fluxo. Também gostaria de saber como eu alinhar o menu com o banner, de forma que ele fique sempre da mesma largura que ele... Segue meus códigos: 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<link rel="stylesheet" href="css/style.css" type="text/css" />
		<title>Chacky Play</title>
	</head>
	<body bgcolor="#010101">
	<div id="tudo">
	
		<div id="cabecalho"  >
			<!--<img src="ENDERECO_DA_IMAGEM_NORMAL" onmouseout="this.src='ENDERECO_DA_IMAGEM_NORMAL';" onmouseover="this.src='ENDERECO_DA_IMAGEM_AO_PASSAR_O_MOUSE';" />-->
			<a href="index.html"><img src="img/teste2.jpg" onmouseout="this.src='img/teste2.jpg';" onmouseover="this.src='img/teste.jpg';" id="logo"/></a>
		   <div id="elemental">
		   <img src="img/ban1.jpg" id="banner1" />		
			
			<nav id="menu">
				<ul>
					<li><a href="#">INICIO</a></li>
					<li><a href="#">CANAL</a></li>
					<li><a href="#">AVALON SAGA</a></li>
					<li><a href="#">DESENHOS</a></li>
					<li><a href="#">FRASES</a></li>
					<li><a href="#">CONTATO</a></li>
				</ul>
            </nav>	
			</div>
		</div>

	</div>
	</body>
</html>

#logo{
	float: left;
	width: 17%;
	height: 20%;
	margin-left: 6.2%;
	margin-top: 1%;
	position:absolute;
}

#banner1{
	margin-left: 23%;
	margin-top: 1.5%;
	position: absolute;
	width: 68%;
	height: 15.5%;
	margin-right: 5%;
	z-index:3;
}

#cabecalho{
	margin-top: 0px;
}

#menu ul {
	padding:0px;
	margin:0px;
	margin-left: 23.5%;
	margin-top:10%;
	background-color:#094277;
	list-style:none;
	position:absolute;
}

#menu ul li { display: inline; }

#menu ul li a {
	padding: 2px 10px;
	display: inline-block;
 
	/* visual do link */
	background-color:#094277;
	color: white;
	text-decoration: none;
	border-bottom:3px solid #EDEDED;
	
}

#menu ul li a:hover {
	background-color:#6187AC;
	color: white;
	border-bottom:3px solid #100057;
}

Agradeço a atenção de todos!

 

 

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