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 menu em um dos lados dessas 2 divisões. Mudar sempre o item que for escolhido. É possível fazer isso? Não sei se expliquei direito mas clica no menu (um href/link para outra pagina) e ele abre no lado esquerdo ou direito por exemplo. Tudo esta dividido por DIV´s e ajustado com CSS. Não gostaria de usar javascript. Só com HTML5 e CSS mesmo por enquanto. Desde já obrigado.
posta o código.
Formate seu código em
</>
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.