Lenguajes > CSS
Maquetando con xHTML/CSS
OmaarV:
Bueno, ultimamente e visto que muchas personas tienen dudas sobre como maquetear un layout con CSS o me han preguntado directamente, bueno ahora les explicare un poco.
Lo que haremos sera exactamente la siguiente imagen pero estructurada con xHTML/CSS
Bueno, primero empezaremos creando el contenedor principal con un #web-content
HTML:
--- Código: ---<div id="web-container">Contenido</div>
--- Fin del código ---
CSS:
--- Código: ---#web-container{
width:960px;
margin:0 auto;
}
--- Fin del código ---
Demasiado sencillo, esto nos centrara el div y le dará nuestro ancho deseado, lo siguiente seria agregar un header, no tiene nada de ciencia ya que el header no tendra divisiones muy complicadas por ahora y al css solo le daremos el alto deseado.
HTML:
--- Código: ---<div id="web-container">
<div id="header">
Header
</div>
</div>
--- Fin del código ---
CSS:
--- Código: ---#header{
width:960px;
height:120px;
}
--- Fin del código ---
Lo siguiente seria hacer nuestro costado y contenido prinicipal, aquí es donde tenemos que tener cuidado a la hora de sacar nuestras matematicas, por ejemplo si queremos que nuestro costado mida 200px, entonces tendremos que tener (#web-content)-(aside) = (main-content) (Notese la patética expresión algebraica que se uso para este ejemplo) Por tanto tendremos 960-200=760 que sera la medida de nuestro contenido principal.
HTML:
--- Código: --- <div id="aside">
Aside
</div>
<div id="main-content">
Main Content
</div>
--- Fin del código ---
CSS:
--- Código: ---#aside{
width:260px;
float:left;
}
#main-content{
width:700px;
float:left;
}
--- Fin del código ---
Listo ahora tenemos la primera parte y agreguemos unos colores de borde para tener un ejemplo de como nuestro layout esta representado.
Este seria nuestro HTML terminado.
--- Código: ---<div id="web-container">
<div id="header">
Header
</div>
<div id="aside">
Aside
</div>
<div id="main-content">
Main Content
</div>
</div>
--- Fin del código ---
Y este nuestro CSS.
--- Código: ---#web-container{
width:960px;
margin:0 auto;
border:1px solid #000;
}
#header{
width:960px;
height:120px;
border:1px solid #900;
}
#aside{
width:260px;
float:left;
border:1px solid #6F3;
}
#main-content{
width:700px;
float:left;
border:1px solid #F60;
}
--- Fin del código ---
¡HEY ATENTO!
Recuerda que la suma de todo el ancho debe de ser 960px (Tamaño del div contenedor) y saquemos esta cuenta, 700+260=960 pero como tenemos un border esto nos agrega un 1px mas de cada lado por tanto 700+260+1+1+1+1=964 así que restemos 2px de cada uno.
CSS:
--- Código: ---#header{
width:958px;
height:120px;
border:1px solid #900;
}
#aside{
width:258px;
float:left;
border:1px solid #6F3;
}
#main-content{
width:698px;
float:left;
border:1px solid #F60;
}
--- Fin del código ---
Listo ya aprendimos un poco sobre como maquetar un layout
clear:both;
Seguramente has escuchado a alguien decirte agregale un clear:both; antes de cerrar la carpeta contenedora y servirá. Si no lo has escuchado, lo acabas de escuchar y aprenderte muy bien esto, te puede ahorrar muchos dolores de cabeza.
Esta función básicamente lo que hace es "estirar" la div contenedora hasta el final para mostrar las propiedades de esta, ya que si intentamos de otra forma, no lo hara. Así que usaremos clear:both; para estos casos.
Paddings.
Ahora bien, los paddings nos sirven para agregar un espacio entre el borde de cualquier contenedor entre el contenido (Esto se leyó *****o, lo se), por ejemplo si nosotros tenemos un div y le agregamos un padding de 20px el contenido se mostrara 20px mas hacia abajo, derecha, izquierda y arriba y si solo queremos agregar un padding a una parte usaremos padding-top, padding-left, padding-right, padding-bottom creo que ya deben de estar familiarizado con esto, así que agreguemos paddings a nuestro layout.
CSS:
--- Código: ---#web-container{
width:960px;
margin:0 auto;
border:1px solid #000;
padding:10px;
}
--- Fin del código ---
Nota: Si tenemos un ancho de 960px y un padding de 10px el padding se agregara a los dos costados también por ende sera un 20px en total y nuestro width total sera de 980px ahora.
Solo agregaremos padding a nuestro web-container por que nuestro aside y main-content usaremos margin para separarlos.
Margin.
Margin es básicamente igual que padding solo que en lugar de agregar hacia adentro lo agrega hacia afuera. ( Si tienes dudas con esto no dudes en preguntármelo).
Ahora para implementarlo en nuestro layout haremos un pequeño truco, solo le agregaremos el margin al header para que se separe de nuestro contenido y al main-content para que se separe del aside, claro de sus respectivos lados.
--- Código: ---#header{
width:958px;
height:120px;
border:1px solid #900;
margin-bottom:10px;
}
#main-content{
width:688px;/*width:698px; y si restamos los 10px del margin seran 688px;*/
float:left;
border:1px solid #F60;
margin-left:10px;/*Tendremos que restarle este 10px a width*/
}
--- Fin del código ---
Listo ya sabemos lo mas básico ahora te toca a ti ponerlo en practica pero echemos un ultimo vistazo a todo nuestro layout terminado.
HTML:
--- Código: ---<div id="web-container">
<div id="header">
Header
</div>
<div id="aside">
Aside
</div>
<div id="main-content">
Main Content
</div>
<div class="clear"></div>
</div>
--- Fin del código ---
CSS:
--- Código: ---#web-container{
width:960px;
margin:0 auto;
border:1px solid #000;
padding:10px;
}
#header{
width:958px;
height:120px;
border:1px solid #900;
margin-bottom:10px;
}
#aside{
width:258px;
float:left;
border:1px solid #6F3;
}
#main-content{
width:688px;/*width:698px; y si restamos los 10px del margin seran 688px;*/
float:left;
border:1px solid #F60;
margin-left:10px;/*Tendremos que restarle este 10px a width*/
}
.clear{clear:both;}
--- Fin del código ---
Bueno espero que les sirva aunque sea un poco, lo hice a las 00:17 de la madrugada así que cualquier anomalía favor de reportarla, próximamente les estaré explicando cosas un poco mas complicadas.
Saludos a todos.
mOrK:
Buen tutorial, esto con la imaginación de cada uno, pueden salir webs más que decentes ;)
K+
westwest:
Los bordes agregan pixeles solo en IE (que raro...), o al menos eso tengo entendido.
Muy buen tutorial ;)
Warlox:
Buen tuto, muy útil para los que quieren dejar de maquetear con las tediosas "tablas". Te dejo un Karma, y te fijo el post ;)
Saludos ^^
OmaarV:
mOrk sea es la idea que tengamos las bases para poder hacer lo que deseemos. West firefox tambien los agrega o eso supongo por que siempre que diseno lo hace xd. Kevin esa es la idea de dejemosos 90's arras y empezemos con dissents tableless. Disculpas por las faltas estoy en la escuela con el iPhone. Y gracias por sus buenos comentarios y karmas
Navegación
[#] Página Siguiente
Ir a la versión completa