Posicionando objetos con CSS

Es importante aprender a poner objetos (botones, imagenes, labels, etc) en el lugar apropiado, vamos a ver una manera muy facil de hacerlo, usando CSS.

Posicionando un boton (tambien aplica a labes, dropdown, radiobuttons, etc)
En nuestra hoja de estilo definimos la posicion del boton:

/* Boton - correo */
#css0{
position:fixed;
top:190px;
left:225px;
}


Creamos un estilo "css0" que posiciona el objeto en la posicion top 190 pixeles ( del tope superior de la pantalla para abajo) y left 225 pixeles ( del extremo izquierdo contando 225 pixeles a la derecha ). Ahora vamos a usar este estilo en nuestra pagina HTML, para ellos solo agragamos un segmento con estilo "css0" que fue el que acabamos de agregar en nuestra hoja de estilos.

<div id="css0"><input name="correo" value="correo" type="submit"></div>

El segmento que agregamos le decimos que use el estilo que creamos mediante id="css0" y entre los tags de <div id="css0"> y </div> ponemos el objeto que estamos posicionando.


Posicionando imagenes
Si deseamos en vez de un objeto posicionar una imagen hacemos unas pequenas modificaciones, en el CSS ponemos:

* Imagen - blog.png */
#css1 {
position:fixed;
width: 100px;
height: 75px;
top:50px;
left:100px;
background:url(images/blog.png) no-repeat right;
}

Ahora agregamos unos parametros mas en el CSS, width y height que son para indicar el ancho y alto de la imagen, ademas de background, con el indicaremos el path de la imagen que queremos mostrar, ahora para insertar esta imagen dentro de nuesto HTML solo agregamos el segmento con el estilo que recien creamos:

<div id="css1"></div>

No olvides importar la hoja de estilo en el tag HEAD de tu HTML

<link rel="stylesheet" type="text/css" href="style.css" media="screen" />