[Resolvido] CSS - Mudanças de posições com novos conteúdos

[Marcos Silveira 0]

Olá amigos,

 

Minha dúvida eu creio que seja bastante simples. Estou agora desenvolvendo um website com tableless/css, fiz o topo sem grandes problemas e estava desenvolvendo o conteúdo. Adicionei 2 imagens, um fundo do texto de boas-vindas, porém sem adicionar o texto, e um banner na direita.

 

Após pegar o texto, fui deixá-lo sobre a imagem, e eis que, ao adicionar o código o código do texto em uma class que criei para a div da imagem, antes do div do banner da direita, criou um grande espaço no banner da direita e teria que adaptar ele novamente.

 

Para melhor entendimento, segue uma print de como ficou:

 

Se precisarem que eu poste o html e o css do site, me informem.

 

Me envolvi pouco com css/tableless até hoje, e estava parado por um bom tempo, então se alguém ver alguns outros erros que não estejam ligados a questão do tópico, agradeço se puderem me informar.

 

Quanto a questão, existe algum atributo para que não ocorra tais problemas ao incluir uma nova div ou devo sempre ficar ajustando as posições?

 

Abraços e obrigado desde já!

[Evandro Oliveira 331]

Estude sobre box model, float vs position, margin e padding.

 

procure evitar ao máximo fazer posicionamentos baseados em position a menos que sejam camadas flutuantes que fujam do fluxo do documento.

 

O navegador renderiza a página de cima para baixo e da esquerda para a direita. Então, qualquer posicionamento que siga esta regra dispensa o uso de position. Se precisar aparecer uma camada flutuando, por cima do conteúdo, aí entra o position

[Marcos Silveira 0]

Evandro, muito obrigado pelas informações!

 

Vou ser sincero, quanto ao box model, não consegui compreender quando ele seria útil para mim, pois não vi divs no tutorial aqui da imasters (http://imasters.com.br/artigo/2767/css/box_model_modelo_de_caixas/). Ele será usado quando eu quiser criar algo como uma tabela simples? Entendi o seu funcionamento, como chegar até o resultado final, porém não consigo ver onde e quando aplicar.

 

Quanto ao position, realmente devo evitá-lo ao máximo, certo?

É utilizado apenas quando a camada deve acompanhar o site e quando eu quero deixar 2 camadas "juntas" (relative e absolut), uma se guiando com a outra, correto?

 

Sobre o float, pelo que entendi ele será o meu melhor amigo. É uma fonte segura esse tutorial: http://www.richardbarros.com.br/blog/css/css-truques-para-dominar-a-propriedade-float ? Pois vi destacarem bastante o "clear" junto ao float, e neste artigo, o autor adicionou essa observação apenas depois de um certo tempo.

Todavia, vou continuar pesquisando em outros locais.

 

Margin ee padding eu tenho uma noção, mas irei procurar novos tutoriais e pesquisar mais!

 

Abração e muito obrigado pela resposta.

[Evandro Oliveira 331]

Box model anda de mãos dadas com margin e padding.

 

Para resumir o conceito, posso dizer que margin é o espaçamento para fora, padding é o espaçamento para dentro do elemento, delimitados pela borda. Você deve ter visto algumas imagens, desenhando um quadrado (caixa -> box) e especificando quem é margin e quem é padding.

 

Compreendendo este conceito, você consegue posicionar os elementos filhos e pais (dentro e fora) dando um espaçamento que será tratado de forma uniforme em qualquer navegador, sem imprevistos.

 

Algo que pode gerar dúvidas é a forma de renderização dos elementos, se eles são blocos ou linha. Para complementar o domínio do box model, basta entender o que são elementos block e inline e como atuam no leiaute.

 

O float vem para suprir a necessidade de lateralização de elementos bloco. Entenda que elementos posicionados como relative ou fixed também se tornam flutuados, perdendo suas informações de altura, largura e posicionamento, daí a necessidade de defini-los.

 

Float serve para fazer um posicionamento mais fluído, enquanto position serve para fazer o posicionamento mais específico. Por este motivo acaba se tornando a dor de cabeça de muitos desenvolvedores quando vão testar o leiaute em várias resoluções.

 

As informações dispostas no link postado são confiáveis, ainda que dúbias em certos momentos. Clear não é considerado um hack, por exemplo.

[Marcos Silveira 0]

Evandro Oliveira, obrigado pelas informações! Irei estudar mais pelos assuntos e caso tenha algum dúvida volto a postar.

 

Abraços e obrigado!