¿Qué significa nbsp 151 en html? Cómo agregar un espacio sin separación al código HTML de una página. Espacio sin separación y guión suave en ejemplos

Esta breve lección sobre CSS dedicado a aquellos que quieren dominar diseño de bloque. Hoy veremos una cuestión como la creación de 2 columnas. misma altura utilizando bloques en lugar de tablas.

Esta habilidad se aplica en casi todas partes, incluso cuando se diseña un diseño estándar de 2 columnas, encontrará este problema si lo hace en bloques. Esta lección también tiene como objetivo desarrollar una comprensión de los principios del diseño de bloques en sí.

Mira la imagen de abajo. Usando tablas, este resultado se logra automáticamente.

Pero con los bloques todo es diferente. Mire las 2 columnas dispuestas en bloques.

¿Por qué sucede esto?

La respuesta es sencilla. El caso es que una tabla es un elemento holístico en el que cada celda depende de la otra, por eso continúa más allá. ¡Un bloque es un elemento separado e independiente y nunca se comportará como una mesa!

Así conseguiremos con ayuda de bloques el mismo resultado que conseguimos con tablas, utilizando pequeños trucos.

Hay muchos de ellos, pero hoy te daré el truco más sencillo y comprensible para un principiante. Simplemente colocaremos ambos bloques en otro bloque que los combinará, y le daremos a este bloque el fondo que necesitamos. Porque bloque común continuará hasta el final del bloque más grande, extendiéndose su fondo hacia abajo.

Veamos cómo se ve en el diagrama.

Ahora vayamos directamente al código.

Ahora averigüemos qué es qué.

A continuación, creemos una imagen de fondo. El ancho de nuestro bloque principal será igual a 700 píxeles. Por lo tanto el ancho imagen de fondo será igual a 700px. Puede establecer cualquier altura dependiendo de cuál sea su fondo.

Creé una imagen como esta y la llamé texturizadogif

Ahora veamos qué pasó en CSS.

#main (ancho:700px; margen:0 automático; imagen-de-fondo:url(textured.gif); repetición-de-fondo:repetir-y; )
#uno (ancho: 400 px; flotante: izquierda;)
#dos (ancho: 300 px;)

Ahora si miramos el resultado, veremos lo siguiente:

En conclusión esta lección, para una mejor comprensión, daré un ejemplo con una imagen de fondo modificada.

Creé esta imagen de fondo y la llamé texturizado1.gif

Naturalmente, cambié una de las propiedades del CSS en consecuencia.

#main (ancho: 700 px; margen: 0 automático ; imagen de fondo:url(texturado1.gif); repetición de fondo: repetición-y; )

Esto es lo que pasó:

PD de Máxima: este efecto No me funciona en Firefox.

Las columnas obtenidas utilizando las celdas de la tabla tienen la misma altura. Esto no es sorprendente, ya que las celdas están interconectadas y cuando la altura de una celda aumenta, la altura de las celdas adyacentes aumenta en consecuencia. Muchos desarrolladores intentan crear un efecto similar usando capas, es decir. hazlos interconectados y de la misma altura, independientemente del volumen de contenido. De hecho, al diseñar en capas, la altura de las columnas se establece automáticamente en función del volumen del contenido. Por tanto, las técnicas artificiales para crear columnas de la misma altura contradicen la ideología misma de las capas.

Así, se puede observar una clara división de enfoques del diseño:

• si se utilizan capas, entonces las columnas deben tener una altura determinada por su contenido;
• Se construyen columnas de la misma altura mediante una mesa.

Ignorar estos principios conduce a la complejidad del código y a la aparición de errores en la visualización del documento por parte de los navegadores, como resultado, aumenta el tiempo para desarrollar el sitio y su depuración. Una excepción puede ser el uso propiedades de altura, que establece la altura de las capas. El ejemplo 5.32 muestra cómo crear dicho diseño.

Ejemplo 5.32. Usando altura

Resultado este ejemplo mostrado en la Fig. 5.23.

Arroz. 5.23. Columnas de la misma altura.

Está claro que el volumen del texto en las columnas puede variar, por lo que la altura suele especificarse con un margen. También puedes agregar propiedad de desbordamiento con el valor auto . Si el texto excede la altura especificada, aparecerá una barra de desplazamiento.

También existen métodos basados ​​en el engaño visual. Las columnas aparecen iguales usando bordes como columnas, agregando imagen de fondo o color de fondo. En realidad, su altura, como debería ser, está determinada por el contenido.

Bordes como columnas

La esencia del método es la siguiente: establecemos un borde a la izquierda o derecha del elemento, cuyo ancho coincide con el ancho de una de las columnas. Está claro que los límites están destinados a propósitos completamente diferentes, pero en en este caso Usarlos de esta manera le permite obtener el resultado deseado. Para hacer esto, cree una capa llamada diseño y establezca el estilo para ella, como se muestra a continuación.

Diseño (borde izquierdo: 200 px sólido #c7e3e4; /* Ancho del borde y color de la columna izquierda */ fondo: #e0d2c7; /* Color de fondo de la columna derecha */ )

Como solo tenemos una capa, las columnas simuladas usando ancho línea vertical y el fondo siempre tienen la misma altura. Sólo queda colocar la información exactamente encima del borde. Para la columna de la izquierda, llamémosla col1, debes establecer el ancho y usar propiedad de estilo float para indicar que se trata de un elemento flotante. Dado que la frontera no es parte bloque de texto, entonces necesitas desplazar la capa col1 hacia la izquierda agregando la propiedad de margen izquierdo con valor negativo, igual al ancho del borde.

Col1 ( ancho: 200px; /* Ancho de la columna izquierda */ float: left; /* Convertirlo en un elemento flotante */ margin-left: -200px; /* Desplazar todo hacia la izquierda por el ancho del borde * / )

En este ejemplo, la combinación de las propiedades flotante y margen izquierdo permite colocar el contenido de la capa directamente encima del borde. Para la columna derecha col2 ninguno condiciones adicionales No es necesario especificarlo, el texto se colocará como requerimos.

Debido a que se utiliza un elemento flotante, puede suceder que el texto de la columna de la izquierda se extienda más allá del rectángulo coloreado. Para evitar que esto suceda, debes anular la propiedad float usando clear . En este caso, no puedes usar overflow: oculto; el espacio dentro del borde, incluida nuestra columna falsa, se cortará. El código final se muestra en el ejemplo 5.33.

Ejemplo 5.33. dos columnas

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

El resultado del ejemplo se muestra en la Fig. 5.24.

Arroz. 5.24. Dos columnas creadas con un borde.

Para crear un diseño de tres columnas, se debe agregar un borde a la izquierda y a la derecha del contenedor de diseño. Para variar, el ancho de la columna derecha se indica en em (el borde no se puede especificar como porcentaje).

Diseño ( border-left: 200px solid #c7e3e4; /* Ancho del borde y color de la columna izquierda */ border-right: 15em solid #ecd5de; /* Ancho del borde y color de la columna derecha */ background: #e0d2c7; / * Color de fondo de las columnas del medio */ )

Para la primera columna, el código de estilo permanece sin cambios, pero para la tercera columna debe especificar propiedad flotante con el valor derecho y muévalo hacia la derecha usando la propiedad margen derecho (Ejemplo 5.34).

Ejemplo 5.34. Tres columnas

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

Pomelo

El pomelo es el fruto de un árbol de hoja perenne subtropical del género de los cítricos.

El diámetro medio es de 10 a 15 cm, la piel es amarilla y la pulpa es roja. El sabor es amargo, al que contribuye la fina película que rodea cada rebanada. Si lo quitas, el amargor disminuirá mucho.

El resultado del ejemplo se muestra en la Fig. 5.25.

Arroz. 5.25. Tres columnas creadas con un borde.

El navegador IE6 tiene un error con los bordes y no muestra estos ejemplos correctamente. Para que muestre el diseño correctamente, el tamaño de sus bordes debe reducirse a la mitad.

Imagen de fondo

El principio de utilizar una imagen de fondo para las columnas se basa en el hecho de que vemos una imagen que se repite verticalmente, encima de la cual hay texto y otros elementos. Como necesitamos crear el efecto de las columnas, el fondo no se agrega a las columnas individualmente, sino a su elemento principal. Lo que importa aquí es qué tipo de fondo es, qué es y cuáles son sus dimensiones. Digamos que tenemos un diseño fijo de dos columnas de 980 píxeles de ancho y la columna izquierda de 200 píxeles de ancho. Cree una imagen de tamaño 980x60 píxeles. El ancho corresponde al ancho del diseño y la altura suele ser de 20 a 30 píxeles.

Muchos desarrolladores crean una imagen de 1 a 2 píxeles de alto, creyendo que el tamaño del archivo será mínimo y la carga será más rápida. Sin embargo, la verdad es todo lo contrario. La computadora tarda varias veces más en mostrar una página con un fondo estrecho, lo que se nota especialmente al desplazarse por la ventana del navegador. Por lo tanto, cuando utilice una imagen de fondo, haga que la imagen tenga al menos 20-30 píxeles de alto; esto la mostrará en la página más rápido.

Es demasiado aburrido hacer que las columnas sean monocromáticas, ya que estamos tratando con imágenes, así que agreguemos algunos delimitadores a los lados de las columnas (Fig. 5.26). Lo más importante aquí es que el patrón se repita sin juntas verticales. Arroz. 5.26.

Imagen de fondo

Ahora insertamos un fondo para la capa de diseño, dentro del cual se encuentran nuestras columnas (ejemplo 5.35).

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

El resultado de este ejemplo se muestra en la Fig. 5.27. Se ve claramente que las columnas tienen la misma altura.

Arroz. 5.27. Columnas de igual altura creadas por una imagen de fondo.

Al utilizar elementos decorativos en un dibujo, se debe tener cuidado de que el texto de ellos se aleje mediante el relleno y no se "pegue".

Para tres o más columnas en diseño fijo el proceso de preparación de una imagen es similar, pero para un diseño de goma hay una serie de características debido al hecho de que el ancho del diseño puede estar dentro amplia gama. Luego, la imagen de fondo debe ampliarse deliberadamente, por ejemplo, 2000 píxeles. El fondo no afecta el ancho de la página web y si no cabe en las dimensiones asignadas, se corta. Aprovecharemos esta cualidad. Como ejemplo, considere un diseño fluido con una columna derecha fija y un ancho de 300 píxeles. Para ello, haremos una imagen de 2000x30 píxeles de ancho con un rectángulo rojo oscuro a la derecha (Fig. 5.28).

Arroz. 5.28. Fondo para maqueta de goma

La columna fija se encuentra a la derecha, por lo que el fondo también debe establecerse a la derecha esquina superior, especificando 100% 0 para la propiedad de fondo (Ejemplo 5.36).

Ejemplo 5.36. Fondo para maqueta de goma

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

Finalmente, enumeraré los pros y los contras de utilizar fondos como columnas artificiales.

Ventajas

• El método es simple y no requiere cambiar el código existente.
• Puede agregar varios elementos decorativos al dibujo, como degradados, líneas, etc. Esto diversificará el diseño de las columnas.

Contras

• Los mejores resultados se obtienen cuando una o todas las columnas tienen tamaños fijos. Para un diseño donde el ancho de las columnas es elástico, no será posible agregar un fondo correctamente.
• Si desactiva las imágenes en su navegador, el texto puede volverse ilegible. Sin embargo, esto se puede evitar fácilmente configurando el color de fondo junto con la imagen de fondo.
• El archivo de imagen de fondo puede tener gran volumen y tarda mucho en cargar. Tenga en cuenta que para imagen sencilla, como el que se muestra en la Fig. 5.27, esto no es cierto; con dimensiones de 2000x30 píxeles, el archivo ocupa sólo 275 bytes.

Color de fondo

Al simular columnas de la misma altura usando una imagen de fondo, se agrega a través de la propiedad de fondo a elemento padre columnas ( capa capa). El color de fondo funciona de manera similar. Basta con configurarlo para la capa de capa y darle su propio color a la columna más alta. El ejemplo 5.37 muestra diseño de tres columnas, en el que el color de fondo de las columnas laterales se establece a través de la capa capa y el de la columna central a través de la capa col2.

Ejemplo 5.37. Usos color de fondo para altavoces

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

La propiedad de altura en el ejemplo se agregó para hacer visible el efecto de color en las columnas. En realidad no es necesario.

Este método tiene una serie de desventajas que conviene tener en cuenta en la práctica.

• Es difícil estimar de antemano qué columna tendrá la mayor altura.
• Para “colorear” las columnas, solo se utilizan dos colores, por lo que no se pueden establecer tres o más columnas. color diferente y para que tengan la misma altura.

El método también tiene ventajas, pero se pueden expresar en pocas palabras: la sencillez y elegancia de la solución. Por lo tanto, este método se puede encontrar con bastante frecuencia en el diseño, en particular, se utiliza en el sitio web del W3C.

Usaremos listas como marcado. en cada elemento li Colocaremos una fotografía del producto y su descripción. Fotos tomadas intencionalmente diferentes tamaños. Como regla general, al llenar un sitio, un administrador rara vez piensa en el hecho de que las imágenes deben optimizarse y las carga en el sitio tal como están. Nuestra tarea será centrar los dibujos y hacer que todos los bloques tengan la misma altura.

• 
• 
• 
• 
• 
  Texto clásico Lorem Ipsum, utilizado desde el siglo XVI, aparece a continuación.
• 
  Texto clásico de Lorem Ipsum.
• 
  A continuación se muestra el texto clásico de Lorem Ipsum utilizado desde el siglo XVI. Texto clásico de Lorem Ipsum.
• 
  El texto clásico de Lorem Ipsum utilizado desde el siglo XVI.

Agreguemos estilos de diseño. No me detendré en ellos en detalle; aquí, como dicen, cada uno es libre de aplicar lo que crea conveniente.

Select_main ( margen:40px auto 0; ancho:800px; ) ul ( ancho:100%; ) li ( margen:0 10px 20px 5px; relleno:10px; ancho:160px; display:inline-block; vertical-align:top; *display:en línea; *zoom:1; borde:1px sólido #e5e5e5; .img ( ancho:100%; alto:121px; text-align:center; display:table; posición:relativa; ) .img span ( display :table-cell; vertical-align:middle; ) .img img ( ancho: 100%; )

Ahora vayamos a la página y veamos qué tenemos. Si todo es más o menos decente con la foto, entonces con los bloques la imagen es desagradable. escribamos guión pequeño, lo que le permitirá solucionar fácilmente este problema.

$(documento).ready(función())( var maxH = 0; $("li").cada(función () ( var h_block = parseInt($(this).height()); if(h_block > maxH ) ( maxH = h_block; )); $("li").height(maxH));

Guardamos, recargamos la página y admiramos el trabajo realizado. Todos los bloques asumieron la misma altura.

Ahora un poco más de detalle sobre lo que escribimos aquí. Declarar una variable máxH y asignarle un valor 0 . A continuación, seleccione todos los elementos. li en el directorio y recorrerlos en un bucle usando la función cada. En el cuerpo del bucle declaramos otra variable. h_bloque en el que almacenamos el valor de altura de cada elemento li, redondeado a un número entero usando la función parseInt. Aún en el mismo ciclo, establecemos una condición: si el valor del bloque actual es mayor que el valor de la variable máxH, luego le asignamos este valor a este último. En otras palabras, verificamos la altura de cada bloque y almacenamos la altura más grande en una variable. máxH. Y finalmente, habiendo pasado por todo li y habiendo calculado la mayor altura, la asignamos a todos los bloques (línea $("li").altura(maxH);).

Sin embargo, este método tiene un inconveniente. Digamos que el administrador agregó demasiado texto a uno de los bloques. Aplicando el método descrito anteriormente, alinearemos todos los bloques al más alto y obtendremos mucho espacio libre desde abajo en el resto.

Es imposible corregir completamente esta situación (a menos que reduzca el volumen de texto en la sección problemática), pero es muy posible reducir la desventaja al mínimo.

Reescribamos el guión. Al igual que la primera vez, alineará los bloques con el más alto, pero será un poco más inteligente hacerlo. Le enseñaremos a contar cantidades. li en cada fila y alinéelos con el más alto de la fila en lugar del más alto de la página.

$(documento).ready(función())( var línea = $("li"); var veces = 0, filas = Array(), max = 0; line.each(función() ( if (veces == 4 ) ( para (var i = 0; i< rows.length; i++) { rows[i].css("height", max); } max = 0; times = 0; rows = ; } if (max < $(this).height()) { max = $(this).height(); } rows = $(this); times += 1; }); if (times != 0) { for (var i = 0; i < rows.length; i++) { rows[i].css("height", max); } } });

Eso es todo. El método a utilizar debe decidirse según la situación, pero en cualquier caso, el segundo método es más universal.