Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Boa noite pessoa. Sou novo por aqui, então qualquer asneira que eu falar por favor sintam-se à-vontade para reclamar.
Bom, estou com um grave problema (acho que fácil de resolver). Tenho o seguinte HTML (5, minimizado)
<body>
<div class="bg_menu">
<header class="menu_content">
</header>
</div>
<div class="bg_content">
<div class="content">
</div>
</div>
</body>É um código muito simples, contendo duas divs, cada uma com uma div dentro.
o css que estou aplicando é o css do meyers:
/ http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain) / html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } / HTML5 display-role reset for older browsers / article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } table { border-collapse: collapse; border-spacing: 0; }
E o código do css meu é o seguinte:
html, body {
width: 100%;
height: 100%;
font-family: "Arial", sans-serif; color: #444;
background: #EEEBEB;
}/Qualified elements in layout/
.menu_content, .content {
position: relative;
}
.bg_menu {
height: 54px;
background: #960E00 url('../img/bg_header.png') repeat-x; margin: 0 auto;
width: 1000px;
}
.bg_content {
width: 100%;
height: 100%;
background: #EEEBEB url('../img/dotted.jpg') repeat-x;
box-shadow: inset 4px 6px 30px #969696;
}
.content {
width: 1000px;
height: 700px;
margin: 20px auto;
border-radius: 4px;
background-color: #FFF;
box-shadow: 2px 2px 5px #A5A8AB;
}1º eu dei um margin de 20px na div que está dentro da div bg_content, e para minha surpresa, ela me deu um margin relativo a barra do menu em cima.
2º O height 100%, fez com que minha div ficasse com 100% do tamanho do body (isso eu já saquei), ou seja, fazendo aparecer a barra de rolagem um pouco.
Gostaria de uma luz de o porque está dando esse problema e uma luz de como fazer com que a div não faça aparecer a barra de rolagem (apenas quando o conteudo da div content crescer claro).
Agradeço desde já a ajuda e a paciência de todos, muito obrigado.
tenta assim:
.content {
width: 1000px;
height: 700px;
margin: 0 auto;
padding: 20px 0;/* transferi para cá o espaçamento top */
border-radius: 4px;
background-color: #FFF;
box-shadow: 2px 2px 5px #A5A8AB;
}Olá #eclipse, irei dar uma olhada nisso sim.
William, o problema ai, é que o padding é o espaçamento interno da div, eu quero fazer com que essa div branca fique "descolada" do menu de cima, ms a div que é pai dela deve permanecer colada (imediatamente abaixo) da barra do menu, entendeu?
Colocando padding, ela cola no menu.
é que quando vc faz margin-top, ocorre um margin collapse e ela transfere de elemento.
uma forma de corrigir isso é adicionando um overflow na sua externa:
.bg_content {
overflow: hidden;
}William, muitissimo obrigado cara. Agora sim resolveu meu problema. Ficou bacana mesmo agora. Eu sabia que era algo que eu precisava saber de particularidade, por isso é bom a prática. Eu fiz cursos de HTML e CSS, mas algumas coisas você só se liga e aprende na prática, não tem pra onde correr.
Com relação ao height 100%, tens alguma dica para que eu resolva o problema? Eu já sei que isso ocorre porque ele pega a área da tela e coloca como altura da div, e obviamente passa.
Se tiver alguma forma melhor de fazer, que evite a criação da barra de rolagem sem necessidade ficaria interessante.
Para de desenvolver layout fluído, é muito relativo o uso de porcentagem para definir qualquer propriedade da página. Para usar essas propriedades você deve leva em consideração que ela segue um padrão:
Os elementos estão em "árvore", ou seja, se a div estiver independente ela vai se basear nas medidas da corpo principal da página o "body".
Então eu recomendaria, você acessar o site do maujor e dar uma estudada em layout fluído(ou líquido) para essas usar propriedades de maneira eficiênte!