Posts Tagged "CSS"

Diseño de Temas para Wordpress

Posted on 23-08-20092009 in CSS, HTML | Comentarios desactivados

He aqui un ejemplo diseño con css de un tema (solo el index) wordpress, de 3 columnas, una barra de navegación , pie de página y cabecera de página, la imagen que se muestra debajo describe el funcionamiento del mismo, y los detalles que se aplican con el css, debajo de la imagen el codigo html para general la web y el css que la formatea.

Este diseño cuenta con lo siguiente:

- Container
- Header
-Top Navigation Menu
- Left Navigation Menu
- Right Navigation menu
- Content Part
- Footer

Aqui vemos el codigo html del index:

<div id=container>
<div id=”header”>
<h2>Header</h2>
</div>
<div id=”topnav-container”>
<ul id=”topnav”>
<li> <a href=”#”>Home</a> </li>
<li> <a href=”#”>Categories</a> </li>
<li> <a href=”#”>Services</a> </li>
<li> <a href=”#”>About us</a> </li>
<li> <a href=”#”>Contact us</a> </li>
</ul>
</div>
<div id=”leftnav”>
This is a left navigation bar.
This is a left navigation bar
This is a left navigation bar
</div>
<div id=”rightnav”>
This is a right navigation bar
</div>
<div id=”content”>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod

tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam
</p>
</div>
<div id=”footer”>
<h2>Footer</h2>
</div>
</div>

Aqui vemos el CSS que formatea este diseño:

#container {
margin: 10px auto;
width: 95%;
border: 1px solid gray;
}
#header {
padding: 3px;
border-bottom: 1px solid gray;
}
#topnav-container {
border-bottom: 1px solid gray;
padding: 4px 0;
background: #e0e0e0;
}

%

CSS: Color y Background

Posted on 14-08-20092009 in CSS | 0 comments

La propiedad CSS background te permite controlar el color de fondo de cualquier elemento, indicarlo como imagen, repitiendo la imagen de fondo verticalmente u horizontalmente y la posición de la imagen de fondo en la página.

Si deseamos indicar el fondo con un color, el código CSS sería este.

body {background-color: #00ff00}

En este ejemplo el elemento al que se le ha añadido color es el cuerpo de la página,pero puede ser cualquier otro elemento.

Para colocar la imagen de fondo sería así:

body {background-image: url(’tuimagen.jpg’) }

CSS: La propiedad Line-height

Posted on 14-08-20092009 in CSS | 0 comments

La propiedad Line-height especifica el espacio del salto de línea base de un texto.  Los valores son relativos al tamaño de la fuente del elemento y no existen valores negativos.Si dicho valor es un número, la altura de la línea se calcula multiplicando el tamaño de la fuente del elemento por dicho número.

Valores de la propiedad

Ejemplo de su funcionamiento

Un ejemplo con porcentajes (cabe destacar que la mayoría de los navegadores el tamaño estándar de salto de línea con porcentajes oscila entre 110% y 120%:

p.small {line-height:90%} 

p.standard { 110%;} 

p.big {line-height:200%} 

p.small {line-height:90%}
p.standard { 110%;}
p.big {line-height:200%}

Un ejemplo con números:

p.standard {line-height: 0.5; } 

p.standard {line-height: 0.5; }

Un ejemplo con píxeles:

p.standard {line-height: 10px; }

Recursos para CSS

Posted on 14-08-20092009 in CSS | 0 comments

Les dejo el artículo Mega CSS Resource Roundup en TripwireMagazine,, con el que acceder a la que puede ser la colección de recursos más importante acerca de los estilos CSS.

En total hay reunidos 50 recursos interesantes, entre herramientas, tutoriales, trucos, hojas de ayuda…. con los que cualquier diseñador y/o desarrollador web podrá mejorar sus conocimientos en el manejo de las hojas de estilo en cascada, CSS.

Interesados en acceder a esta colección de recursos CSS pueden hacerlo desde www.tripwiremagazine.com.

Diseño de Páginas Webs

Posted on 12-07-20092009 in Featured Articles | 0 comments

Desarrollo de Sitios Webs a la Medida de sus Necesidades Utilizando las mas Avanzadas Técnicas de Diseño y Programación Web, desarrollos pensados en optimizar sus ingresos a través de la aplicación de las mas rigurosos procesos de testeo…