Tecnología

Codigos y Tecnologias Idea guardada 3 veces
La valoración media de 2 personas es: Excelente

Visualización de páginas web configurando el código CSS


Siguiendo con las posibilidades que brinda el diseño de páginas web utilizando código CSS. Hoy nos dedicamos a distintos apartados relacionados con las dimensiones y la adaptación a diseños responsivos. Con ejemplos que nos permitan visualizar la forma en la que nuestras modificaciones al código modifican la visual de la página.



Comenzamos con dos parámetros que ya habíamos mencionado muy por encima. Pero que son claves para una página web que se adapte correctamente a la visualización en móviles o tablets. Esta visualización fluctuante, que cambia de acuerdo al dispositivo que usamos para navegar, se conoce como diseño responsivo y requiere configurar adecuadamente los máximos y mínimos de ancho y alto.

Ancho y dimensiones.

El ancho máximo se establece para no sobrepasar una dimensión establecida, mientras que el ancho mínimo nos muestra el elemento con ese ancho aún si el espacio no tuviera ese tamaño. De esta forma garantizamos una visualización cuando menos correcta. Sin importar el tipo de pantalla en la que vayamos a reproducir la navegación. Es importante mencionar que max-width tiene preferencia sobre width y min-width sobre max-width, así que en orden de prioridades el sistema primero buscará poder utilizar el ancho mínimo, posteriormente el ancho máximo y finalmente el ancho específico.

Te puede gustar leer: ¿Qué es el código CSS y para qué lo utilizan?

Lo mismo sucede con el parámetro de altura mínima y altura máxima. Incluso con el mismo orden de preferencias a la hora de mostrar un elemento en la página. El objeto primero buscará tener el alto mínimo, luego el alto máximo y finalmente el alto que hayamos configurado puntualmente.

Las dimensiones de los diferentes elementos que hay en la página se van ajustando automáticamente para que todo el contenido pueda ser mostrado. Gracias a los distintos atributos que fuimos mencionando podemos controlar las medidas que van a tener los objetos en pantalla, de manera que no inunden o molesten la correcta navegación. Sin embargo, hay momentos en los que el contenido se excede a los límites configurados. En dichos casos, y para que la caja contenedora no crezca, se utiliza un parámetro llamado Overflow.

Este parámetro es el que dictamina que se hace con el excedente de contenido. Podemos elegir el valor Hidden (Escondido) para ocultarlo; Scroll (Deslizar) para añadir barras de deslizamiento e ir viendo el contenido sobrante; o Auto, que incluye barras de deslizamiento únicamente si el contenido excedente lo amerita. Estos son distintos parámetros en código CSS que podemos ir modificando para una correcta visualización de nuestro página web.

.

Fuente: este post proviene de Codigos y Tecnologias, donde puedes consultar el contenido original.
¿Vulnera este post tus derechos? Pincha aquí.
¿Qué te ha parecido esta idea?

Esta idea proviene de:

Y estas son sus últimas ideas publicadas:

Recomendamos

Relacionado

Código CSS Cascading Style Sheets CSS ...

¿Qué es el código CSS y para qué lo utilizan?

En el mundo del desarrollo web existen algunos términos que se repiten constantemente. Quizás algunos ya los conozcas, pero no termines de saber a qué hacen referencia realmente. Por eso, hoy empezamos una serie de posts acerca de las bases del desarrollo de páginas web y terminología relacionada. Lo primero que aprenderemos es acerca del CSS, qué es y para qué sirve. ¿Qué es el código CSS y para ...

rendimiento

Mejora el rendimiento de tu web optimizando sus hojas de estilo css

Optimizar las hojas de estilo mejora considerablemente el rendimiento del dibujado de una página web. Las hojas de estilo de tu sitio web o blog son las encargadas de darle presentación a los componentes que sirven para formar tu página web. El cuidado y optimización de las mismas suele ser pasado por alto con frecuencia, normalmente nos basta con que "funcione la presentación" pero no n ...

Diseño de páginas web Consejos diseño web CSS ...

3 pautas de diseño profesional y CSS para tu web

Una página web bien hecha, puede ser una fuente de ingresos útil cuando quieres independizarte, pero es importante que sepas que el diseño responsive y funcional, es el pilar sobre el que debe girar todo. Hoy, por ejemplo, tenemos las 3 pautas más importantes de diseño web profesional, con las que tu blog dejará de ser un simple sitio a un lugar donde los visitantes encuentren lo que haces de mane ...

Código CSS Código web Diseño web ...

Editar dimensiones de objetos con código CSS

Trabajar en la edición de sitios web utilizando el código CSS puede resultar un tanto complejo, pero es una forma muy recomendable para un control total sobre cada parámetro y elemento de nuestra web. Al codificar Estilos en cascada, darle diferentes tamaños a cada objeto mediante CSS puede resultar un tanto confuso. Te contamos paso a paso cómo modificar los elementos para crear la web según tus ...

general cms diseño web ...

Modifica la tipografía de tú web o blog con CSS

En nuestra web o blog la tipografia es importante ya que añade personalidad al sitio. No siempre nos gusta la tipografía predefinida o no va con el tema de nuestra web/blog, por lo que nos vemos en la necesidad de modificarla. Lo normal para mantener una cierta coherencia es no usar mas de dos fuentes, para que no parezca que nos hemos salido del sitio y hay que tener en cuenta que las fuentes de ...

general curso blogger desde cero

Conoce el CSS de tu blog.

Si estás siguiendo de cerca el curso "Blogger desde cero", sabrás que la promesa de publicación para este sábado era profundizar en un tema referente al mundo del diseño de blogs. Ofrecerte una información útil de aproximación a los códigos inverosímiles que observamos -entre el estupor y el pánico- cuando nos proponemos modificar la plantilla de nuestro blog. Con este fin, tengo el abs ...

rendimiento

Mejora el rendimiento de tu web optimizando sus imágenes

Optimizar las imágenes, en términos de rendimiento web consiste en hacer que, sin perder su calidad, ocupen menos espacio en KB para que su descarga desde el servidor al navegador del cliente sea lo más rápida posible. Analizaremos varias formas de optimización de imágenes. En Diarios de la nube vamos a ir ayudándote a resolver distintos puntos importante para mejorar el rendimiento de tu sitio we ...

Diseño de páginas web Bases de programación Código fuente

Código fuente, la base del diseño de tu página web

Crear una página web desde cero implica tener conocimiento de diferentes aspectos y programas que hacen a una página de Internet. La estructura de una página por dentro no siempre es tomada en cuenta por diseñadores novatos, por ese motivo hoy te contamos cuáles son los elementos básicos que debes tener en cuenta para poder diseñar correctamente tu propia web. La construcción de una página web est ...

Diseño Web Crear web Diseño web ...

Diseño de páginas web con Google Sites, primeros pasos

Crear una web utilizando Google Sites es una excelente solución para aquellos usuarios que no tienen tiempo, o dedicación, para aprender los elementos básicos de programación en HTML y otros códigos. La propuesta del gigante de la informática está basada en la utilización de plantillas y nos permite, en pocos pasos, construir una web mediante el uso de plantillas y otras características y herramie ...

general diseño de blogs

Como poner un fondo tras el menú de páginas

Hace poco alguien me escribió para preguntarme cómo en el blog prediseñado número ocho puedo hacer que tras la barrita de pestañas, se vea ese efecto como de lazo o cinta: La idea la saqué del blog de Lauren Conrad, que tiene una barrita con efecto cinta en la parte superior: Es muy cómodo además porque nos permite ponerlo de fondo, y así poder luego añadir o quitar páginas o pestañas como haríamo ...