LOG IN
Usuario:

Contraseña:


Últimos temas
» [PHPBB3] Contenido por defecto en la respuesta rapida.
Mar Jul 17, 2018 7:30 pm por Ysamar

» [PHPBB3] Mejorar las Pestañas que aparecen en el perfil de un Usuario.
Dom Jul 01, 2018 12:12 am por Ysamar

» Navbar desplegable sencilla
Dom Jun 17, 2018 2:06 pm por Ysamar

» Modulo de Afiliados 40x40 [Todas las versiones]
Vie Jun 15, 2018 6:44 pm por Ysamar

» 2 Galeria Html Elegante
Miér Jun 13, 2018 8:57 pm por Ysamar

» [PHPBB3]Agregar amigos desde el perfil y dejar mensaje en su muro...
Miér Jun 13, 2018 8:02 pm por Ysamar

» Botón "ir al muro" (mensajes de los visitantes)
Miér Jun 13, 2018 7:49 pm por Ysamar

» ¿No quieres publicidad
Miér Jun 13, 2018 7:37 pm por Ysamar

» Efecto Lightbox automatico en imagenes [Foroactivo]
Miér Jun 13, 2018 7:27 pm por Ysamar

Estadísticas
Tenemos 2352 miembros registrados.
El último usuario registrado es Jhunky

Nuestros miembros han publicado un total de 41230 mensajes en 3360 argumentos.
Afiliados





No estás conectado. Conéctate o registrate

Ver el tema anterior Ver el tema siguiente Ir abajo  Mensaje [Página 1 de 1.]


1 Clase 3 - positioning el Jue Feb 07, 2013 6:42 am

Curso WEBD: CSS – Clase 3

bienvenidos a una pequeña clase de una propiedad de css el positioning , este nos sirve para posicionar objetos en nuestra pagina moviendolos mediante css

hay varios tipos de posicionamiento y estos nos permiten moverlos con los valores
right
left
top
bottom

hay dos formas de usarlos

la primera es poniendole un valor positivo a las medidas de las propiedades haciendo que se muevan en la direccion contraria
es decir si pongo
Código:
right:80px;
en español : derecha XD
este se movera 80 pixeles a la izquierda

la segunda es poniendole un valor negativo de medidas haciendo que se mueva en la direccion que pides.
Código:
right:-80px;
este si se movera 80 pixeles a la derecha . la recomiendo solo para posicionamiento relativo

Posicionamiento normal o estático: se trata del posicionamiento que utilizan los navegadores si no se cambias su valor este ignora los valores right left top y bottom.

ejemplo:
http://jsfiddle.net/pL8GU/3/

forma de usarlo:
Código:
popiedad {
position:static;
}



Posicionamiento relativo:esta mueve la caja de su posicion original pero dejando el espacio que esta ocupaba antes , en otra forma de decirlo esta no altera el posicionamiento de los objetos que habian antes de el cambio.
usa las propiedades right left top bottom

ejemplo:
http://jsfiddle.net/pL8GU/4/

forma de usarlo
Código:
position:relative;

posicionamiento absoluto : es mas complejo que el relativo , ya que este lleva al limite del contenedor que encierra la caja o elemento que quieres mover y al contrario que esta no deja el espacio que anteriormente ocupaba

con colocarles valor 0 :
la propiedad top lleva el borde superior de nuestra caja hasta el borde superior del contenedor de esta

la propiedad bottom lleva el borde inferior de nuestra caja hasta el borde inferior del contenedor de esta

la propiedad right lleva el borde derecho de nuestra caja hasta el borde derecho del contenedor de esta

la propiedad left lleva el borde izquierdo de nuestra caja hasta el borde izquierdo del contenedor de esta del contenedor de esta

si quieres moverlo hacia por ejemplo abajo empezando desde la parte superior del contenedor pondrias
top:200px;
moviendolo hacia abajo 200 pixeles
ejemplo
http://jsfiddle.net/pL8GU/7/

forma de usarlo:
Código:
position:absolute;


Posicionamiento fijo: usa las mismas propiedades que el posicionamiento absoluto execto que convierte una caja en un elemento inamovible, de forma que su posición en la pantalla siempre es la misma independientemente del resto de elementos e independientemente de si el usuario sube o baja la página en la ventana del navegador.

ejemplo:
http://jsfiddle.net/pL8GU/6/

forma de usarlo
Código:
position:fixed;

Ver perfil de usuario

2 Re: Clase 3 - positioning el Jue Feb 07, 2013 7:27 am

Muy bien Explicado gracias por el Aporte Sonrisa , era momento de revivir esta zona XD

Ver perfil de usuario http://gamersonline.forumotion.com/

3 Re: Clase 3 - positioning el Jue Feb 07, 2013 6:22 pm

gracias cris, pero podrias explicarme como aplicar esto a mi foro, para por ejemplo poner un video en la parte superior del foro?

Ver perfil de usuario

Contenido patrocinado


Ver el tema anterior Ver el tema siguiente Volver arriba  Mensaje [Página 1 de 1.]

Permisos de este foro:
No puedes responder a temas en este foro.