Actualmente estoy aprendiendo HTML/CSS, y han notado una técnica común es colocar un div contenedor genérico en la raíz de la etiqueta del cuerpo:¿Por qué debería usar un contenedor div en HTML?
<html>
<head>
...
</head>
<body>
<div id="container">
...
</div>
</body>
</html>
¿Hay una razón válida para hacer esto? ¿Por qué el css no puede hacer referencia a la etiqueta del cuerpo?
Este método le permite tener más flexibilidad para diseñar todo su contenido. Efectivamente creando dos contenedores que puedes diseñar. La etiqueta HTML Body que sirve como fondo y la div con una id. De contenedor que contiene tu contenido.
Esto le permite posicionar su contenido dentro de la página, mientras diseña un fondo u otros efectos sin problemas. Piense en ello como un "Marco" para el contenido.
El contenedor div y algunas veces el contenido div se usan casi siempre para permitir un estilo de CSS más sofisticado. La etiqueta corporal es especial en algunos aspectos. Los navegadores no lo tratan como un div normal; su posición y dimensiones están ligadas a la ventana del navegador.
Pero un contenedor div es solo un div y puedes darle estilo con márgenes y bordes. Puede darle un ancho fijo, y puede centrarlo en margin-left: auto; margin-right: auto.
Además, el contenido, como un aviso de copyright por ejemplo, puede ir en el exterior del contenedor div, pero no puede ir en el exterior del cuerpo, lo que permite contenido en el exterior de un borde.
Las razones más comunes para mí son de modo que:
no es nada malo con anchos fijos, IMO. – nickf
solo adelantándose a los que odian ... – da5id
El contenedor necesita anchos fijos de "porcentaje" también. (esencialmente un ancho de fluido) – Armstrongest
Este es uno de los mayores malos hábitos perpetrados por los codificadores frontales.
Todas las respuestas sobre mí son incorrectas. El cuerpo toma ancho, márgenes, bordes, etc. y debe actuar como su contenedor inicial. El elemento html debe actuar como fondo "lienzo" como estaba previsto. En docenas de sitios que he hecho, solo tuve que usar un contenedor div una vez.
Estaría dispuesto a serlo, ya que estos mismos codificadores que usan divs de contenedor también ensucian su marcado con divs dentro de divs, en cualquier otro lado.
No lo hagas. Use divs con moderación y apunte a un margen de beneficio mínimo.
- = - = - ACTUALIZACIÓN - No estoy seguro de lo que está mal con SO porque puedo editar esta respuesta de hace 5 años pero no puedo responder a los comentarios ya que dice que necesito 50 Rep antes de poder hacerlo. En consecuencia, agregaré mi respuesta a las respuestas que recibió aquí. - = - = -
Acabo de encontrar esto, años después de mi respuesta, y veo que hay algunas respuestas de seguimiento. Y, seguramente tu bromeas? El sitio de marcador de posición instalado que encontraste para mi dominio, que nunca mencioné fue mi marcado o estilo, ni siquiera mencioné en mi publicación, era claramente una instalación básica de CMS sin una sola palabra de contenido (decía tanto sobre la página de inicio).Esa no era mi marca y estilo. Esa era la plantilla predeterminada de Silverstripe. Y no me atribuyo ningún mérito. Es, sin embargo, quizás uno de los dos únicos ejemplos que puedo pensar que necesitaría un contenedor div.
Ejemplo 1: plantilla genérica diseñada para acomodar incógnitas. En este caso, estaba viendo una plantilla de CMS predeterminada que tenía divs dentro de divs dentro de divs.
El horror.
Ejemplo 2: Un diseño de tres columnas para obtener el pie de página para aclarar adecuadamente (. Creo que este fue probablemente el escenario que tenía que necesita un div contenedor, difícil de recordar, porque eso fue hace años)
lo hice simplemente construí (ni siquiera terminé) un tema para mi dominio y comencé a cargar contenido. Para obtener este ejemplo fácilmente logrado de marcado semántico, haga clic en el enlace.
Francamente, estoy desconcertado que la gente piensa que realmente necesita un div contenedor y empezar con uno antes nunca ni siquiera intentar sólo un cuerpo. El cuerpo, como lo escuché explicado una vez por uno de los autores originales de la especificación CSS, fue pensado como el "contenedor inicial".
El marcado debe agregarse según sea necesario, no porque así sea como lo ha visto hacerlo.
¿Podemos ver uno de estos sitios? –
Estaba a punto de señalar su sitio web, pero eso usa un contenedor y divs anidados. – chrisbtoo
Sí, ese sitio tiene 'body> div # BgContainer> div # Container' que parece estar en contradicción, pero tal vez sea la única vez entre docenas. P.S. No renuncié, sinceramente tengo curiosidad por ver uno de estos sitios puramente semánticos que sigo escuchando. –
Determinados navegadores (<tos> Internet Explorer) no son compatibles con ciertas propiedades en el cuerpo, notablemente width y max-width.
IE ¿qué versión? – esp
Sé que esta es una vieja pregunta, pero me enfrenté a este problema al rediseñar un sitio web. Troy Dalmasso me hizo pensar. Él hace un buen punto. Entonces, comencé a ver si podía hacerlo funcionar sin un contenedor div.
Pude cuando establecí el ancho del cuerpo. En mi caso a 960px.
Este es el css i uso:
html {
text-align:center;
}
body {
margin: 0 auto;
width: 960px;
}
Esta bien centra los Inline-bloques que también tienen un ancho fijo.
Espero que esto sea útil para cualquier persona.
etiquetas div se utilizan para el estilo de la página web de manera que se vea visualmente atractivo para los usuarios o público de la página web. El uso de container-div en html hará que el sitio web se vea más profesional y atractivo y, por lo tanto, más personas querrán explorar su página.
Bueno,
El contenedor div es muy bueno tener, porque si desea que el sitio centrada, simplemente no puede hacerlo sólo con el cuerpo o html ... Pero se puede, con divs. ¿Por qué contenedor? Suele usarse, solo porque el código itselve debe ser limpio y legible. De modo que sea contenedor ... Contiene toda la página web, en caso de que quiera meterse con él alrededor :)
Buena suerte
La mayor parte del navegador están tomando tamaño de la página web por defecto. Por lo tanto, en algún momento la página no se mostrará en otro navegador. Entonces, al usar el usuario puede cambiar para un elemento HTML específico. Por ejemplo, el usuario puede agregar margen, tamaño, ancho, alto, etc. de una etiqueta HTML específica.
Me lo preguntaba el otro día. +1 –