Comunidad PHPeros
Lenguajes => CSS => Mensaje iniciado por: OmaarV en 09 de Septiembre de 2010, 08:19:06 am
-
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
(http://img710.imageshack.us/img710/4651/maquetav.jpg)
Bueno, primero empezaremos creando el contenedor principal con un #web-content
HTML:
<div id="web-container">Contenido</div>CSS:
#web-container{
width:960px;
margin:0 auto;
}
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:
<div id="web-container">
<div id="header">
Header
</div>
</div>
CSS:
#header{
width:960px;
height:120px;
}
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:
<div id="aside">
Aside
</div>
<div id="main-content">
Main Content
</div>
CSS:
#aside{
width:260px;
float:left;
}
#main-content{
width:700px;
float:left;
}
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.
<div id="web-container">
<div id="header">
Header
</div>
<div id="aside">
Aside
</div>
<div id="main-content">
Main Content
</div>
</div>
Y este nuestro CSS.
#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;
}
¡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:
#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;
}
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:
#web-container{
width:960px;
margin:0 auto;
border:1px solid #000;
padding:10px;
}
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.
#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*/
}
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:
<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>
CSS:
#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;}
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.
-
Buen tutorial, esto con la imaginación de cada uno, pueden salir webs más que decentes ;)
K+
-
Los bordes agregan pixeles solo en IE (que raro...), o al menos eso tengo entendido.
Muy buen tutorial ;)
-
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 ^^
-
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
-
Ese es omar ;), buen tuto, te mereces tu karma..
el pading biene ciendo como el espacio de relleno dentro de la etiqueta...
ah y eso del Clear both no lo sabia xD!! yo usaba <br/>
-
Buen tutorial, aunque ya lo sabía, cada vez que hago mis diseños en photoshop y lo pasó a CSS siempre verifico que este de acuerdo a los estándares de la W3C.
-
Ah... yo no los compruebo con W3C por que creo que lo he hecho bien.. pero el proximo diseño que codée lo probare aver que tal...
-
Buen tutorial, aunque ya lo sabía, cada vez que hago mis diseños en photoshop y lo pasó a CSS siempre verifico que este de acuerdo a los estándares de la W3C.
Si, imagino eres un disenador web experimentado por eso dejemosles este tutorial a Los mas novatos en la materia.
Ratrillox: siempre se aprende algo nuevo.
-
:o Muchas gracias me servirá para mis webs... ;)
K+
-
:o Muchas gracias me servirá para mis webs... ;)
K+
Gracias Edwin.
Si quieren saber algo que les interese haganme saber y yo hago un tutorial acerca de eso. ;D!
-
Ahora que lo reviso, el width:960px; del header sobra, no hace falta puesto que si no lo pones, ocupa el 100% de su espacio, que son los 960px del contenedor. Se puede ahorrar esa línea.
Y después en el apartado del padding dices que el contenedor de toda la estructura ya no sería 960px, sino 980px. Eso es incorrecto, como dices, el padding es espacio interior y el margin exteriror, por lo que dentro del contenedor nos quedarían 940px.
Saludos!
-
Ahora que lo reviso, el width:960px; del header sobra, no hace falta puesto que si no lo pones, ocupa el 100% de su espacio, que son los 960px del contenedor. Se puede ahorrar esa línea.
Y después en el apartado del padding dices que el contenedor de toda la estructura ya no sería 960px, sino 980px. Eso es incorrecto, como dices, el padding es espacio interior y el margin exteriror, por lo que dentro del contenedor nos quedarían 940px.
Saludos!
1.- El width del header lo puse para hacer un poco mas claro el tutorial, ya que muchos no les puede quedar claro este punto.
2.- Yo me refiero en ese punto a la estructura que estamos formando no a la del contenedor. El Padding nos agrega los pixeles al width.
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.
-
El padding se añade de puertas para adentro, lo que hace es quitar superficie, no darle. La que le da más superficie es el margin.
Lo del primer punto era una aclaración, ahora ya saben también que se puede omitir :P
-
mOrk prueba algo, a una div tu dale un valor al width de 20px y agregale un padding:500px; y dime si se agregan pixeles al width usemos un border para comprobar :P
-
mOrk prueba algo, a una div tu dale un valor al width de 20px y agregale un padding:500px; y dime si se agregan pixeles al width usemos un border para comprobar :P
Eso no seria 522px?
-
mOrk prueba algo, a una div tu dale un valor al width de 20px y agregale un padding:500px; y dime si se agregan pixeles al width usemos un border para comprobar :P
Se extiende para adaptarse, pero si el padding es menor que el ancho (que es como es) "come" espacio...
-
west se me ha adelantado xD
Pero es evidente que se expandirá... es como si metes 5000L en una presa que caben 20L, que se expandirá xD
-
Okay entonces si necesitas adaptar que eso entre en un espacio de 700px y lo expandimos 20px tendremos que reducir los 20px a los 680px por la expanción que tuvimos.
-
Si tienes 700px y le añades padding, se te quedará en 680px de tamaño total. Si añadesmargin el borde se expandriá hasta 720px, pero no el contenido
Saludos
-
Si tienes 700px y le añades padding, se te quedará en 680px de tamaño total. Si añadesmargin el borde se expandriá hasta 720px, pero no el contenido
Saludos
El borde siempre permanece a los 700px, pero el resto de elementos estarán a 20px de éste..
-
Yep, correcto xD
-
Siguen sin entender mi punto. Lo que necesitamos es que encaje en un espacio de 700px por eso pondremos los 680px cuando añadamos el padding de 10px. Es como si necesitamos que una solución entre en un recipiente de 10 litros y tenemos los 10 litros de agua y queremos agregar 2 litros de alcohol para ello tendremos que quitarle 2 litros de agua para que esten los 10 litros. Es lo que yo estoy intentando de explicar.
-
nadie se la pasaria haciendo una web con puros codigos (sin ver el pre-view claro...) es mejor utilizar un programa para ir aumentando los codigos y todo eso... pero es facil hacer lo que es el tutorial con frontpage.
Buen tuto
saludos
-
nadie se la pasaria haciendo una web con puros codigos
Que ignorancia
-
nadie se la pasaria haciendo una web con puros codigos (sin ver el pre-view claro...) es mejor utilizar un programa para ir aumentando los codigos y todo eso... pero es facil hacer lo que es el tutorial con frontpage.
Buen tuto
saludos
La mayoría de diseñadores ese es el método que utilizamos, para mi es mucho más fácil meter puro código, además muchos de esos programas no trabajan conjunto los estandares de la W3C.
-
nadie se la pasaria haciendo una web con puros codigos (sin ver el pre-view claro...) es mejor utilizar un programa para ir aumentando los codigos y todo eso... pero es facil hacer lo que es el tutorial con frontpage.
Buen tuto
saludos
Te has lucido amigo xD
-
nadie se la pasaria haciendo una web con puros codigos (sin ver el pre-view claro...) es mejor utilizar un programa para ir aumentando los codigos y todo eso... pero es facil hacer lo que es el tutorial con frontpage.
Buen tuto
saludos
El código simplemente es el css, las divs las puedes hacer manualmente con una herramienta que viene con macromedia dreamweaver, pero primero deverias saber trabajar con css para saber como se asignan las clases las id etc.
-
Lo más fácil y rápido sin duda es saber lo que tienes que hacer en cada momento y hacerlo de cabeza, sin tonterías del DW
-
Por ejemplo yo uso el dreamweaver pero todo lo hago yo el dreamweaver lo unico que me a***** es en autocompletar pero yo escribo todo y así te ahorraras errores y lo haras mas rapido.