Fórum Margin no CSS #526678
23/07/2015
0
Um elemento com os margins em auto, centraliza, não entendi.
margin-left:auto;
margin-right:auto;
Gabriela Monte
Curtir tópico
+ 0Post mais votado
24/07/2015
Sim elementos com "margin-left:auto" e "margin-right:auto" ficam centralizados, vale ressaltar que dependendo da versão do browser isto não funciona.
É uma convenção dos criadores da especificação do CSS, poderia ser qualquer palavra, mas os criadores decidiram utilizar "auto".
Jothaz
Gostei + 1
Mais Posts
24/07/2015
Randrade
Funciona assim: CSS possui um mecanismo nativo que dimensiona o DIV com a largura especificada (no nosso caso 760px) e coloca margens esquerda e direita IGUAIS. Por exemplo: se a tela tem largura de 1024px, CSS calcula 1024px - 760px = 264px e coloca margens laterais de 264px / 2 = 132px CENTRANDO A PÁGINA. Isso é válido para qualquer que seja a resolução.
-- Maujor/
Resumindo: Ao setar a margin como auto, ele pega as margens e divide pelos elementos, ou seja. Se você colocar a margin-left: auto e a margin-right: auto, ele divide a tela em tamanhos iguais, neste caso centralizando. Agora, você pode utilizar isso dentro de outro elemento, com finalidade de abaixar, subir, ir para direita, esquerda. Você utiliza de acordo com suas necessidades.
Gostei + 1
24/07/2015
Gabriela Monte
Eu fiz um pequeno teste utilizar o "center" e não deu certo, não sei se por que o "center" não é destinado a essas "tags", mas para mim era o mais lógico de lembrar.
Se não funcionar, entendi a palavra de vocês.
Gostei + 0
24/07/2015
Randrade
Ele funciona normalmente, mas pode ser que o tamanho dele não seja a tela toda, assim, mudando apenas um pouco, e não indo ao centro.
E o center não funciona em todas as tags. Sem falar que agora com o HTML5, deixaram de "aceitar" (ainda funciona, mas não é recomendável) esse atributo.
O Jothaz deu uma excelente dica uma vez para olhar isso. Coloque borda, ou background nos elementos, assim você verá visualmente o tamanho deles e suas posições.
Dê uma olhada neste exemplo que eu fiz. Nele você verá a diferença do center para o margin: auto.
Gostei + 1
24/07/2015
Gabriela Monte
Gostei + 0
25/07/2015
Marcelo Pastore
[url]http://www.w3schools.com/cssref/pr_margin-left.asp[/url]
Gostei + 0
26/07/2015
Gabriela Monte
[url]http://www.w3schools.com/cssref/pr_margin-left.asp[/url]
Bem mais detalhado, obrigada.
Gostei + 0
26/07/2015
Gabriela Monte
Gostei + 0
27/07/2015
Jothaz
Isto depende do objetivo do site e do cenário.
Hoje temos uma grande quantidade de usuários que utilizam versões de browsers atualizados, mas existem os que não atualizam e algumas empresas (que por maiores que sejam) ainda usam o IE9 como o browser padrão. Para estas empresas é um requisito não funcional que a sua aplicação rode em qualquer versão dos browser.
Se você não se preocupar em perder alguns acessos e se não existe este requisito de rodar em qualquer versão você não precisa ser preocupar com isto.
Agora ser quer um site realmente universal é possível usar algumas formas para deixar suá página funcional independente da versão do browser. Pode-se usar Browserhacks, JavaScript ou CSS especifico para um determinado browser.
Depende do problema que você queira contornar.
Gostei + 0
27/07/2015
Gabriela Monte
Gostei + 0
27/07/2015
Jothaz
Como já disse algumas empresas definem como requisito não funcional que o projeto rode em qualquer versão de browsers, então não temos escapatória e devemos implemntar de uma foram que atenda aos requisitos.
Eu gosto de garantir que o meu site seja acessível a todos, então como já uma certa experiência sempre tento atender esta filosofia.
Agora depende do projetista do site e do objetivo. As vezes não se faz necessário invetir tempo e esforços nesta universalização do site.
Gostei + 0
27/07/2015
Gabriela Monte
Pois queria isso, mas para simples mesmo, estatico!
Gostei + 0
28/07/2015
Jothaz
Pois queria isso, mas para simples mesmo, estatico!
Acho importantíssimo esta preocupação de construir uma web voltada para acessibilidade e inclusão. É uma característica de quem pretende se profissionalizar.
Porém como você esta iniciando seu aprendizado aconselho a absorver conhecimentos básicos e posteriormente se preocupar com esta abordagem cross browser.
Senão pode ser frustrante e cansativo.
Dedique a conhecer o máximo de CSS, lay-out fluído, responsividade, mascaras de entrada e uso de jQuery, depois de avançar nesta seara, então dedique um tempo para estudar a questão de lay-outs cross browsers. Acho que será mais produtivo.
Gostei + 0
28/07/2015
Gabriela Monte
Gostei + 0
29/07/2015
Jothaz
Só acho que para quem esta começando é melhor começar do mais básico.
Estude e absorva os conceitos de .css, lay-out, manipulçaõ de controle, personalização de formulários e mascaras de entrada e construa algum site conceito e apresente para outras pessoal analisar.
Depois vá para jQuery, Bootstrap e responsividade.
Alguns links:
[url:descricao=Layout Fluido ou Líquido]http://www.designadaptavel.com.br/artigos/layout-fluido-ou-liquido[/url]
[url:descricao=Como criar um layout responsivo (adaptável) em HTML e CSS]http://www.todoespacoonline.com/post.php?id=2845[/url]
[url:descricao=Tudo sobre Layout Responsivo #02: Diferenças entre Layout Responsivo e Fluido]http://www.ferramentasblog.com/2012/05/tudo-sobre-layout-responsivo-02-diferencas-entre-layout-responsivo-e-fluido.html[/url]
Layout Fixo / Fluido de 3 colunas em 8 Minutos
Gostei + 0
29/07/2015
Gabriela Monte
Obrigada pelas dicas Jothaz, tenha uma ótima tarde!
Gostei + 0
Clique aqui para fazer login e interagir na Comunidade :)