olá, boa noite.
Gostaria de saber como faço pra abrir abaixo do menu cujo qual eu selecionei?
Ou seja quero abrir uma pagina na mesma página onde tem o menu.
Html - como abrir uma pagina abaixo do menu
C
3 Respostas
C
segue meu código para vocês entenderem melhor.
<section id="menu-topo" class="cor-ae">
<div id="logo" style="position: absolute; left:48%;" >
<img src="psi.png"/>
</div>
<section id="login" style="top:20px;">
<img src="usu.jpg" alt="usuario" >
</section>
<div ><a href="http://localhost:8080/ProjetoFinal/Index.jsp" id="logof" >Sair</a></div>
</section>
<div id="cabecalho-secundario" class="cor-ae">
<nav>
<ul>
<li>Cadastro
<ul>
<li id="cfc" " ><a href="/acessoliberado.jsp">Cadastro</a></li>
</ul>
</li>
<li>Marcar Consultas
<ul>
<li id="cfc" href="/acessoliberado.jsp">Cadastro</a></li>
</ul>
</li>
</ul>
body{
margin: 0;
padding: 0;
}
#menu-topo{
width: 100%;
height: 80px;
padding-top:10px;
}
#logo img{
height: 70px;
display: block;
margin: 0 auto;
}
#logof{
width: 200px;
position: absolute;
top: 45px;
left: 1780px;
font-style: italic;
color: #0C4E98;
}
#login{
width: 200px;
position: absolute;
top: 0;
right: 0;
}
#login img{
position: absolute;
width: 50px;
height: 50px;
top: 1px;
left: 50px;
border: 3px solid #0C4E98;
box-sizing: border-box;
border-radius: 50%;
}
#login p{
position: absolute;
width: 120px;
top: -8px;
left: 75px;
font: 15px roboto, opensans, verdana, sans-serif;
color: #0C4E98;
}
#login button{
position: absolute;
top: 40px;
left: 75px;
}
#cabecalho-secundario{
width: 100%;
height: 45px;
font-family: ubuntu, opensans, verdana, sans-serif;
text-decoration: none;
display: flex;
justify-content: center;
background-color:#e0c259;
font-size: 14px;
box-shadow: 0px 1px 3px;
}
#cabecalho-secundario ul{
position: relative;
max-width: 480px;
list-style: none;
margin: 0 auto;
}
#cabecalho-secundario ul >li{
position: relative;
float: left;
width: 170px;
height: 40px;
margin: 0;
text-align: center;
line-height: 40px;
text-transform: uppercase;
font-family: roboto, opensans, verdana, sans-serif;
}
#cabecalho-secundario ul :hover{
background: #ad801c;
}
#cabecalho-secundario ul li a{
text-decoration: none;
color:#0C4E98;
}
#cabecalho-secudario li {
height: 45px;
padding-top: 4px;;
}
#cabecalho-secundario ul li{
position: relative;
display: block;
box-sizing: border-box;
text-decoration: none;
color: #0C4E98;
cursor: pointer;
font-family: roboto, opensans, verdana, sans-serif;
padding-top: 4px;
height: 45px;
}
#cabecalho-secundario ul li {
background: #e0c259;
}
.cor-ae{
background-color: #e8ce71;
}
ul {
position: absolute;
margin: 0;
list-style:none;
}
li {
display: inline-block;
padding: 0px;
position: relative;
}
#cfc{
font-size: 12px; !important
}
li:hover > ul {
display: block;
}
ul ul {
position: absolute;
display: none;
margin: 0;
padding: 0px;
}
ul ul li {
display: block;
}
ul ul ul {
position: absolute;
top: 0;
left: 100%;
}
}
J
1 like
poderá usar Iframe, ele é um campo onde você pode substitui-lo por algo, neste link encontrara todas as informações necessárias, é super simples de se usar.
https://www.w3schools.com/html/html_iframe.asp
mas se você quer fazer com que o menu sempre fique fixo no topo, é só usar a propriedade position: fixed no seu css.
https://www.w3schools.com/cssref/pr_class_position.asp
https://www.w3schools.com/cssref/playit.asp?filename=playcss_position&preval=relative
C
Mas como faria pra incorporar isso ao meu projeot?
Criado 26 de maio de 2017
Ultima resposta 28 de mai. de 2017
Respostas 3
Participantes 2
Alura O que é Python? — um guia completo para iniciar nessa linguagem de programação Acesse agora o guia sobre Python e inicie sua jornada nessa linguagem de programação: o que é e para que serve, sua sintaxe e como iniciar nela!
Casa do Codigo Guia pratico de TypeScript: Melhore suas aplicacoes... Por Thiago da Silva Adriano — Casa do Codigo