[Resolvido] Alinhamento de novo box.

[arthurcastro 0]

Esse é o site da minha rádio...

http://hfm.hd1.com.br/

(Para ver o código fonte Ctrl + U) :P

...

E embaixo do box "Entretenimento" situado no final do site, gostaria e adicionar um novo box (height="100" width="291"). Sendo que o box entretenimento tem height="300" width="291", iria remover 100 de height do box entretenimento e adicionar o novo box com height="100").

Mas quando faço o css o novo box não se alinha abaixo do box entretenimento ele arreda o box "a melhor da semana". e fica tudo torto...

 

Alguém pode me ajudar?

 

O css: http://hfm.hd1.com.br/css/cssdiv.css

[Rodrigo Zanotta 0]

não ta faltando o "clear" para finalizar o float:left ?

 

e ta bem legal o layout cara, parabens.

[angelorubin 142]

Bom dia,

 

Tenta assim:

 

Na folha de estilo (cssdiv.css) cria este novo estilo para sua nova box:

 

#boxnovo {
 width:291px;
 height:300px; 
 background-color:#FFFFFF;
 float:left;
 margin-left:0px;
 margin-top:8px;
 margin-bottom:8px;
 padding-top:5px;
 padding-left:5px;
}

 

E no seu documento HTML após a box(id="boxtwitter") insira a sua nova box:

 

<div id="boxnovo"> 
</div>

 

Qualquer duvida volte a postar.

 

Espero que ajude.

[arthurcastro 0]

Eu diminui o tamanho do box entretenimento pra 200 e gostaria de colocar abaixo o "box novo" com 100 de height = ao total de 300height.

Copiei o seu código...

Mas não funciona... continua a mesma coisa...

Ao invés de ficar embaixo do box entretenimento ele vai pro lado e arreda o box "amelhordasemana" e "box twitter"

Veja na imagem como eu gostaria que ficasse:

http://img692.imageshack.us/img692/9502/captura1uguy.jpg (o quadrado (meio torto hehe) é onde eu gostaria que o box ficasse)

 

Como está ficando com o erro:

http://img828.imageshack.us/img828/9018/captura2ge.jpg (ele nao fica embaixo do box entretenimento ele vai pro lado)

 

Seu código css:

#boxnovo {
 width:291px;
 height:80px; 
 background-color:#FFFFFF;
 float:left;
 margin-left:0px;
 margin-top:8px;
 margin-bottom:8px;
 padding-top:5px;
 padding-left:5px;
}

 

Onde coloquei o div id:

 

<div id="boxentretenimento">

<img src="imagens/entretenimento.png" style="border:none;" /><img width="286" height="130"src="imagens/entreter.jpg" style="border:none;" /> <b>Filme: Capitão América</b>

<br>

Ingressos para o cinema você ganha aqui!

</div>

 

<div id="boxnovo">

esse box aqui nao fica embaixo do box entretenimento.

</div>

 

Se estou errado em alguma coisa me desculpe.

E se estou, poderia me ajudar?

 

Rodrigo como é que funciona isso de "clear"? Poderia me dar um exemplo? Ou mesmo fazer um teste com meu site se não for pedir muito...

Obrigado.

Obrigado pelos elogios ao layout :).

[crf_h0m3r 5]

Arthur Castwin, o clear, pela tradução literal da palavra é limpar, transportando isso para estilização de páginas, o elemento clear vai limpar o float que você deu. Ele não vai permitir que outro elemento flutue além daquele que você setou o float. Dá uma olhada e vê se você entende melhor, aqui e aqui.

[arthurcastro 0]

Tentei fazer com o clear.

Mesmo assim não consigui.. Eu também não tenho muita experiencia com clear

Vocês ainda podem me ajudar? kkk :P

Obrigado

[arthurcastro 0]

Angelorubin o seu deu certo sim.

Muito orbigado coloquei: -93px; de margin top e o bloco subiu.

Muito Obrigado!!!

[Resolvido]