Fala galera. Seguinte. Tenho um menu numa página simples de html5 estilizada com CSS. Esta dividida ao meio verticalmente por duas colunas (tem também um cabeçalho e um rodapé). Eu não estou conseguindo abrir os itens do…

Abrir link´s do menu em outra coluna (div)

Segue o código para explicar:

<!DOCTYPE html>
<html>
<head>

<title>Inicio - Visitantes</title>
<link type="text/css" rel="stylesheet" href="meu.css" />
 
</head>
 
<body>
<div id="interno">
<nav id="menu">
    <ul>
        <li><a href="conexao.html">Login</a></li>
        <li><a href="form-cad.html">Cadastro</a></li>
        <li><a href="consulta.html">Consulta</a></li>
        <li><a href="altera.html">Alteração</a></li>
        <li><a href="manutencao.html">Manutenção</a></li>
    </ul>
</nav>

<div id="cabecalho">
<br />

<p>CABECALHO COM LOGO E NOME DO SITE</p>


</div><!--fim div cabecalho-->
 
<div id="conteudo"><!-- inicio div conteudo -->


<div id="interno-esq">

<br />
<p>LADO ESQUERDO<p>

</div><!--fim div lado esquerdo-->

<div id="interno-dir">

<br />
<p>LADO DIREITO<p>

</div><!--fim div lado direito-->

 
</div><!-- fim div conteudo -->
 
<div id="rodape">
<br />
<p>DATA DO DIA - NOME AUTOR PÁGINA</p>

</div><!--fim div rodape-->
 
</div>
</body>
</html>

e agora de uma pagina qualquer para servir nesses link´s do menu

<!doctype html>
<html>
<head>
<title>Acesso - Conexão</title>
<link rel="stylesheet" type="text/css" href="meu.css" />
</head>
<body>
<img src="logo.jpg" alt="site" />
<p>Dados de Usuários</p>

<div id="formulario">
<form id="frmAcesso" method="post" action="form-cad.html">
<label for="txtUser">Username:</label>
<br />
<input type="txtUser" >
<br />
<label for="txtPass">Senha:</label>
<br />
<input type="password" name="pass" id="pass" value="" />
<br />
<br />
<input id="btConectar" type="submit" value="Conectar" />
<input id="btCancelar" type="reset" value="Limpar" />
</form>
</div>
<br />
<br />
<div id="sair">
<a href="index.html"><-- Voltar</a>
</div>
</body>
</html>

e o css também:

/*CSS*/

p{
	font-family: Open-Sans,Verdana, Geneva, Arial, sans-serif;
	font-size: x-large;
	color: #000;
/*	text-decoration: underline;*/
	text-align: center;
}

a:visited { font-family: Open-Sans, Geneva, sans-serif;
			color: #699;
			text-decoration: none }

a:link { font-family: Open-Sans, Geneva, sans-serif;
		 color: #696;
	     text-decoration: underline overline }

a:hover { font-family: Open-Sans, Geneva, sans-serif;
		  color: #c93;
		  text-decoration: underline }

#formulario{
	font-family: Open-Sans,Verdana, Geneva, Arial, sans-serif;
	font-size: x-large;
	color: #000;
}

#interno{
    width:1000px;
    height:405px;
    margin-top:0;
    margin-left:auto;
    margin-bottom:0;
    margin-right:auto;
    background-color:#444;
}
nav {
	display: flex;
	justify-content: center;}

#cabecalho{
  width:1000px;
  height:100px;
  background-color:#FFE4E1;
  }

#menu ul {
    /*display: flex;
	justify-content: center;*/
	padding:0px;
    	margin:0px;
    	background-color:#EDEDED;
    	list-style:none;
	float: center;
	font-family: Verdana;
}

#menu ul li { 
	/*display: flex;
	justify-content: center; */
	float: center;
}

#menu ul li {
    padding: 2px 10px;
    display: inline-block;
	/*display: flex;
	justify-content: center;*/
    background-color:#EDEDED;
    color: #333;
    text-decoration: none;
    border-bottom:3px solid #EDEDED;
}

#menu ul li {
   /* display: flex;
	justify-content: center;*/
	background-color:#D6D6D6;
    color: #6D6D6D;
    border-bottom:3px solid #EA0000;
}

#conteudo{
  width:1000px;
  height:405px;
  background-color:#599;  
} 

#rodape{
  width:1000px;
  height:100px;
  background-color:#FFE4E1;
  }

#interno-esq{
  width:500px;
  height:405px;
  float:left;
  background-color:#FFDAB9;
  }

#interno-dir{
  width:500px;
  height:405px;
  float:left;
  background-color:#F0E68C;
  }

E tem a img para explicar melhor. Desde já agradeço que puder ajudar.

3 Respostas

Topicos relacionados