Pesquisar na Comunidade
Mostrando resultados para as tags ''relative''.
Encontrado 1 registro
-
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; } ___________________________
