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

Destructor.cs · 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

<html> 
   <head>
         <title>Prueba</title>
          <style>@import url("CSS/Estilo.css");</style>
    </head>
    <body bgcolor="#e9e9eb">
           <div id="container">
            </div>
     </body>
</html>

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

#container{
    position: relative;
    margin-right: auto;
    margin-left: auto;
    top: 50px;
    background-color: white;
    width: 800px;
    height: 700px;
}

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

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

Destructor.cs

Julio 22, 2013, 09:24:57 PM Ultima modificación: Mayo 10, 2014, 02:17:14 PM por Destructor.cs