11.07.2015 Views

el tutorial de Dreamweaver

el tutorial de Dreamweaver

el tutorial de Dreamweaver

SHOW MORE
SHOW LESS

You also want an ePaper? Increase the reach of your titles

YUMPU automatically turns print PDFs into web optimized ePapers that Google loves.

Unidad 17. Estilos CSS Avanzado (XIII)17.13Controles <strong>de</strong> posiciónEn este apartado veremos cómo posicionar <strong>el</strong> contenido <strong>de</strong> la página web utilizando únicamenteestilos CSS.Existen unas propieda<strong>de</strong>s CSS que combinadas con las siguientes nos ayudarán a mover <strong>el</strong>contenido <strong>de</strong> la página.Estas son top, left, bottom y right.Con estas propieda<strong>de</strong>s podremos establecer la distancia a los bor<strong>de</strong>s <strong>de</strong> la ventana d<strong>el</strong>navegador.Recor<strong>de</strong>mos que top equivale a la parte superior.Left al lado izquierdo.Bottom al bor<strong>de</strong> inferior.Y finalmente right al <strong>de</strong>recho.Normalmente daremos valores a estas propieda<strong>de</strong>s utilizando píx<strong>el</strong>es o porcentajes.Veamos ahora cómo las utilizaremos para <strong>el</strong>lo <strong>de</strong>beremos <strong>de</strong>clarar también la propiedadposition.Esta es sin duda la más compleja <strong>de</strong> este apartado así que la veremos con <strong>de</strong>tenimiento.Esta propiedad pue<strong>de</strong> aceptar 4 valores: static, absolute, r<strong>el</strong>ative y fixed.Vayamos uno a uno.El valor static es <strong>el</strong> valor por <strong>de</strong>fecto <strong>de</strong> un <strong>el</strong>emento, ocupa su lugar en <strong>el</strong> flujo <strong>de</strong> la página y nopue<strong>de</strong> ser modificado utilizando las propieda<strong>de</strong>s top/bottom y left/right.p {position: static;}Con <strong>el</strong> valor absolute pue<strong>de</strong>s colocar un <strong>el</strong>emento en cualquier parte <strong>de</strong> la ventana con sólo darl<strong>el</strong>as coor<strong>de</strong>nadas.

Hooray! Your file is uploaded and ready to be published.

Saved successfully!

Ooh no, something went wrong!