Boxes (Divs)

[DackAle 0]

E ae galeraAlgumas pessoas já virem eu pedindo ajuda aqui... rsEstou estudando tableless e etc, os css peguei bem e etc, mas na pratica, no final, os boxes (divs) ficam ruins os tamanhos, cheguei a conclusão depois que li alguns artigos, que deve ser por causa do IE NÃO somar os valores da padding e border poe xemplo e o FF sim, ou seja ficam tamanho diferentes, por isso em um fica bom e em outro ruim...Então gostaria de pedir ajuda de vocês, sobre artigos explicando melhor e como resolver isso, acredito que seja o tal de "hacks", que resolveria tamanho das boxes independente do navegador...Quem puder me ajudar, fico extremamente grato.Abraços

[Giovani 104]

Fala DackAle, tudo bem?

 

Cara...seguinte, sobre hacks eu nunca vi um artigo assim específico.....a gente vai achando coisas ai no google....enfim, pesquisando na net.

 

Sobre os tamanhos das divs se alterarem no IE.....é aquele negócio, vai fazendo e testando [Firefox, IE, Opera].....fazendo e testando.

 

Não se se lhe interessa, mas de uma lida nesse link.

 

[]'s

[Maujor 144]

Trata-se do "Box Model Hack".

 

Resumindo:

Os navegadores standards somam as espessuras de paddings e borders às dimensões declaradas para o box.

Os Internet Explorer - versões anteriores a versão 6 - colocam as espessuras citadas dentro das dimensões do box (não somam).

 

Considere por exemplo:

#minhadiv {
width:100px;
padding:0 10px;
border: 5px solid #f00;
}

Nos navegadores standards a DIV acima tem largura de: 100px + 10px + 10px + 5px + 5px = 130px.

Nos IE anteriores ao IE6 a DIV tem largura de 100px;

 

Existem zilhões de artigos falando sobre isto e outros tantos hacks para resolver.

Basicamente os 'hacks' consistem em declarar uma dimensão para o IE e outra para os navegadores standards.

Faça uma busca no Google por "Box Model Hack"

[Douglas d'Aquino 0]

Olá pessoal... hehehe primeiro post, sempre emocionante...

 

bem, uma dica que eu posso dar é: evite o uso de paddings no div, assim você minimiza essa diferença entre um browser e outro. Mas é impossível zerar essa diferença sem o uso dos famosos hacks.... minha recomendação quanto aos hacks é: não utilize.... novos browsers são lançados ao longo dos anos utilizando especificações da W3C como referência para renderização das páginas...

 

o que é um hack que funciona hoje pode estragar o seu site amanhã...

 

O invés de usar padding num div, deixe esse valor zerado e utilize o valor "margin" para os elementos dentro do div...

 

digamos por exemplo que você tenha o código

<div id="exemplo">	<p>Olá mundo</p></div>

em vez de fazer

#exemplo{ padding:5px; }

você pode fazer

#exemplo p{ margin:5px; }

isso evita que você tenha problemas com o box model, não fere as especificações de webstandards e nem a semântica de seu site.

 

Espero ter ajudado

 

abraço pessoal

[DackAle 0]

Olha, que animal, valeu galera pela ajuda :DAcho que agora vaia :Pamanhã vou ler com calma cada post, mas valeu MESMO pela ajudaabraços

[Douglas d'Aquino 0]

Depois avisa aí se conseguiu fazer direitinho.. qualquer coisa só falar que estamos aih pra dar uma força

[DackAle 0]

Fala galera

 

Recomecei a fazer um site, sem padding e usando só UM hack (que é fácil de mudar)

 

Bom está ficando certo, só um errozinho, quando tento alinhar duas caixas lado a lado (uma uso o float:left e a outra right), no IE aparece certo, mas no FF, essas dias ficam alinhadas lado a lado, mas FORA do quadrado principal...

 

No endereço http://www.infinitodigital.com.br/painel5/ dá para ver, o css está no código da página mesmo...

 

Alguem sabe o que fiz de errado ? http://forum.imasters.com.br/public/style_emoticons/default/blush.gif

 

Um dia eu chego lá juro hahahaaha :P

 

Abraços e valeu galera

[Douglas d'Aquino 0]

se vai aparecer um do lado do outro, ambos podem ter float:left ;)

 

mas eu já vi qual o problema... de ficar fora do quadro...

 

na última linha antes de fechar o div que possui essa borda, você insere

<br clear="all" />

deve ser o suficiente

[DackAle 0]

funcionou :DValeu, mas poderia explicar, o que exatamente fez esse "clear:all" e por que foi usado na tag br ?Só para entender :DValeu amigoAbraços

[Douglas d'Aquino 0]

claro, com certeza... o clear="all" limpa todas as flutuações presentes naquela marcação anteriores ao <br />como se ele disesse "até esta quebra de linha, os itens são flutuantes, depois não".basicamente ele limpa a formatação de forma que elementos flutuantes dentro de um outro elemento não "vazem" como acontecia antes.a tag <br /> foi usada porque ela tem o parâmetro clear e também porque ela é uma quebra de linha e se você pensar que está produzindo uma página vai lembrar que, no final de páginas, existem quebras ;)qualquer coisa é só perguntar que estamos aí

[DackAle 0]

Perfeito :D

 

Entendi agora, muito boa a explicação :P

 

Ai ai ai, mais umaaa dúvida... rs

 

Bom entendi, alinhei os boxes, agora fui colocar o texto, dentro do box do meio... e adivinhe, problemas :P

 

http://www.infinitodigital.com.br/Painel6/

 

Bom criei uma div, dentro da div conteudo, para alinhar com o margin, já que quero evitar usar o padding, bom coloquei um h1 e texto, limpei o h1 tirando o margin e o padding... coloquei 10px de margin na div "secao" (a div que guarda o h1 e o texto) e ele colocou esses 10px começando FORA da div conteudo (a div que guarda a div "secao") e empurrou a box para baixo tanto em cima quanto embaixo :s

 

Bizarro, acho que ainda vo apanhar até pegar os alinhamentos :( hahahahaa

 

Valeu galera pela paciencia, espero poder ajudar o pessoal depois quando eu aprender ahahaha

 

abraços

[Douglas d'Aquino 0]

bom, recomendo eliminar esse segundo div... ao invés disso coloque as margens direto nos elementos h1 e p

[Giovani 104]

Valeu galera pela paciencia, espero poder ajudar o pessoal depois quando eu aprender ahahaha

Não tem essa de paciência...quando precisar pode postar!! http://forum.imasters.com.br/public/style_emoticons/default/joia.gif

[DackAle 0]

Valeu mesmo gio :D

 

Bom, fiz o que o Douglas sugeriu, tirei a dIV e estou fazendo os alinhamentos por elementos individuais, tentei usar o margin nos elementos, mas zuava as distancias :s

 

Então usei o position:relative, top e left, ficou assim

 

http://www.infinitodigital.com.br/Painel6/

 

Ou seja o texto SAI do fundo do conteudo, há como resolver isso ? :s

 

Ai ai ai, preferia o filme do pelé :P

 

Valeu galera pela grande ajuda

 

abraços

[Douglas d'Aquino 0]

agora você coloca no final desse div (antes do fechamento) o seguinte

<br clear="all" />

isso deve funcionar...

[DackAle 0]

hmmm :D

 

Consegui dar uma garimpada, está saindo, quase na reta final :P

 

http://www.infinitodigital.com.br/Painel6/

 

O problema foi que eu lembrei que teria que ter 2 colunas, então tive que criar duas divs para colocar os conteudos de cada lado, até ok, coloquei os floats, mas ai o fundo da div conteudo sumiu

 

Usei o clear e ele aparece, no ff no ie só está um teco dele :P

 

Eu chego lá ainda... rssss

 

Já está caindo a ficha melhor agora \o/

 

Muito obrigado pela ajuda galera, acho que matando esse problema, vou entender bem melhor agora

 

abraços

[Giovani 104]

DackAle, você chegou a ler os artigos sobre posicionamento do Bruno?

 

Acho que algums dúvidas suas serão sanadas.... B)

[DackAle 0]

não tinha visto esse tópico :DVou ler, obrigado gio! abraços

[Giovani 104]

E ai DackAle, esses artigos são show de bola...vale muito a pena a leitura!!! http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif