Mi hora:




Your Ad Here

Tutorial de CSS, Parte 1 “Que es el Padding, Margen, Border”

Categorías: Aprende lo Básico, HTML/CSS, Plantilla, Tutoriales

1 Comentario



Leer Este Link Antes de Navegar por el Blog: Tutorial
Mira el Post en tu plataforma: Estas en Blogger Estas en Betablogger Estas en Wordpress


Para que puedan seguir el orden de este tutorial que será bastante largo lo iré enumerando :D.
Todos cometemos muchos errores cuando modificamos el CSS de nuestra plantilla, incluso muchos diseñadores de plantillas hermosas, no entienden bien todas las cosas que se pueden hacer con css. La mayor parte de los errores se debe al cálculo erroneo de las dimensiones en las que irán las distintas secciones de la plantilla, como la sidebar y los post.
Uno de los cambios mas solicitados por todas las visitas, es agregar una nueva columna a sus plantillas, estos tutoriales serán la base para realizar esto en la forma correcta.

Para que vean lo delicado del asunto, seguramente mas de una vez les ha pasado que sus blogs se ven super bien en explorer, pero si lo abren en otro navegador como firefox, se ve pésimo, todo desordenado, la columna debajo de todo el blog y los margenes y todo esta corrido, esto no es porque firefox sea malo, de hecho es todo lo contrario, lamentablemente explorer, ajusta todo a su antojo, y a pesar de que tengamos muchos errores en el CSS de nuestras plantillas hace que todo se vea bastante bien. Así que para que nuestros blogs se vean razonablemente bien en ambos navegadores, debemos comenzar a aprender algunas reglas bastante simples.
He estado indagando mas en el tema de los css, asi que iré compartiendo con ustedes todos los tips que me parecen importantes e indispensables aprender.
Comenzemos:

Cuando editamos la plantilla lo primero que vemos son distintas etiquetas, algunas son fáciles de entender porque las palabras son similares al español, otras simplemente NOOO.

El CSS corresponde a todo el contenido que encontramos entre las etiquetas <style> y </style> de nuestra plantilla.

Las plantillas se podría decir que se diseñan por bloques, un bloque principal que se llama body es el que contiene todo, luego tenemos un header, que corresponde al titulo de nuestro blog (y su imagen), debajo tenemos el contenido (generalmente llamado wrapper) que es el que contiene el bloque de los post y el de las barras laterales (sidebar), y finalmente tenemos el pie de la pagina (footer), algunas paginas no lo tienen.

Primero mostraré la imagen para que no se asusten con tanta definición :D, asi pueden entender visualmente, y cualquier duda que les quede la pueden aclarar con mi explicación (espero que quede clara y no peor…jajajja)

css_parte_1_1.jpg

La unica linea que se puede ver en este diagrama es la llamada border, ni padding ni margen son lineas visibles.
Hay 2 cosas que son las mas importantes en la imagen anterior:
1.- los margenes horizontales se suman, como pueden ver con los 2 margenes de 5px
2.- En cambio los margenes verticales colapsan, es decir, queda el margen mas grande
Luego explicaré esto con mas detalle, y mostraré un ejemplo de cálculo.

Como ven el header es una caja, el post es otra caja, y la barra lateral es otra caja, por esto se llama modelo de cajas, cada una de estas cajas consta de 3 atributos, padding, border y margin.

Ahora mostraré la imagen de una sola caja, la de los post:

css_parte_1_2.JPG

Algunas definiciones simples:
width: corresponde al ancho del bloque que estamos definiendo.
height: correponde a la altura del bloque que estamos definiendo.
margen: corresponde al margen de nuestro bloque que estamos definiendo con respecto a los otros bloques que estan a su alrededor.
padding: corresponde al margen interior de nuestro bloque que estamos definiendo con respecto al borde.
border: corresponde a una linea visible que separa los bloques (se le puede asignar un color, asi que puede ser visible o invisible :D )

En el próximo tutorial mostraré como calcular de la manera adecuada las dimensiones de las cajas.
Si alguien experto ve algun error por favor que deje un mensaje :D

Espero que les vaya quedando de apoco más claro, si tienen algunas dudas déjenlas en este post, asi voy agregando el material en las siguientes partes de este tutorial


Si este Post te ayudó recuerda votar por el blog En esta Página
 votes, average: 0 out of 10 votes, average: 0 out of 10 votes, average: 0 out of 10 votes, average: 0 out of 10 votes, average: 0 out of 10 votes, average: 0 out of 10 votes, average: 0 out of 10 votes, average: 0 out of 10 votes, average: 0 out of 10 votes, average: 0 out of 10 (0 votos, promedio: 0 de 10)
Loading ... Loading ...

Post Relacionados
Como agregar otra barra Lateral o Sidebar a las plantillas de Blogger ?">Como agregar otra barra Lateral o Sidebar a las plantillas de Blogger ?
Eliminar el Titulo y Margen del Titulo del Blog">Eliminar el Titulo y Margen del Titulo del Blog
Cambios en el titulo parte I, Entendiendo las cosas basicas">Cambios en el titulo parte I, Entendiendo las cosas basicas
Agregue una imagen con titulo, pero se ve el antiguo, como lo borro??">Agregue una imagen con titulo, pero se ve el antiguo, como lo borro??
Como agregar una Imagen en el Titulo, Parte II, Son of Moto">Como agregar una Imagen en el Titulo, Parte II, Son of Moto


Post al Azar:


Imprime este Post Imprime este Post
Envía este Post Envía este Post



Plantillas Navideñas

Categorías: 2 Columnas, Personaliza Código, Plantilla, Plantillas, Plantillas (Templates)

Sin Comentarios



Leer Este Link Antes de Navegar por el Blog: Tutorial
Mira el Post en tu plataforma: Estas en Blogger Estas en Betablogger Estas en Wordpress


Éste dato es para los que gustan cambiar su plantilla según la época del año en que estemos, aquí les dejo unas lindas plantillas navideñas, solo hacen click en la imagen y llegarán a la página donde deben descargarlas:

Si quieres una nueva columna en la plantilla de tu Blog, solicita el servicio ahora mismo


Si este Post te ayudó recuerda votar por el blog En esta Página
5 votes, average: 7 out of 105 votes, average: 7 out of 105 votes, average: 7 out of 105 votes, average: 7 out of 105 votes, average: 7 out of 105 votes, average: 7 out of 105 votes, average: 7 out of 105 votes, average: 7 out of 105 votes, average: 7 out of 105 votes, average: 7 out of 10 (5 votos, promedio: 7 de 10)
Loading ... Loading ...

Post Relacionados
CSS Para Plantillas (Templates)">CSS Para Plantillas (Templates)
Plantillas para Blog de WordPress">Plantillas para Blog de WordPress
Nuevos Templates para Blogger (Plantillas)">Nuevos Templates para Blogger (Plantillas)
Como crear un Blog Propio en Blogger (Blogspot)">Como crear un Blog Propio en Blogger (Blogspot)
Plantillas para blogger">Plantillas para blogger


Post al Azar:


Imprime este Post Imprime este Post
Envía este Post Envía este Post



¿Cómo puedo identificar algo en mi plantilla?

Categorías: Aprende lo Básico, Plantilla

1 Comentario



Leer Este Link Antes de Navegar por el Blog: Tutorial
Mira el Post en tu plataforma: Estas en Blogger Estas en Betablogger Estas en Wordpress

Esto es algo muy basico y todos debieran saberlo, aveces se puede realizar en explorer, o tambien pueden copiar su plantilla en un block de notas (Notepad) o un documento word
Paso 1: (Primero van a edit)

identificar_codigo_plantilla_1.jpg

Lee el Resto de la Entrada »


Si este Post te ayudó recuerda votar por el blog En esta Página
1 votes, average: 3 out of 101 votes, average: 3 out of 101 votes, average: 3 out of 101 votes, average: 3 out of 101 votes, average: 3 out of 101 votes, average: 3 out of 101 votes, average: 3 out of 101 votes, average: 3 out of 101 votes, average: 3 out of 101 votes, average: 3 out of 10 (1 votos, promedio: 3 de 10)
Loading ... Loading ...

Post Relacionados
Cambiando los LINKS">Cambiando los LINKS
Cambia el About Me del Perfil">Cambia el About Me del Perfil
Traductor para el blog">Traductor para el blog
Donde debo pegar el codigo de algo, para que quede en la sidebar??">Donde debo pegar el codigo de algo, para que quede en la sidebar??
Lee esto antes de Navegar por el Blog">Lee esto antes de Navegar por el Blog


Post al Azar:


Imprime este Post Imprime este Post
Envía este Post Envía este Post









Lee esto antes de Navegar por el Blog



Aquí encontrarás las explicaciones de las preguntas mas básicas para que puedas comenzar a buscar información en este blog.
Preguntas Frecuentes:

1.-¿Que es un Blog?
2.-¿Que diferencia tiene con una Página Web?
3.-¿Me sirven los Articulos de este Blog si mi blog no es de Blogger o Wordpress o es solo una web con html?
4.-¿Como encuentro la informacion que necesito en este blog?
5.-¿Cuales son los diferentes servicios o plataformas que permiten crear un Blog?
6.-¿Como conseguir un Blog Propio?
7.-¿Que es Blogger?
8.-¿Que es Blogger y Beta-Blogger (Ex-beta)? / ¿Cuales son las diferencias?
9.-¿Si me cambié a la versión Beta de Blogger, puedo volver a editar mi plantilla de la forma antigua?
10.-¿Donde consigo ayuda para personalizar un blog de Blogger?
11.-¿Que es Wordpress?
12.-¿Donde consigo ayuda para personalizar un blog de Wordpress?

(Haz click aquí para ver el artículo completo)

Links Interesantes

Gratis - Aumenta el Tráfico
de Visitas a tu Web!!!


Otros


Ranking de Post

Suscribete al Blog


Directorios


De Todo


  • Links

  • Todos los Post

    Junio 2005 (5)
    Agosto 2005 (6)
    Septiembre 2005 (11)
    Octubre 2005 (3)
    Noviembre 2005 (12)
    Enero 2006 (2)
    Febrero 2006 (3)
    Marzo 2006 (3)
    Abril 2006 (1)
    Mayo 2006 (2)
    Junio 2006 (12)
    Julio 2006 (18)
    Agosto 2006 (44)
    Septiembre 2006 (30)
    Octubre 2006 (25)
    Noviembre 2006 (12)
    Diciembre 2006 (1)
    Enero 2007 (3)
    Marzo 2007 (5)
    Abril 2007 (8)
    Mayo 2007 (11)
    Septiembre 2007 (6)
    Octubre 2007 (15)
    Noviembre 2007 (3)
    Diciembre 2007 (12)
    Enero 2008 (7)


    Licencia

    Sólo Puedes hacer referencia del material que encontrarás en este blog, esta prohibido copiar y distribuir el material de esta obra (Tanto Imágenes como Texto). No puedes usarla con fin comercial, ni alterarla, transformarla o construir sobre ésta misma otra obra.
    WP Theme & Icons por N.Design Studio This Blog is Hosted in BlueHost
    Post RSS Comentarios RSS Log in