Ir al contenido principal

Como Posicionar Divs en una hoja html Parte 1

Vamos a ver como podemos posicionar Divs en una pagina HTML usando una hoja de estilos css

Creamos una página básica:


como vemos en la parte link dentro de la estructura head le indicamos que tenemos una hoja de estilos llamada index_estilos.css

La página se llama index.html

Creamos dentro del body un contenedor div llamado principal que contendrá al resto del diseño. y cambiamos en la hoja de estilos ciertos estilos.

Ahora nos preocupamos de la hoja de estilos y creamos primero unos estilos de reseteo usando el asterisco para que no aparezcan datos por omisión.

Y luego estilos del div principal.



margin auto hace que se centre el div y le damos un tamaño así como un fondo naranja.

El resultado de ver la hoja es:

Un recuadro naranja centrado en el navegador y pegado a la parte superior.

Para que no pegue usaremos un margin top debajo de margin con unos 60px para que se separe de la barra del navegador.

Ahora creamos los demás contenedores que van a quedar dentro del principal. La idea es hacer un diseño como el siguiente.


como vemos hay tres divs dentro del principal que le hemos puesto colores.

comenzamos añadiendo el lateral rojo dentro del div principal



Ahora cambiamos el estilo para que se posicione en la parte derecha del div principal.

Nota: El color naranja no se ve. En el diseño es solo como ayuda para entenderlo.


Como vemos la orden float hace que el div vaya a la derecha y lo demás lo conocemos

Como vemos el div rojo queda en la parte derecha del div principal


Aquí acaba esta primera entrega.




Comentarios

Entradas populares de este blog

Chrome: desactivar la opción “Abrir siempre archivos de este tipo”

En Chrome, al descargar un archivo aparecen tres opciones en el desplegable de la barra de descargas:

Combinar Correspondencia con varias cuentas en Outlook

A veces necesitamos realizar un mailing (Combinar correspondencia) y disponemos de varias cuentas de correo en nuestro Outlook. Comprobamos que no funciona el elegir una de ellas como predeterminada ya que para el envío por correspondencia usa un servicio llamado MAPI que no usa la cuenta predeterminada.  Antiguamente en versiones como la 2010 de office simplemente con cambiar el fichero de datos predeterminado de la cuenta bastaba para ello. Actualmente (nosotros usamos 365, equivalente a la 2016) la solución pasa por crear un perfil de correo en el que configuremos la cuenta que usaremos para combinar correspondencia. Adjuntamos un video en el que se explica en Windows 10 como crear un perfil de correo de una cuenta. Una vez creado ese perfil de Correo pasaríamos a realizar la combinación de Correspondencia y en el último paso cuando  realizamos la combinación de correspondencia nos solicitará el perfil a usar para poder enviar los correos y en ese caso elegiríamos el perfil asociado

Conectar Teléfono BQ M5 a PC

Cual no seria mi sorpresa que al conectar mi teléfono BQ M5 a mi ordenador Windows no aparece la posibilidad de ver su contenido.