Html5 e Css

Matheus Maldi · 2 de outubro de 2012

estou fazendo um modelo de sitio em html5 e css e estou com um problema, parecia tudo beleza, mas tem um problema.

O section tem uma cor de fundo, dentro deste section tem um article flutuando a esquerda e um aside a direita, porém o section não se adapta ao tamanho do article, ficando pequeno, segue os 2 códigos

/* Corpo com cor de fundo padrão */
body {
    background-color: #5c87b2;
}

/* Usado para centralizar a pagina e 
   manter com 960px para resoluções 1024*/
.page {
    width: 960px;
    margin-left: auto;
    margin-right: auto;
}

/* Separar em blocos */
article, aside, figcaption, figure, footer, header, hgroup, nav, section {
    display: block;
}

header {
    position: relative;
    margin-bottom: 0px;
    color: white;
    padding: 0;
}

article {    
    float: left;
    width: 75%;
}

aside {
    float: right;
    width: 25%;
}

section {    
    padding: 30px 30px 15px 30px;
    background-color: whitesmoke;
    min-height: 400px;
}

footer {
    padding: 10px;
    color: white;
    clear: both;
    text-align: center;
}


#title {
    display: block;
    float: left;
}

#logindisplay {
    display: block;
    margin: 10px;
    text-align: right;
}

/* TAB MENU
----------------------------------------------------------*/
ul#menu {
    padding: 0 0 2px;
    position: relative;
    margin: 0;
    text-align: right;
}

ul#menu li {
    display: inline;
    list-style: none;
}

ul#menu li#greeting {
    padding: 10px 20px;
    font-weight: bold;
    text-decoration: none;
    line-height: 2.8em;
    color: #fff;
}

ul#menu li a {
    padding: 10px 20px;
    font-weight: bold;
    text-decoration: none;
    line-height: 2.8em;
    background-color: #e8eef4;
    color: #034af3;
    border-radius: 4px 4px 0 0;
    -webkit-border-radius: 4px 4px 0 0;
    -moz-border-radius: 4px 4px 0 0;
}

ul#menu li a:hover {
    background-color: #fff;
    text-decoration: none;
}

ul#menu li a:active {
    background-color: #a6e2a6;
    text-decoration: none;
}

ul#menu li.selected a {
    background-color: #fff;
    color: #000;
}

<!doctype html>
<html>
<head>
    <title>Msmaldi Sitio's</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <link href="site.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <div class="page">
        <header>
            <div id="title">
                <h1>Msmaldi</h1>
            </div>
            <div id="logindisplay">
                Bem Vindo Visitante!
                <a href="form.html" id="registerLink">Registrar-se</a>
            </div>
            <nav>
                <ul id="menu">
                    <li><a href="#">link 1</a></li>
                    <li><a href="#">link 2</a></li>
                    <li><a href="#">link 3</a></li>
                </ul>
            </nav>
        </header>
        <section>
            <article>
                <hgroup>
                    <h1>Post title</h1>
                    <h2>Subtitle and info</h2>
                </hgroup>
                <p>Content goes here.</p>
                <p>Content goes here.</p>
                <p>Content goes here.</p>
                <p>Content goes here.</p>
                <p>Content goes here.</p>
                <p>Content goes here.</p>
                <p>Content goes here.</p>
                <p>Content goes here.</p>
                <p>Content goes here.</p>
                <p>Content goes here.</p>
                <p>Content goes here.</p>
                <p>Content goes here.</p>
                <p>Content goes here.</p>
                <p>Content goes here.</p>
                <p>Content goes here.</p>
                <p>Content goes here.</p>
                <p>Content goes here.</p>
                <p>Content goes here.</p>
                <p>Content goes here.</p>
                <p>Content goes here.</p>
                <p>Content goes here.</p>
                </article>
            <aside>
                <h3>Indice</h3>
                <ul>
                    <li><a href="index.html">Home</a></li>
                    <li><a href="sobre.html">Sobre</a></li>
                    <li><a href="contact.html">Contato</a></li>
                </ul>
            </aside>           
        </section>
        <footer>msmaldi sitio's Todos os direitos reservados.</footer>
    </div>
</body>
</html>

DiF · 2 de outubro de 2012

Olá,

deveria funcionar, veja este exemplo simples:


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="wdith=device-width, initial-scale=0.1">
<meta name="robots" content="index, follow" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<meta name="author" content="Francisco Guimarães" />
<meta name="generator" content="Eclipse For PHP - Helios" />
<title>Insert title here</title>
<style type="text/css">
 section{
     width: 960px;
     margin: 0 auto;
     background: red;
     min-height: 400px; 
     text-align: left;
 }

 article{
    margin-top: 50px;
    float: left;
    width: 75%;
    background: blue;
    min-height: 100px;

 }

 aside {
 	margin-top: 30px;
    float: right;
    width: 25%;
    background: green;
    min-height: 100px;
}

</style>
</head>
<body>

<section>
	Elemento Pai	
	<article>Elemento filho de Section</article>
	<aside> Elemento filho de section e irmão de article</aside>
</section>

</body>
</html>

veja que tanto o article quanto o aside nao extrapolam o tamanho da width de section. veja se isso acontece por algum conflito de class ou id de algum elemento, isso pode estar sobrescrevendo os atributos eai fazendo com que ele saiam para fora de section.

tente retirar o section de onde voce decreta display block, decretando como block estas informando para o navegador tratar o elemento a nivel de bloco.

abraço

Matheus Maldi · 2 de outubro de 2012

Acho que você não entendeu o que queria fazer, queria que com seu código a section ficasse inteira vermelha(no caso ficasse vermelho envolta do aside e article).

Mas consegui adicionando ao fim do section

<div style="clear: both;"></div>

porém achei meio gambiarra, fazer essas coisas é normal em html e css?

DiF · 3 de outubro de 2012

Sim, o atributo clear é bastante usado para limpar o espaço para o elemento a nivel de bloco seguinte.

mas então, realmente interpretei mal o problema, também nao executei seu código. agora executei ele no eclipse e tenho uma solução melhor do que usar o clear.

Retire a div com clear e deixe o css do section desta maneira:


section {    
    padding: 30px 30px 15px 30px;
    background-color: whitesmoke;
    min-height: 400px;
    [COLOR="Red"]display: table;
    width: 100%;[/COLOR]
}

em vermelho, sao os atributos que tens que adicionar. veja se é assim que quer que fique. abraço

Matheus Maldi · 3 de outubro de 2012

No momento estou usando a div para limpar mesmo. No seu novo código, veja que fica desalinhado o menu, se eu remover o padding resolve, mas as letras ficaram grudadas no canto.

Mas tudo OK, pode marcar resolvido, ou se conseguir de outro jeito me avise.

DiF · 3 de outubro de 2012

Tente acrescentar no seu CSS:



article hgroup, p{
   margin-left: 30px;

}

também podes resolver simplesmente reduzindo o width do section para 93.8%

caso reduza o width, mantenha o padding de section e retire a div clear.

caso use o codigo css mais acima, retire a div clear e retire o padding.

veja se resolve.

Ps: os valores sao baseados no meu monitor( 21 polegadas) pode ser que tenha que fazer um ajuste mais fino no seu para ficar certinho.

abraço

Matheus Maldi · 3 de outubro de 2012

Achei a solução ideal, agora não é mais necessário a extra div no html.


section {    
    padding: 30px 30px 15px 30px;
    background-color: whitesmoke;
    min-height: 400px;
}

section:after {    
    content: ".";
    clear: both;
    display: block;
    visibility: hidden;
}

Pode marcar resolvido. Obrigado pela ajuda.