Ir para conteúdo
Fórum Script Brasil
  • 0

Problemas com position relative.


thiagobasalles

Pergunta

Estou tendo um problema quanto a inserção de conteúdo dentro de um bloco. Criei um documento chamado index.html e um outro estilo.css. Separei todos por blocos, tentando seguir o padrão do html5. Porém, nos blocos: id="menu-esquerdo" e id="bloco-slider", quando eu os deixo sem conteúdo escrito(qualquer letra ou número), eles se comportam adequadamente. Quando eu insiro qualquer letra ou número, no bloco com id="bloco-slider", ele simplesmente se reposiciona para a parte de baixo do bloco com id="menu-esquerdo". Eu poderia usar position: absolute; no bloco id="bloco-slider" que resolveria o problema, porém, por motivo de conhecimento, gostaria de uma explicação ou uma solução usando position: relative;, para este problema. Obrigado e aguardo ajuda.

Segue abaixo o código em HTML5 e CSS.


HTML5:(idex.html)
___________________________

<!DOCTYPE html>
<html lang="pt-br">
<head>
<title>Testando blocos relativos e absolutos</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="estilo.css">
</head>
<body>
<div id="pagina">
<header id="cabecalho">
</header>
<nav id="menu-topo">
</nav>
<nav id="menu-esquerdo">
</nav>
<div id="bloco-slider">
</div>
<footer id="rodape">
</footer>
</div>
</body>
</html>
___________________________


CSS(estilo.css)
___________________________
#pagina{
width: 1280px;
height: 720px;
background-color: pink;
}
#cabecalho{
height: 120px;
background-color: blue;
}
#menu-topo{
height: 100px;
background-color: green;
}
#menu-esquerdo{
position: relative;
display: inline-block;
height: 450px;
width: 279px;
background-color: orange;
}
#bloco-slider{
position: relative;
display: inline-block;
height: 450px;
width: 995px;
background-color: purple;
}
___________________________

Link para o comentário
Compartilhar em outros sites

2 respostass a esta questão

Posts Recomendados

Participe da discussão

Você pode postar agora e se registrar depois. Se você já tem uma conta, acesse agora para postar com sua conta.

Visitante
Responder esta pergunta...

×   Você colou conteúdo com formatação.   Remover formatação

  Apenas 75 emoticons são permitidos.

×   Seu link foi incorporado automaticamente.   Exibir como um link em vez disso

×   Seu conteúdo anterior foi restaurado.   Limpar Editor

×   Você não pode colar imagens diretamente. Carregar ou inserir imagens do URL.



  • Estatísticas dos Fóruns

    • Tópicos
      152,3k
    • Posts
      652,2k
×
×
  • Criar Novo...