desenvolvimento para web - xhtml, css, padrões da web, usabilidade, acessibilidade, web design, SEO, blogs e tecnologias para desenvolver a web El desarrollo de web - xhtml, css, estándares web, usabilidad, accesibilidad, diseño web, SEO, los blogs y la tecnología para desarrollar la web

Folhas de estilo vieram para facilitar a vida de desenvolvedores web , quanto a isso não há dúvidas. Hojas de estilo vino a facilitar la vida de los desarrolladores web, en que no hay duda. Dúvidas, mesmo, são em relação a algumas técnicas CSS para alcançar determinados posicionamentos e resultados como, por exemplo, como deixar um site sempre no centro usando as folhas de estilo. Preguntas, incluso, están en relación con algunas técnicas de CSS para lograr ciertas posiciones y resultados, como la manera de salir de un sitio donde el centro utilizando las hojas de estilo. Pode parecer que é algo complicado de fazer e/ou que se trata de uma técnica CSS mais complexa; para a felicidade de quem mexe com CSS, tanto novatos quanto veteranos, colocar um site sempre no meio com as folhas de estilo em cascata é simples de ser feito. Puede parecer que es algo complicado de hacer y / o que se trata de una técnica más compleja CSS, para la felicidad de los que con cejará CSS, tanto principiantes como veteranos, poner siempre un sitio en el centro con la hojas de estilo en cascada es simple por hacer.

Tão simples que, na verdade, existem diversas maneiras de se centralizar um site em qualquer resolução de tela usando CSS. Así de fácil que, efectivamente, hay varias formas de centralizar un sitio en cualquier resolución de pantalla usando CSS. São técnicas variadas, que, quando aplicadas, produzem o mesmo efeito esperado - de centralizar uma página web ou site completo. Las técnicas son variadas, que, cuando se aplique, producir el mismo efecto esperado - para centralizar o una página web sitio completo. Como todas as técnicas servem para a mesma coisa, fica “a gosto do freguês” escolher qual utilizar. Al igual que todas las técnicas utilizadas para la misma cosa, es "el gusto del cliente las hojas" que solía elegir.

Centralizar site com CSS: posicionamento relativo e margens automáticas Centro de sitio con CSS: relative y posicionamiento automático de márgenes

Esta é uma das mais simples técnicas para alcançar o efeito de o site ficar sempre no centro, independentemente da resolução de tela do visitante. Esta es una de las técnicas más sencillas para lograr el efecto de este sitio siempre estará en el centro, independientemente de la resolución de la pantalla para el visitante.

Basicamente, deve haver uma div principal, que “englobará” o restante das divs do site . Básicamente, debe haber un gran partido, que "cubrir" el resto del sitio divs. Geralmente os desenvolvedores costumam denominá-la “wrap”, “principal”, “site”, “all” ou algum outro nome que designe que esta é a div “externa” do site; a “casca” que está sempre ao centro. En general, los desarrolladores tienden ellas denominá "recapitulación": "principal", "sitio web" "todo" o nombrar a algún otro nombre, este es el div "externa" del sitio, la "coraza" que siempre está al centro. Como as outras divs ficam como sendo descendentes, a “mágica” acontece. ¿Cómo son las otras divs como descendientes, la "magia" que sucede.

 #wrap { width : 750px ; /* largura fictícia */ margin : 0 auto ; } # Wrap (ancho: 750px; / * * anchura ficticios / margin: 0 auto;) 

Para quem não sabe, a declaração de margin indica que as margens superior e inferior serão “0″ e as margens esquerda e direita serão calculadas automaticamente; ou seja, o site fica centralizado! Para aquellos que no saben, la declaración de margen indica que la parte superior e inferior márgenes será "0" y la izquierda ya la derecha los márgenes se calculan automáticamente, es decir, el sitio se centra!

Centralizar site com CSS: posicionamento absoluto e margem esquerda negativa Centro de sitio con CSS: la posición absoluta y la izquierda negativa

Também é possível centralizar todo um site através de posicionamento absoluto. También es posible centralizar la totalidad de un sitio a través de posicionamiento absoluto. Para tanto, vamos utilizar a mesma div “wrap” como exemplo. Para ello, utilizaremos la misma división "recapitulación" como un ejemplo.

 #wrap { left : 50 % ; margin-left : -375px ; /* metade da largura fictícia */ position : absolute ; width : 750px ; } # Wrap (a la izquierda: 50%; margin-left: 375px; / * la mitad de la anchura ficticia * / position: absolute; width: 750px;) 

Quando alguma div tem posicionamento absoluto, ela se baseia em seu elemento pai para se posicionar. Cuando haya una división absoluta de posicionamiento, se basa en su elemento en la posición propia. No caso, como ela não tem elemento pai, então vai se basear na página, em si - body . Si, ya que no tiene ningún elemento, a continuación, vai se basa en la página, de por sí - el cuerpo. Então, para conseguir o efeito de centralização, jogamos uma margem esquerda de 50%, para que vá para o meio. Así que, para lograr el efecto de centralización, desempeñan un margen izquierdo de 50%, para ir al centro. Mas é o limite da esquerda da div “wrap” que foi jogada 50% neste sentido; então, para que o centro da página é que fique no meio, aplica-se uma margem negativa da metade do valor total da largura. Pero la izquierda es el límite de div "wrap" que fue del 50% se mueven en esta dirección, por lo que el centro de la página es que está en el centro, se aplica un margen negativo de la mitad de la anchura total.

Qual das duas técnicas de centralizar o site é melhor? ¿Cuál de las dos técnicas para centralizar el sitio es mejor?

Como disse, qualquer uma das técnicas CSS para centralizar um site pode ser usado; ambas produzem efeitos semelhantes. Como ya he dicho, ninguna de las técnicas de CSS para centralizar un sitio puede ser usado, tanto producen efectos similares. A diferença principal é que uma atribui um posicionamento relativo à div principal ea outra um posicionamento absoluto . La principal diferencia es que uno da una posición sobre los principales div posición absoluta y la otra. Isso, levando-se em consideração as divs filhas, tem um grande impacto na composição do layout , como um todo. Esto, teniendo en cuenta los divs hijas, tiene un impacto importante sobre la composición de la estructura en su conjunto.

Mas isso é assunto para um outro artigo… ;-) Pero este es un tema para otro artículo… ;-)