Problemas com position relative.

thiagobasalles · Junho 21, 2014

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>

<head>

<title>Testando blocos relativos e absolutos</title>

</head>

<body>

</header>

</nav>

</nav>

</div>

</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;

}

___________________________

Mika-san · Junho 21, 2014

Retire a propriedade display: inline-block; dos IDs #bloco-slider e #menu-esquerdo; não acho que seja necessário nesse caso.. e acrescente a propriedade float: left em ambos também.

thiagobasalles · Junho 21, 2014

O float seria uma solução. E eu já havia pensado nisso. Porém, a questão é sobre o que há de errado neste código. Tenta inserir algo dentro do #bloco-slider. Por exemplo:

<div id="bloco-slider"> 1 </div>

Verá que o comportamento no index muda. Queria entender o motivo.

Entrar

Problemas com position relative.

Pergunta

thiagobasalles

Link para o comentário

Compartilhar em outros sites

2 respostass a esta questão

Posts Recomendados

Mika-san

Link para o comentário

Compartilhar em outros sites

thiagobasalles

Link para o comentário

Compartilhar em outros sites

Participe da discussão

Estatísticas dos Fóruns

Navegação

Atividades