Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Bom dia, estou com uma dúvida relativa ao posicionamento de divs, tem uma div pai e mais 3 filhos, um grande e outros 2 com a metade da altura do outro, como nessa imagem:
/applications/core/interface/imageproxy/imageproxy.php?img=http://users3.jabry.com/marvin7/rect2780.png&key=8c6bbe9d538b4a28b72d6d2d196e12951bb921c690671f63cd9ca181ae8651dd" alt="Imagem Postada" />
como posso fazer isso em css???
desde já agradeço....
Basicamente isso
<div id="geral">
<div id="grande"></div>
<div id="peq1"></div>
<div id="peq2"></div>
</div>
<style type="text/css">
#geral{
width: 800px;
height: 600px;
}
#grande{
width: 600px;
height: 600px;
background: red;
position:relative;
float: left;
}
#peq1{
width: 200px;
height: 300px;
background: blue;
position:relative;
float:right;
}
#peq2{
width: 200px;
height: 300px;
background: green;
position:relative;
float:right;
}
</style>Você diz os tamanhos de cada um e a posição.
QUalquer dúvida só postar :)
Edit: Enquanto eu postava você resolver. rs
Acho que a #peq2 teria um clear: right; Thelon.
MarVinOlivieraS, o primeiro elemento do seu CSS ("apoiado") não tem definido o tipo de seletor (id "#" ou class ".")
Acho que a #peq2 teria um clear: right; Thelon.
Para que? ø_Ø Não entendi...
Não precisava do position.
#geral{
width: 800px;
height: 600px;
}
#grande{
width: 600px;
height: 600px;
background: red;
float: left;
}
#peq1{
width: 200px;
height: 300px;
background: blue;
float:right;
}
#peq2{
width: 200px;
height: 300px;
background: green;
float:right;
}
[http://forum.imasters.com.br/public/style_emoticons/](http://forum.imasters.com.br/public/style_emoticons/)default/thumbsup.gifThiago, faça uma página com esse código, e então vai entender o clear. :)
Sem o clear a div #grande iria flutuar à esquerda, maaas abaixo da div #peq2, por isso devemos limpar o float à direita. (to meio confuso, confesso, mas é isso ou quase isso).
Não resisti e botei o código em prática:
Isso acontece qnd a div do conteudo principal é menor que o tamanho da primeira div lateral.
Na verdade, a melhor solução pra isso é fazer uma div com um nome genérico, como sidebar :D , que englobe essas divs segundárias como peq1 e peq2.
Sim, mas nesse caso, pela explicação dele a div#grande, ou "1", como consta no desenho, vai ser maior que os quadrados.
Esse desenho foi representativo. E acontece muito isso que eu citei (experiência própria).
UPDATE:
Li a explicação dele, e parece que realmente a altura do 1 vai ser igual a soma das alturas de 2 e 3. Mas pelomenos valeu minha dica, não? http://forum.imasters.com.br/public/style_emoticons/default/cry.gif
Valeu sim. ;) Para quem não sabia, agora sabe. :D
>
Esse desenho foi representativo. E acontece muito isso que eu citei (experiência própria).
UPDATE:
Li a explicação dele, e parece que realmente a altura do 1 vai ser igual a soma das alturas de 2 e 3. Mas pelomenos valeu minha dica, não? http://forum.imasters.com.br/public/style_emoticons/default/cry.gif
Pode ter certeza que valeu sim :P
É que eu fiz igual no desenho dele então nem passou na minha cabeça essa possibilidade
>
Acho que a #peq2 teria um clear: right; Thelon.
MarVinOlivieraS, o primeiro elemento do seu CSS ("apoiado") não tem definido o tipo de seletor (id "#" ou class ".")
Na realidade foi um erro na hora de copiar mais ele (#) existe
O problema foi resolvido?
Infelismente não, aqui no meu trabalho onde o FFox é desatualizado até que aparece + ou - como tinha que se mais no IE lá em casas aparece todo desconfigurado. observe ai www.marvin7.com tá na sidebar. vleuuu
Não achei nenhum erro aqui.
O código está meio sujo, está usando tabelas onde não precisava.
http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif
eu estou utilizando só uma tabela para o layout pois não manjo muito de css, estou tentando utilizar uma tabela para organizar pois essas div tão dando muito trabalho. Obs.: observe na sidebar um local que tem "eu gosto", são dois locais um estou tentando usar tabela e outro estou tentando usar as div.
Pode postar a imagem do erro e como queria que ficasse? Não estou conseguindo identificar. ;)
O problema é esse ele aparece no ie:
/applications/core/interface/imageproxy/imageproxy.php?img=http://users3.jabry.com/marvin7/errocss.gif&key=96dd0501369acfb33dbcbafd37db7f65ecc33cbb2bdd54f5212c863cf801d113" alt="Imagem Postada" />
acho que vou desistir, tive testando vou fazer com table mesmo. vleuuu
De cara vi que você está usando a mesma ID (apoiado) em vários elementos diferentes. (seu código tá muito sujo, e tá difícil visualizar as coisas)
Aqui está normal, mas como disse o Guilherme, seu código está bem poluído.
http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif
mais o que eu poderia fazer para "limpar" meu código???
obs.:detalhe o que está no ar é em tabela agora
Não há uma fórmula de como limpar o seu código.
O que tem que se fazer é analisar e ver se aquilo é cabível ali. Eu faço o HTML primeiro, analiso e depois o CSS.
http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif
Bem quebrando a cabeça resolvi, aparentemente, é que aqui onde estou o firefox tá desatualizado então não sei se deu certo em outros navegadores, mais eu fiz assim:
o style:
apoiado {
background-color:#009900
as divs:
se alguém vir um problema nesse código me ajude.