Archive for category: CSS

12Feb 2009 5 Comments

maquetacion css tablas vs divs

Categories: CSS, Diseño - Tags: ,

Aprovechando que estoy tomando un curso repaso de CSS, aprovecharé para publicar algunos post sobre maquetación.

Para maquetar nuestra página los divs o capas resultan ser mucho mejores que las viejas tablas, que se han hecho muy populares ya que desde IE6 están plenamente soportados los divs aunque con varios problemas para lidiar como margenes inexistentes, error con display:fixed, min-height no esta soportado, etc gracias del IE6. Pero pese a todo eso los divs son mejores.

Ventajas de los divs

  • Se requiere menos código con los divs que con las tablas lo cual nos aporta más velocidad
  • Los divs respetan los estilos mucho mejor que las tablas
  • Los divs fueron especificamente creados para diseño, las tablas son para tabular resultados y aún deberiamos seguir utilizándolas para ello
  • Los divs nos permiten separar el diseño de la lógica de la programación

Desventajas de los divs

No crean que todo son ventajas con los divs tienen algunos peros

  • Como dije lineas arriba los divs aun tienes ciertos problemas por incompatibilidades con IE6, es que Microsoft como siempre se rie de los estándares, afortunadamente IE 7 e IE8 ya no tienen la mayoría de esos lios, lo feo es que aun la mayoría no actualiza su viejo y vetusto IE6 lo bueno que hay varios hacks para hacer funcionar casi todo en IE6
  • Hay cosas que son muy complicadas de hacer con divs como por ejemplo que acomoden su tamaño en función de otro div, aunque en tablas eso es automático con divs es una pesadilla
  • Otro asunto para el que hay que romperse la cabeza con divs es el centrado vertical no funciona exactamente como quisieramos

Otros post sobre maquetación CSS

07Feb 2009 2 Comments

Aplicar estilo a formularios parte 2

Categories: CSS, Diseño - Tags: , ,

En el post anterior expliqué como aplicar estilo a los formulario.
form-2
Ahora voy a aplicar un estilo un poco más elaborado, mantenemos la misma estructura html pero ahora la hoja de estilos varía un poco

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
#form {
    width:450px;
    margin:auto;
    background-color:#84AA00;
    border:none;
}
#form legend{
    font-weight:bold;
    font-size:12px;
    color:#FFFFFF;
    background-color:#000000;
    padding:3px 8px 3px 8px;
}
#form ol{
    list-style:none;
}
#form ol li{
    padding-bottom:5px;
}
#form ol li label{
    width:120px;
    float:left;
    text-align:left;
    color:#FFFFFF;
}
#form input[type=text] {
    border:none;
    background-image:url(f1.jpg);
    background-repeat:no-repeat;   
    background-color:#84AA00;
    height:30px;
    width:254px;
}
#form input.btn {
    padding:3px;
    color:#FFFFFF;
    background-color:#576F00;
    border:1px solid #000000;
}

Como verás además del estilo de siempre para quitar los numeros a la lista y alinear las etiquetas le he agregado un grafico de fondo a las cajas de texto para obtener un formulario má atractivo además de tener un fondo más llamativo

Otros post sobre maquetación CSS

Si te pareció interesante este post, no olvides darles una revisada a los GoogleAds

07Feb 2009 11 Comments

Dar formato a formulario con CSS

Categories: CSS, Diseño - Tags: , ,

Los formularios son una de las partes mas olvidadas en cuanto a diseño, sin embargo se pueden hacer muchas cosas con ellos y darles un look mas vivo y atractivo.

Estructura básica del formulario

Esta es la estructura general, la idea es que la hoja de estilos se encargue de todos los cambios, y simpre se mantenga la misma estructura html

1
2
3
4
5
6
7
8
9
10
11
<form name="frm" method="post" action="envio.php">
<fieldset id="form">
<legend>Mi formulario</legend>
<ol>
    <li><label>Nombre: </label><input type="text" name="fname" size="25" /></li>
    <li><label>E-mail: </label><input type="text" name="femail" size="25" /></li>
    <li><label>Dirección: </label><input type="text" name="fdireccion" size="25" /></li>    
</ul>
    <p align="center"><input type="submit" name="submit" class="btn" value="Enviar" /></p>
</fieldset>
</form>

Como te darás cuenta es una estructura simple he usado un fieldset como contenedor, legend para mostrar un titulo y ademas li para todos los elementos del formulario, debes asegurarte que el fieldset tenga como id “form” para poder aplicar el estilo.

Estilo CSS

Voy a empezar con estilo simple, nada muy elaborado, como puedes ver en la imagen
form-1
Para eso voy a aplicar:

  • Primero los estilos al fieldset
  • Luego al legend
  • Luego con #form ol voy a quitarle los numeros a la lista
  • Ahora voy a aplicar un espaciado a cada elemento #form ol li
  • Para aplicar formato a cada etiqueta uso #form ol li label
  • Para aplicar estilo a los cuadros de texto es un poco distinto #form input[type=text]
  • Al boton voy a aplicarle una clase #form input.btn

Y el CSS finalmente quedaria asi

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
#form {
    border:1px solid #990000;
    width:450px;
    margin:auto;
}
#form legend{
    font-weight:bold;
    font-size:12px;
}
#form ol{
    list-style:none;
}
#form ol li{
    padding-bottom:5px;
}
#form ol li label{
    width:120px;
    float:left;
    text-align:left;
}
#form input[type=text] {
    border:1px solid #CCCCCC;
}
#form input.btn {
    padding:3px;
    color:#FFFFFF;
    background-color:#990000;
    border:1px solid #000000;
}

Como verán no es una hoja de estilos muy extensa y la estructura es más o menos la misma para cualquier cambio.

Puedes revisar la segunda parte del tutorial aqui

02Feb 2009 8 Comments

menu usando ul y li

Categories: CSS, Diseño - Tags: , ,

En este tutorial voy a explicar como crear un menu para nuestra página web usando unicamente las etiquetas ul y li

Estructura del la lista ul li

Nuestro código html es muy sencillo únicamente hay que crear un listado (ul) y agregar los items del listado que sería cada li y todo esto dentro de un div al cual llamaremos menu

1
2
3
4
5
6
7
8
<div id="menu">
<ul>
    <li><a href="#">Inicio</a></li>
    <li><a href="#">Nosotros</a></li>
    <li><a href="#">Servicios</a></li>
    <li><a href="#">Contacto</a></li>
</ul>
</div>

Dándole forma al UL con estilos

Si vemos sólo el html veremos un menu vertical bastante alicaido, ahora vamos a hacer que la hoja de estilos se encargue de darle forma:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
body {
    color: #333333;
    font-family:Verdana, Arial, Helvetica, sans-serif;
    font-size:11px;
}
#menu {
    margin:auto;
    padding-left:20px;
    padding-top:5px;   
    height:25px;
    width:320px;
    background-image:url(nav_bg.png);
}
#menu ul{
    list-style:none; /* Eliminamos los bullets */
    margin:0px; /* Quitamos los margenes */
    padding:0px; /* Quitamos el padding */
}
#menu ul li {
    float:left; /* Hacemos que el menu se muestre horizontal */
    padding-left:10px;
    padding-right:10px;
    border-right:1px solid #FFFFFF;
}
#menu ul li a{
    text-decoration:none;
    color:#CCCCCC;
    font-weight:bold;
}
#menu ul li a:hover{
    color:#FFFFFF;
}

Si revisamos el código CSS, vemos que poco a poco defino el fondo, la foma en que mostrarán los items, le aplico colores a los links y va tomando forma nuestro menu.
Si estás buscando un menu con submenus, y menus desplegables, revisa este tutorial

Otros post sobre maquetación CSS

29Jan 2009 31 Comments

Diseño web modular PHP chau frames

Categories: CSS, Diseño, PHP - Tags: , , ,

¿Por qué debemos olvidarnos de los frames?

Los viejos frames funcionan bien pero google, yahoo y ningún buscador los indexa bien, así que perdemos ranking y será muy raro que aparezcamos en un buscador, además no nos permiten disfrutar de las ventajas del CSS.

¿Qué es diseño web modular?

Para reemplazar a los viejos frames, es mejor usar PHP y separar las secciones de nuestra página web en módulos, en castellano la vamos trozar como pollo, de tal forma que cada pedazo contenga la estructura de la página:

  • top_page.php Aqui vamos a poner todos los encabezados html
  • header.php Aqui vamos a poner el encabezado de nuestra página, es decir el título y el menú
  • footer.php Aqui vamos a poner la parte de abajo de nuestra página nuestro copyright, links, etc

top_page.php

Primero todo header del html, nuestro titulo, hoja de estilos

1
2
3
4
5
6
7
8
9
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Mi pagina modular</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="wrapper">

header.php

Aqui vamos a poner nuestro encabezado y menu

1
2
3
4
5
6
7
8
<div id="header">
</div>
<div id="menu">
    <a href="#">Homepage</a>&nbsp;&nbsp;|&nbsp;&nbsp;    
    <a href="#">About Us</a>&nbsp;&nbsp;|&nbsp;&nbsp;
    <a href="#">Services</a>&nbsp;&nbsp;|&nbsp;&nbsp;
    <a href="#">Contact Us</a>
</div>

footer.php

Aqui la parte final de nuestra página web

1
2
3
4
5
6
<div id="footer">
    Visita <a href="http://www.miguelmanchego.com" target="_blank">el Blog</a> para aprender diseño
</div>
</div>
</body>
</html>

¿Cómo lo junto todo?

Pues usando includes vamos a pegar todas esas partes que se repiten en nuestra página web, y quedaría algo asi

1
2
3
4
5
6
<?php include("includes/top_page.php"); ?>
<?php include("includes/header.php"); ?>
<div id="contenido">
  <p>Nuestro texto va aqui</p>
</div>
<?php include("includes/footer.php"); ?>

Aquí he descrito la forma más simple de hacer web modular pero no es la mejor forma, sobre todo a la hora de usar frienly url, o cuando tenemos muchas páginas, por lo que te sugiero leer la segunda parte de este tutorial

Suscribete

Ahora también puedes suscribirte via correo electrónico

Ingresa tu dirección de correo:

Delivered by FeedBurner


Facebook

Mi Galeria flickr

[ Ver más ]

© Copyright - Miguel Manchego - Design by Kriesi