(Resolvido) Erro com camadas no css

vini_loock · Dezembro 6, 2009

Ola... estou com um probleminha eu quero fazer um layout com 5 camadas que são :

Tudo

Topo

Navbar

Conteudo

Anunciosbar

Mas o problema é que a div tudo era pra ficar com todas as outras divs, mas só fica sem o position absolute, já tentei relative, deu certo, mas do mesmo jeito vai me dar problemas futuros.

Segue abaixo o código:

<html>
<head>
<title></title>
<style type="text/css">
body{background-color: #000000;text-align: center;}

#tudo{background-color: #ffffff; width: 1000px; height: 3000px; text-align: left;}

#topo{background-color: #efebef; width: 990px; height: 120px; position: absolute; top:5px; left:5px;}

#navbar{background-color: #efebef; width: 150px; height: 600px; position: absolute; top: 130px; left: 5px;}

#conteudo{background-color: #efebef; width: 670px; height: 600px; position: absolute; top: 130px; left: 160px;}

#anunciobar{background-color: #efebef; width: 160px; height: 600px; position: absolute; top: 130px; left: 835px;}
</style>
</head>
<body>
<div id="tudo">

<div id="topo"></div>

<div id="navbar"></div>

<div id="conteudo"></div>

<div id="anunciobar"></div>

</div>
</body>
</html>

Por favor me ajudem!

Vlw

Editado Dezembro 6, 2009 por vini_loock

Anderson Ferreira · Dezembro 7, 2009

Usa o float: left; ele faz mágicaas (66-)

E o margin pra posicionar

Ficaria assim:

<html>

<head>

    <title></title>

    <style type="text/css">
        body { background-color: #555; text-align: center; }

        #tudo { background-color: #FF9900; width: 1000px; height: 3000px; text-align: left; }
            #topo { background-color: #efebef; width: 990px; height: 120px; float: left; margin: 5px 0 0 5px; }
            #navbar { background-color: #efebef; width: 150px; height: 600px; float: left; margin: 5px 0 0 5px; }
            #conteudo { background-color: #efebef; width: 670px; height: 600px; float: left; margin: 5px 0 0 5px; }
            #anunciobar { background-color: #efebef; width: 160px; height: 600px; float: left; margin: 5px 0 0 5px; }
    </style>

</head>

<body>

    <div id="tudo">
        <div id="topo"></div>
        <div id="navbar"></div>
        <div id="conteudo"></div>
        <div id="anunciobar"></div>
    </div>

</body>

</html>

PS: No IE o layout ficou centralizado, mais no Firefox e no Chrome ficou alinhado a esqrda ... Mais se você quiser alinhar centralizado o layout inteiro pra todos os navegadores, ficaria assim: sua tag #tudo:

#tudo { background-color: #FF9900; width: 1000px; height: 3000px; text-align: left; position: absolute; left: 50%; margin: 0 0 0 -500px; }

Abraços (e boa sorte),

Anderson Ferreira

vini_loock · Dezembro 7, 2009

Vlw funcionou tudo certinho, mas só não entendi o que você fez para deixar as camadas uma ao lado da outra.

Seria o float left?

Vlw

Anderson Ferreira · Dezembro 7, 2009

Exatamente, como te falei:

Usa o float: left; ele faz mágicaas (66-)

O float serve para fazer 'flutuar' um objeto sobre o outro, ou seja, você ponhe seu objeto onde quiser, no seu caso, a <div> :D

Existe 4 propriedades:

- float: left;

- float: right;

- float: none;

- float: inherit;

No seu caso, foi utilizado o float: left;, pois suas <div> foram alinhadas a esquerda. Se fosse utilizado o float: right;, seria alinhado a direita.

E depois utilizei a técnica do position com margin para alinhar todo o layout no centro.

Para saber mais, acessa: http://www.w3schools.com/css/pr_class_float.asp (em inglês)

Abraços,

Anderson Ferreira

Editado Dezembro 7, 2009 por Anderson Ferreira

vini_loock · Dezembro 7, 2009

Obg... esse que é o problema de estudar por conta própria, se você não tivesse falado desse float não tenho noção de quando eu iria ir falar disso.

Vlw mais uma vez.

Anderson Ferreira · Dezembro 7, 2009

Sim .. Mais um dia acaba aprendendo ^^

também estudo por conta própria (tenho só 15 anoos ¬¬) .. E já aprendí várias coisas pela internet (ou melhor, tudo aprendi pela internet) KKKKK!

Abraços,

Anderson Ferreira

vini_loock · Dezembro 9, 2009

Eu tenho 14 anos, mas a um ano atras eu não sabia nem extrair um arquivono pc...Que evolução.

Eu dei mais uma estudada sobre css, mas não acho nenhum exercicio para ver se eu realmente aprendi você tem algum link ai?

Vlw

vini_loock · Dezembro 9, 2009

Galera to com mais um probleminha dentro da div topo eu usei uma div com float:right; com uma imagen de fundo, deu tudo certo, mas quando eu fui colocar o baner rotativo nela deu errado ela ficou pra diteita e pra cima(pra fora da div).

<html>

<head>

    <title></title>

    <style type="text/css">
        body { background-color: #666666; text-align: center; }

            #tudo { background-color: #ffffff; width: 1000px; text-align: left; position: absolute; left: 50%; margin: 0 0 0 -500px; }
            #topo { width: 986px; height: 120px;  border-style:solid; border-color:#006600; border-width:2px;float: left; margin: 5px 0 0 5px; }
        #logo{background-image:url("../img/logo.gif"); width:235px; height:93px; float:left; margin:15px;}
        #publicidadetopo{background-image:url("../img/publicidade.gif"); width:422px; height:102px; float:right; margin:10px 40 0 0px;}
            #menu{ width: 986px; height: 30px;  border-style:solid; border-color:#006600; border-width:2px; float:left; margin: 5px 0 0 5px; }
        #navbar {  width: 146px; height: 600px;  border-style:solid; border-color:#006600; border-width:2px;float: left; margin: 5px 0 0 5px; }
            #titulo{background-image:url("../img/titulos.gif"); width:100%; height:30px; float:left; color:#ffffff; font-family:"comic sans ms"; font-size:15px; font-weight:bold; text-align:center;}
        #linkcomercios{width:100%; text-decoration:none; color:#666666; font-size:13px; font-family:"comic sans ms";}
        #linkcomercios:hover{ width:100%; text-decoration:underline; color:#000000; font-size:13px; font-family:"comic sans ms";}
        #conteudo {  width: 666px; height: 600px;  border-style:solid; border-color:#006600; border-width:2px;float: left; margin: 5px 0 0 5px; }
            #anunciobar { width: 156px; height: 600px;  border-style:solid; border-color:#006600; border-width:2px; float: left; margin: 5px 0 0 5px; }
        #anunciantecapa{background-image:url("../img/fundo_anunciantes.gif"); width:137px; height:136px; border:none; float:left; padding:2px; margin:7px; 5 5 5px; background-repeat:no-repeat;}
        #anunciantecapa:hover{background-image:url("../img/fundo_anunciantes_hover.gif"); width:137px; height:136px; float:left; padding:2px; margin:7px; 5 5 5px; background-repeat:no-repeat;}
        #rodape {  width: 986px; height: 120px; border-style:solid; border-color:#006600; border-width:2px;float: left; margin: 5px 0 0 5px; }
    </style>

</head>

<body>

    <div id="tudo">
        <div id="topo">
        <div id="logo"></div>
<div id="publicidadetopo">
<script language="JavaScript"> 
    var how_many_ads = 2; 
    var now = new Date() 
    var sec = now.getSeconds() 
    var ad = sec % how_many_ads; 
    ad +=1; 
    if (ad==1) { 
    txt=""; 
    url="http://www.criarsites.com"; 
    alt="Dicas para Webmasters"; 
    banner=".../botões/Montanhas azuis.png"; 
    width="396"; 
    height="96"; 
    } 
    if (ad==2) { 
    txt=""; 
    url="http://www.criarblog.com"; 
    alt="Dicas para Criar Blogs"; 
    banner="http://www.criarsites.com/wp-content/uploads/2008/05/criar-blog.gif"; 
    width="396"; 
    height="96"; 
    } 
    document.write('<center>'); 
    document.write('<a href=\"' + url + '\" target=\"_parent\">'); 
    document.write('<img src=\"' + banner + '\" width=') 
    document.write(width + ' height=' + height + ' '); 
    document.write('alt=\"' + alt + '\" border=0><br>'); 
    document.write('<small>' + txt + '</small></a>'); 
    document.write('</center>'); 
    // End --> 
    </script>
</div>
    </div>
    <div id="menu"></div>
        <div id="navbar">
        <div id="titulo">Guia do Com&eacute;rcio</div>
            <div id="linkcomercios"><a href="#" id="linkcomercios">&nbsp;>>link de com&eacute;rcio</a></div>
            <div id="linkcomercios"><a href="#" id="linkcomercios">&nbsp;>>link de com&eacute;rcio</a></div>
            <div id="linkcomercios"><a href="#" id="linkcomercios">&nbsp;>>link de com&eacute;rcio</a></div>
            <div id="linkcomercios"><a href="#" id="linkcomercios">&nbsp;>>link de com&eacute;rcio</a></div>
            <div id="linkcomercios"><a href="#" id="linkcomercios">&nbsp;>>link de com&eacute;rcio</a></div>
            <div id="linkcomercios"><a href="#" id="linkcomercios">&nbsp;>>link de com&eacute;rcio</a></div>
            <div id="linkcomercios"><a href="#" id="linkcomercios">&nbsp;>>link de com&eacute;rcio</a></div>
            <div id="linkcomercios"><a href="#" id="linkcomercios">&nbsp;>>link de com&eacute;rcio</a></div>
            <div id="linkcomercios"><a href="#" id="linkcomercios">&nbsp;>>link de com&eacute;rcio</a></div>
        <div id="titulo">Tempo</div>
            <iframe src='http://selos.climatempo.com.br/selos/MostraSelo.php?CODCIDADE=62,6412,3388,5926&SKIN=verde' scrolling='no' frameborder='0' width=146 height='170' marginheight='0' marginwidth='0'></iframe>
    </div>
        <div id="conteudo"></div>
        <div id="anunciobar">
        <div id="titulo">Anunciantes</div>
            <a href="#"><div id="anunciantecapa"><img src="../img/pordosol.jpg" width="125" height="125"></div></a>
            <a href="#"><div id="anunciantecapa"><img src="../img/pordosol.jpg" width="125" height="125"></div></a>
            <a href="#"><div id="anunciantecapa"><img src="../img/pordosol.jpg" width="125" height="125"></div></a>
    </div>
    <div id="rodape"></div>
    </div>

</body>

</html>

imagen:

Observe que ela não está dentro do quadrado verde.

alguém sabe qual a solução?

Vlw

Desculpem postei nova msg sem querer

Editado Dezembro 10, 2009 por vini_loock

Anderson Ferreira · Dezembro 10, 2009

Então "vini_loock", tenta assim:

Ao invés de colocoar um "float: right;" na <div> topo, coloca um "float: left;"

E o mais importante: você também tem q colocar um float na <div> da imagem.

Por exemplo, se você colocou um "float: right;" na <div> topo, a <div> da imagem também tem q estar com o mesmo float, no caso o "float: right;", entendeu?

Caso não consiga, posta o arquivo ".zip" do site, COM AS IMAGENS q tento arrumar pra você, pois você postou só o código, e preciso das imagens também pra testar :S

vini_loock · Dezembro 13, 2009

Vlw funcionou certinho.

Esse float ta me quebrando as pernas.

Anderson Ferreira · Dezembro 14, 2009

Moderador, favor marcar como respondido ;)

Entrar

(Resolvido) Erro com camadas no css

Pergunta

Link para o comentário

Compartilhar em outros sites

10 respostass a esta questão

Posts Recomendados

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Participe da discussão

Estatísticas dos Fóruns