Ir para conteúdo

Arquivado

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

eniocsj

Menu position fixed e iframe tomando toda página

Por , em Desenvolvimento frontend

Recommended Posts

eniocsj    0

eniocsj
Postado

Bom dia à todos!

Quero um menu transparente no topo da página, com o conteúdo rolando inclusive por baixo do menu, controlando o spacing nas páginas para o conteúdo não ser coberto pelas imagens.

Tenho o seguinte html:

<!DOCTYPE HTML>
<html lang="pt-BR">
<head>
<meta charset="UTF-8" />
<title>Página teste</title>
<link rel="stylesheet" href="menu.css"/>
</head>
<body id='corpo'>
	
<!-- Início do menu superior -->
<table id="menu" width="100%" cellpadding="0" cellspacing="0">
	<tr>
		<td>
			<a href="lorem.html" title="Lorem Ipsum" target="frame">
				<img class="icones" src="_icones/lorem.png" alt="Lorem Ipsum">
			</a>
			<a href="lorem.html" title="Lorem Ipsum" target="frame">
				<img class="icones" src="_icones/lorem.png" alt="Lorem Ipsum">
			</a>
			<a href="lorem.html" title="Lorem Ipsum" target="frame">
				<img class="icones" src="_icones/lorem.png" alt="Lorem Ipsum">
			</a>
		</td>
		<td>
			<img src="shield.png" class="icones" id="escudo" align="right" alt="Login">
		</td>
	</tr>
</table>
<!-- Fim do menu superior -->

<iframe name="frame" id="frame" src="lorem.html"></iframe>

</body>
</html>

...e esse CSS:

@charset "UTF-8";
body#corpo {
	background-image: url("bg.jpg");
		}
table#menu {
	margin-top: -10px;
	position: fixed;
        }
img.icones {
	width: 20px;
        }
img#escudo {
	margin-right: 10px;
		}
iframe#frame{
	border: 0px;
	margin: -10px;
	height: 700px;
	width: 100%;
	display:block;

Enquanto o conteúdo não ultrapassa a altura da página, está tudo bem, mas quando esta linha limítrofe é alcançada (e sempre o é), duas barras de rolagem aparecem. Já tentei mil peripécias e nada.

Bom, gostaria de aproveitar e desejar um ano repleto de realizações e felicidade à todos.

Obrigado!

Compartilhar este post

Link para o post
Compartilhar em outros sites

eniocsj    0

eniocsj
Postado

Na realidade, eu quero que conforme o usuário clique em um item do menu, ele abra no frame( como no exemplo). Independente de ser num frame ou div, se o conteúdo for grande o suficiente para ultrapassar os limites da página, aparece o scroll do body e o scroll do frame/div.

Outro exemplo:tirei o <frame> e coloquei uma div, com o seguinte código para inserir conteúdo na div#conteudo conforme clica-se num item da table#menu:

<script type='text/javascript' src='jquery-1.5.1.min.js'></script>
<script type='text/javascript'>
$(document).ready(function(){
// Executa o evento CLICK em todos os links do menu
$('#menu a').live('click',function(){
// Faz o carregamento da página de acordo com o COD da página, que vai pegar os valores da página.
$('#conteudo').load($(this).attr('href'));
return false;
});
});
</script>

O problema persiste se o "Lorem Ipsum" tiver umas 100 linhas, por exemplo.

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