comment
IRC Chat
play_arrow
Este sitio utiliza cookies propias y de terceros. Si continúa navegando consideramos que acepta el uso de cookies. OK Más Información.

[CSS][BASICO] Creando un container para nuestra pagina web

  • 0 Respuestas
  • 1226 Vistas

0 Usuarios y 1 Visitante están viendo este tema.

Desconectado Destructor.cs

  • *
  • Underc0der
  • Mensajes: 68
  • Actividad:
    0%
  • Reputación 0
    • Ver Perfil
« en: Julio 22, 2013, 09:24:57 pm »
Bueno amigos, ahora que tengo tiempo empezare a postear mas en la comunidad!
Para hoy les traigo algo basico pero que ayuda mucho a los que recien se inician

La mayoria de las paginas webs modernas (por no decir todas) estan centradas gracias a un container!

¿Que es un container?
Un container es un div, el cual contiene toda la pagina web, lo que caracteriza al container es que lo que hace es centrar la pagina web, ubicarse en el centro lo que ocaciona que al cambiar de resoluciones la web se mantenga en el centro con una medida fija

Primero que nada vamos a crear una web simple, con un fondo gris:
Código: HTML5
  1. <No tienes permisos para ver links. Registrate o Entra con tu cuenta>
  2.    <No tienes permisos para ver links. Registrate o Entra con tu cuenta>
  3.          <No tienes permisos para ver links. Registrate o Entra con tu cuenta>Prueba</No tienes permisos para ver links. Registrate o Entra con tu cuenta>
  4.           <No tienes permisos para ver links. Registrate o Entra con tu cuenta>@import url("CSS/Estilo.css");</No tienes permisos para ver links. Registrate o Entra con tu cuenta>
  5.     </No tienes permisos para ver links. Registrate o Entra con tu cuenta>
  6.     <No tienes permisos para ver links. Registrate o Entra con tu cuenta bgcolor="#e9e9eb">
  7.            <No tienes permisos para ver links. Registrate o Entra con tu cuenta id="container">
  8.             </No tienes permisos para ver links. Registrate o Entra con tu cuenta>
  9.      </No tienes permisos para ver links. Registrate o Entra con tu cuenta>
  10. </No tienes permisos para ver links. Registrate o Entra con tu cuenta>
  11.  
Lo que hacemos es simple, creamos una pagina HTML, con un fondo gris, una div con id container y llamamos a un archivo CSS el cual contendra el estilo
En el archivo Estilo.css que se encuentra en la carpeta CSS escribiremos el siguiente:
Código: CSS
  1. #container{
  2.     position: relative;
  3.     margin-right: auto;
  4.     margin-left: auto;
  5.     top: 50px;
  6.     background-color: white;
  7.     width: 800px;
  8.     height: 700px;
  9. }

En el archivo css lo que hacemos es simple, a la div container le agregamos algunos estilos. Las primeras tres lineas de codigo son las que hacen que la div se encuentre en el centro. Luego le agregamos un top para que tenga separacion con la parte superior, le damos un fondo blanco para distinguirlo y un width y un height (cada uno le asigna lo que quiera) que serian el ancho y la altura en px!

Podemos ver el resultado en la siguiente imagen:


y si achicamos el zoom:


Lamentablemente no se puede distinguir mucho el fondo en la pagina de underc0de, igual lo pueden hacer con cualquier editor de texto
Pueden probar colocando formularios dentro del container o lo que quieran
Espero que le sirva a toda la comunidad
Un saludo
« Última modificación: Mayo 10, 2014, 02:17:14 pm por Destructor.cs »

 

¿Te gustó el post? COMPARTILO!



[HTML][MEDIO] Crea un banner con luces LED para tus perfiles con Mint Profile

Iniciado por godmurdoc

Respuestas: 0
Vistas: 1307
Último mensaje Julio 04, 2011, 04:04:02 pm
por godmurdoc
[VIDEOTUTORIALES] Trilogía Prestashop - Todo para montar tu tienda online

Iniciado por graphixx

Respuestas: 0
Vistas: 1519
Último mensaje Octubre 08, 2016, 10:23:39 am
por graphixx
Como instalar el diccionario para corrección ortográfica en español en Notepad++

Iniciado por graphixx

Respuestas: 0
Vistas: 364
Último mensaje Julio 18, 2018, 04:25:23 am
por graphixx
ColorDrop, herramienta para cambiar el color de cualquier web en tiempo real

Iniciado por graphixx

Respuestas: 2
Vistas: 1432
Último mensaje Enero 07, 2016, 08:04:08 pm
por blackdrake
Video2Brain : GIT Control profesional de versiones para programadores [Español]

Iniciado por graphixx

Respuestas: 0
Vistas: 1524
Último mensaje Septiembre 08, 2015, 12:04:01 am
por graphixx