09/11/12

CSS Posicionamiento esttico y relativo con CSS

CSS
PosicionamientoestticoyrelativoconCSS
Accesibilidad:

36.PosicionamientoestticoyrelativoconCSS
TommyOlsson.26deseptiembredel2008Publicadoen:enlnea,composicin,columna,bloque,IE

En este apartado explicaremos con exhaustividad el modo como se puede utilizar CSS para posicionar elementos HTML en el lugar deseado de una pgina con la propiedad p s t o (posicionar) de CSS y oiin algunaspropiedadesrelacionadas. La propiedad p s t o de CSS tiene cuatro valores lcitos (aparte del omnipresente i h r t s a i oiin n e i ): t t c (esttico), r l t v (relativo), a s l t (absoluto) y f x d (fijo). Estos valores tienen un impacto muy eaie boue ie importante sobre la manera en que se representa un elemento. Los valores s a i y r l t v estn muy ttc eaie relacionados,yenesteapartadolosestudiaremoscongrandetalle.Losvalores a s l t y f x d tambin boue ie estnmuyrelacionados,perodemomentolosdejaremosparaelprximoapartado. Loscontenidosdeesteapartadosonlossiguientes: 36.1.Elmaravillosomundodelosrectngulos 36.2.Posicionamientoesttico 36.2.1.Disposicindecajasdebloque 36.2.2.Disposicindecajasenlnea 36.3.Posicionamientorelativo 36.3.1.Disposicindemltiplescolumnasconrequisitosdeordenenelcdigofuente Crearcolumnas SolucionarlosproblemasconInternetExplorer 36.3.2.Otrosusosdelposicionamientorelativo Resumen Preguntasderepaso

36.1.Elmaravillosomundodelosrectngulos
Para empezar, recapitularemos un poco todo lo que hemos dicho en el apartado anterior, dedicado a los elementos flotantes y al clearing, sobre el CSS y las cajas HTML. Un documento HTML consiste en un nmero de elementos salpicados con datos de caracteres (texto). Cuando un documento de este tipo se reproduce en una pantalla de ordenador o en una copia impresa, estos elementos generan cajas rectangulares.DelamismamaneraqueunconjuntodeelementosHTMLsedivideenelementosdebloque yelementosenlnea,lascajasCSStambinpuedenserbsicamentecajasdebloqueocajasenlnea.Por defecto,lahojadeestilosdelagentedeusuariointegradodeunnavegadorhacequeloselementosHTML de bloque, como p y d v generen cajas de bloque, mientras que los elementos en lnea, como s r n y i , tog s a , generan cajas en lnea. Podemos utilizar la propiedad d s l y para controlar el tipo de caja que se pn ipa generar.
Vedtambin Podisverelapartado35deestemdulo.

Las cajas generadas por los elementos de un documento se disponen segn una serie de normas claramente definidas segn la especificacin CSS2.1. Estas reglas estn escritas para las relativamente escasaspersonasqueescribensoftwareparanavegadoresconelfindequepuedansabercmofunciona el CSS, pero no para aqullos de nosotros que diseamos pginas web para ganarnos la vida o como aficin. Por ello existe todo este curso! Como resultado, la especificacin puede ser un tanto difcil de entender. En este apartado, intentaremos explicar los conceptos bsicos de una manera que resulte apropiadaparalosdiseadoresydesarrolladoresdewebs.

36.2.Posicionamientoesttico
De hecho, este nombre no es nada adecuado. En realidad, los cuadros con p s t o : t t c no se oiinsai "posicionan" en el sentido del CSS. Simplemente se disponen en el orden en el que aparecen en el etiquetado y ocupan todo el espacio que necesitan ste es el comportamiento por defecto que se da cuandonoseaplicaningnCSSalHTML. Existen algunas diferencias fundamentales en la manera como se distribuyen las cajas de bloque en comparacin con la distribucin de las mosaic.uoc.edu/ac/le/es/m6/ud10/index.html#relative cajas en lnea por tanto, examinaremos los dos tipos uno a uno.
1/12

09/11/12

CSS Posicionamiento esttico y relativo con CSS

comparacin con la distribucin de las cajas en lnea por tanto, examinaremos los dos tipos uno a uno. Empezaremosconlascajasdebloqueporquesonmssencillas. 36.2.1.Disposicindecajasdebloque SinoaplicamosningunadeclaracinCSSconcreta,lascajasdebloquesedisponenverticalmentedearriba abajo en el orden en el que aparecen en el etiquetado. Cada caja es normalmente tan ancha como el documento(elelemento b d ), pero incluso si las hacemos ms estrechas, stas no se distribuirn una al oy ladodelaotraaunquehayaespacio,sinoqueseseguirnsituandolaunabajolaotra.Podisimaginroslo comosicadacajadebloquetuvieraunsaltodelneaimplcitoantesydespus,yaqueassegarantizaque tendruna"lnea"propia. Ladistanciaverticalentredoscajasdebloquesecontrolaconlapropiedad m r i - o t m a g n b t o (margeninferior) delaprimeracajaylapropiedadm r i - o (margensuperior)delasegundacaja(enestecursoyahemos agntp visto cmo manipular estas propiedades). Para las cajas del flujo normal, es decir, las cajas que no son flotantes o que no tienen un posicionamiento absoluto, los mrgenes verticales entre dos cajas de bloque adyacentessesuperpondrn,demaneraqueelresultadofinalnoserlasumadelosdosmrgenes,sinoel mayordelosdos,talcomosepuedeverenlafigura1quesemuestramsadelante. MiradelsiguientefragmentodeHTML:
< sye"agnbto:0x>hsprgahhsa4p bto mri./> p tl=mri-otm4p"Ti aarp a 0x otm agn<p < sye"agntp2p"Ti prgahhsa2p tpmri./> p tl=mri-o:0x>hs aarp a 0x o agn<p

Cuandosemuestraenunnavegador,losmrgenessesuperponencomosepuedeverenlafigura1.

Figura1.Losmrgenessesuperponenyladistanciaentrelosdosesde40 pxeles,ynode60pxeles.

Una caja de bloque incluir slo otras cajas de bloque o slo cajas en lnea. Si un elemento de bloque contiene una mezcla de hijos de bloque y en lnea (algo permitido pero semnticamente cuestionable), se generar lo que se conoce como cajas de bloque annimas para incluir las cajas hijas insertadas, de maneraquelamadrecontengaslocajasdebloque. Podis especificar las dimensiones de una caja de bloque con las propiedades w d h (anchura) y h i h it egt (altura). Tambin podis especificar los mrgenes vertical y horizontal. El valor inicial (por defecto) para w d h h i h es a t ,yelvalorinicialparalaspropiedadesdemargenes 0 Estos factores combinados i t y e g t uo . significanqueunacajadebloqueserpordefectotananchacomosumadre,comomuestralafigura2.

Figura2.Lascajasdebloquesedistribuyenverticalmente.

36.2.2.Disposicindecajasenlnea Nota Este subapartado puede ser difcil de entender si no tenis mucha experiencia con CSS,demodoquequizdeberisleerlounascuantasveces,perotampocoosdebe preocupar.Laexperimentacinporvuestracuentaesprobablementelamejormanera paraentenderbientodasestascuestionessloesnecesarioquealahoradehacer laspruebasutilicisunbuennavegadorcompatibleconlosestndares,comoOperao Firefox. LascajasenlneasegeneranpordefectoapartirdeloselementosHTMLenlnea,perotambinhaycajas enlneaannimasgeneradasparaincluirelcontenidodetextodeloselementos.
mosaic.uoc.edu/ac/le/es/m6/ud10/index.html#relative 2/12

09/11/12

CSS Posicionamiento esttico y relativo con CSS

Lascajasenlneasedistribuyenhorizontalmente,unadespusdeotra,enelordenenelqueaparecenen eletiquetado.Segnlapropiedad d r c i n i e t o ,loscuadrosinsertadossedistribuirndeizquierdaaderecha (d r c i n l r o de derecha a izquierda (d r c i n r l La direccin de izquierda a derecha se utiliza, i e t o : t ) i e t o : t ). porejemplo,conlosidiomaseuropeos,mientrasqueladederechaaizquierdaseutilizaconidiomascomo elrabeyelhebreo. El grupo de cajas en lnea que forman una lnea en la pantalla (o en el papel) est contenido en otro rectngulo ms, que se conoce como cajadelnea. Las cajas de lnea se distribuyen verticalmente en su bloque madre, sin ningn espacio entre ellas. Podemos modificar la altura de las cajas de lnea con la propiedadl n - e g t iehih. Para las cajas en lnea no podemos especificar ninguna dimensin. Podemos especificar los mrgenes horizontales,peronolosverticales. Siesnecesario,unacajaenlneasepuededividirenvariascajasenlneadistribuidaspordosomscajas delnea.Cuandoseproduceunadivisindeestetipo,todoslosmrgeneshorizontalesyseparaciones,y todos los bordes verticales, se aplicarn slo antes de la primera caja y despus de la ltima caja. Imaginmonosundocumentoconlareglasiguienteparaloselementose : m
e { m mri:02m agn e; pdig 01m adn: e; bre:1xdte bu; odr p otd le }

Conestoseobtendrunacomposicinsimilaralaquesepuedeverenlafigura3,enlaqueloselementos conestilosedividenenmltipleslneas.

Figura3.Losmrgenes,laseparacinyelbordenoseaplicandondeseproduce larotura.

Laalineacinverticaldelascajasenlneadentrodelacajadelneaquelascontieneestdeterminadapor lapropiedad v r i a - l g (alineacinvertical).Elvalorpordefectoes b s l n , lo que significa que las etclain aeie cajas en lnea se alinean de manera que sus lneas base de texto quedan alineadas. La lnea base es la lnea imaginaria sobre la que se sitan las letras sin astas descendentes. Esta lnea se sita un poco por encimadelaparteinferiordelacajadelneaparadejarespacioparalasastasascendentesdelasletrasen minsculas,talcomomuestralafigura4.

Figura4.Lasletrassesitansobrelalneabaseimaginaria.

Observadquelapropiedadv r i a - l g seaplicasloalascajasenlneayalasceldasdetabla,ynose etclain hereda.Lafigura5muestraalgunasimgenespequeascondiferentesalineacionesverticales.

Figura5.Lasimgenessituadasconlosvaloresdelapropiedadv r i a - l g etclain delCSS

Cuandolaanchuratotaldelascajasenlneaenunacajadelneaesinferioralaanchuradelacajadelnea ens,laalineacinverticalsecontrolaconlapropiedad t x - l g .Con t x - l g : u t f (alineartexto: etain etainjsiy justificar)seinsertaunespacioadicionalentrelascajasenlnea,siesnecesario,paraalinearelcontenidoa la izquierda y a la derecha. Esta propiedad se aplica a las cajas de bloque, a las celdas de tablas y a los bloquesenlnea,ysehereda.Lafigura6muestraelresultadodeaplicarvaloresdiferentesdelapropiedad t x - l g altextoquehayenelinteriordelasceldasdeunatabla. etain
mosaic.uoc.edu/ac/le/es/m6/ud10/index.html#relative 3/12

09/11/12

CSS Posicionamiento esttico y relativo con CSS

Figura6.Controlarlaalineacindeltextoconlapropiedadt x - l g etain

36.3.Posicionamientorelativo
El posicionamiento relativo es un sistema de posicionamiento de CSS, pero est ms relacionado con el "posicionamiento"estticoqueconsusprimoshermanos:elposicionamientoabsolutoyelfijo. Unelementocon p s t o : e a i e o i i n r l t v secolocaenprincipioigualquecualquierelementoestticodebloque o insertado. Pero entonces sucede algo muy interesante: la caja generada se desplaza segn las propiedadest p b t o ,l f yr g t o , o t m e t i h . Lo que hay que recordar sobre el posicionamiento relativo es que slo se desplaza la caja generada. El elementosigueestandoalldondeestabaenelflujodeldocumentoesttico.Aquesdonde"ocupaespacio" respectoalosotroselementos.Esosignificaquelacajadesplazadapuedeacabarencimadeotrascajasde elementos, ya que stas siguen actuando como si el elemento con un posicionamiento relativo se hubiera quedado donde deba estar antes de aplicar el posicionamiento. Respecto al flujo del documento, el elementonosehamovidoessloelresultadovisualfinalloquemuestralacajadesplazada.Veamoscmo funcionaenlaprctica. 1. Copiad el siguiente cdigo HTML en un documento nuevo del editor de textos que ms os guste y guardadloconelnombrer l t v . t l eaiehm.
<DCYEhm PBI "/WC/T HM 40/E" !OTP tl ULC -/3/DD TL .1/N "tp/www.r/Rhm4src.t" ht:/w.3ogT/tl/titdd> <tl hm> <ed ha> <eaht-qi=CnetTp"cnet"ethm;castuf8> mt tpeuv"otn-ye otn=tx/tl hre=t-" <il>eaiePstoig/il> tteRltv oiinn<tte <ha> /ed <oy bd> <>oe ismdlrstae cnette aiicn ei. pLrm pu oo i mt osceur dpsig lt Crbtrfuitfuitprs uaiu ega ega uu. Ana e mts Nlafcls. een u eu. ul aiii Pletsu qi jsovlmsassii sgti. elneqe us ut e as ucpt aits Casatn tct scoq a ltr trun prcnbansr, ls pet aii oisu d ioa oqet e oui ota pricpo hmnes e nets yeao. Qiqemli,jsovlrocsaium un tro vru lcs usu ols ut e hnu lqa, ra otr ais au, u tniutmtsac vllrm t icdn eu ru e oe. Pasn mtsoc,aiicn ee,fretmu,pletsu nn reet eu ri dpsig gt emnu t elneqe o, di u. Sdsgti,<pnmtsasme<sa>dcu,sm e aits sa>eu epr/pn itm e lbr sgti nn,vteaiicn lonqevtetlu. ieo aits uc ia dpsig e eu ia els Di qi oc qi ns nnmydpbs us us ri us il oum aiu. Eimat.Paelsipritac a oi. ta ne hslu mede ru t do I hchbtsepae dcus.Ana mts n a aias lta itmt een eu. Qiqeanb.Mrimti ulmoprism usu ih ob ats lacre pu. Nla oi un,fuitsd bbnu sd vluaei,mga ulm do ra ega e, iedm e, uptt n an. Nlatro jso cnalsicls pracnietm itru ul otr ut, ovli aui, ot odmnu, nedm nc ac. e, ru Ponlcu prs vhcl e,cru u,nnmye,da./> ri ets uu, eiua t uss t oum t im<p <bd> /oy <hm> /tl

2. Abridelarchivoconvuestronavegadorwebparaverquaspectotieneenestemomentodeberaisver slounprrafodetextonormal. 3. Creadundocumentonuevoenvuestroeditor,copiadelcdigoCSSsiguienteyguardadelarchivocon

mosaic.uoc.edu/ac/le/es/m6/ud10/index.html#relative 4/12

09/11/12

CSS Posicionamiento esttico y relativo con CSS

elnombres y e c s tl.s.
p{ wdh 2e; it: 0m } sa { pn bcgon-oo: lm; akrudclr ie }

4. EnlazadlahojadeestiloeneldocumentoHTMLinsertandolalneasiguientejustoantesdelaetiqueta <ha> /ed.

<ikrl"tlset tp=tx/s"he=syecs> ln e=syehe" ye"etcs rf"tl.s"

5. Guardadlosdosarchivosyactualizadlapginaenelnavegador.Hemosconseguidoqueelprrafosea ms estrecho para que los saltos de lnea estn siempre en la misma posicin incluso cuando la ventana del navegador sea pequea. Ahora el elemento s a tiene un color de fondo un poco chilln pn parahacerlomsvisible. 6. A continuacin, modificaremos la hoja de estilos aadiendo tres declaraciones a la regla para el elementos a : pn
sa { pn psto:rltv; oiin eaie tp 1m o: e; lf:2m et e; bcgon-oo:lm; akrudclr ie }

7. Guardadyvolvedacargarlapginaenelnavegadorparaverlosefectosdelposicionamientorelativo. Habisdesplazadoelelementos a tantoverticalcomohorizontalmente.Observadquequedasuperpuesto pn sobrelalneadetextosiguienteyqueenellugardondeseencontrabaahorahayunespaciovaco. Lamaneracomosehadesplazadolacajageneradaquiznoeralaqueesperabaisdeestecdigo.Habis especificadot p 1 m o : e ,perolacajasehadesplazadohaciaabajo.Adems,lacajatambinsehadesplazado hacialaderechaapesardehaberespecificadol f : e .Porqu? et2m La clave para entender el funcionamiento de estas propiedades con el posicionamiento relativo es darse cuentadequeespecificanelbordeenelqueseaplicaelmovimiento,ynoladireccindelmovimiento.Es decir,quelapropiedadt p o desplazalacajaenrelacinconsubordesuperior,lapropiedadl f lodesplaza et en relacin con su borde izquierdo, y as sucesivamente. La caja se aleja del borde especificado por lo tanto, t p 1 m desplaza el cuadro 1 em desde la posicin superior, es decir, hacia abajo. Los nmeros o:e negativosdesplazanelcuadroenladireccinopuestay,porlotanto,b t o : 1 m o t m - e eslomismoquet p 1 m o:e. Eso nos lleva a otra conclusin: no tiene ningn sentido especificar al mismo tiempo una propiedad t p y o una propiedad b t o (o l f y r g t para el mismo elemento. Las reglas del CSS dicen que si se otm et i h ) especifica t p entonces b t o se debe ignorar. Respecto al movimiento horizontal, esto depende de la o , otm propiedadd r c i n i e t o .Siseespecifican l f y r g t e t i h almismotiempo,enunentornodeizquierdaaderecha seignorar g t i h yenunentornodederechaaizquierdaseignoral f . et Elejemploquehemosvistoexplicaelposicionamientorelativo,peronoparecemuytil,verdad?Aspues, paraqusirveelposicionamientorelativo?Echemosunvistazoaunejemplomscomplicado. 36.3.1.Disposicindemltiplescolumnasconrequisitosdeordenenelcdigofuente Aviso:esteejemploesuntantocomplejo.SieslaprimeravezqueentrisenelmundodelCSS,ospuede parecerinclusoalgodescorazonador,peroloiremosexplicandoaunritmomuypausadodejandobienclaro quesloquehacemosencadamomento.Sitodavanohabisledoelapartadoanterior,quehabladelos elementosflotantesydelclearing,ahoraseraunbuenmomentoparahacerlo.
Vedtambin Podisverelapartado35deestemdulo.

Hay un tipo de composicin que es muy habitual en las pginas web. Incluye un encabezamiento, que normalmente contiene algn logotipo o insignia, bajo la que hay dos o ms "columnas" una al lado de la otra.Alfinalsuelehaberunpiedepginaqueocupatodalaanchura,quizconelavisodecopyrightola
mosaic.uoc.edu/ac/le/es/m6/ud10/index.html#relative 5/12

09/11/12

CSS Posicionamiento esttico y relativo con CSS

informacindecontacto.Lafigura7muestraunejemplodeestetipodecomposicin.

Figura7.Unacomposicintpicaconmltiplescolumnasentreun encabezamientoyunpiedepgina

EnlaEdadOscura(ladcadade1990),estetipodedistribucinsesolacrearcontablas.Estoesunuso inadecuadodeletiquetadodelHTMLparafinalidadespresentacionales,nadaaconsejableporlotanto,en este curso no lo ensearemos. CSS ofrece maneras de conseguir esto mismo con d s l y t b e c l y ipa:al-el similares,peroestasolucintieneuninconvenienteimportante:nohayningunaversindeInternetExplorer queloacepte,demodoquetampocolaveremos.Slonosquedandosopciones:loselementosflotantesy elposicionamientoabsoluto.Estosdosmtodostienenventajaseinconvenientes,perosiquerisunpiede pgina que ocupe toda la anchura y no sabis de entrada qu columna ser la ms larga, entonces necesitarisloselementosflotantesparagarantizarlaintegridaddeldiseo. Elproblemadeloselementosflotantesesqueslosedesplazanhacialaderechaolaizquierdahastaque tocanelbordedelbloquepadreuotroelementoflotante.Estoquieredecirquelascolumnasflotantesdeben aparecerenelordencorrectoeneletiquetado.Peroalgunasvecessequieretenerunordenpresentacional diferentedelordendelcdigofuente.Quizosinteresequeelcontenidoaparezcaantesdelanavegacin, porejemplo,conelfindemejorarlausabilidaddelanavegacinconeltecladoylaoptimizacinenmotores de bsqueda. Esto se puede conseguir, incluso con elementos flotantes, haciendo un buen uso de los mrgenesnegativosyelposicionamientorelativoveamoscmohacerlo.Empezaremosconundocumento HTMLquenosservirdebaseparairtrabajando. 1. Copiadelcdigosiguienteenvuestroeditordetextosyguardadelarchivoconelnombrel y u . t l aothm.
<DCYEhm PBI "/WC/T HM 40/E" !OTP tl ULC -/3/DD TL .1/N "tp/www.r/Rhm4src.t" ht:/w.3ogT/tl/titdd> <tlln=e" hm ag"n> <ed ha> <eaht-qi=CnetTp"cnet"ethm;castuf8> mt tpeuv"otn-ye otn=tx/tl hre=t-" <il>ttcadRltv Pstoig/il> tteSai n eaie oiinn<tte <ikrl"tlset tp=tx/s"he=lyu.s" ln e=syehe" ye"etcs rf"aotcs> <ha> /ed <oy bd> <i i=hae"Hae<dv dv d"edr>edr/i> <i i=mi"Mi cnet/i> dv d"an>an otn<dv <i i=sdbr>iea<dv dv d"iea"Sdbr/i> <i i=nv>aiain/i> dv d"a"Nvgto<dv <i i=foe"Foe<dv dv d"otr>otr/i> <bd> /oy <hm> /tl
mosaic.uoc.edu/ac/le/es/m6/ud10/index.html#relative 6/12

09/11/12

CSS Posicionamiento esttico y relativo con CSS

2. A continuacin, crearemos el embrin de una hoja de estilos. Copiad el cdigo siguiente en vuestro editordetextosyguardadelarchivoconelnombrel y u . s . aotcs
#edr{ hae bcgon-oo:#6; akrudclr 39 clr #f; oo: ff } #iea { sdbr bcgon-oo:#f; akrudclr f6 } #a { nv bcgon-oo:#d; akrudclr dd } #otr{ foe bre-o:1xsld#6; odrtp p oi 39 }

3. Guardadlosdosarchivosycargadlapginaenelnavegador.Lascincodivisionesaparecenenorden, dearribaabajo. Imaginaosqueeldepartamentodediseohaespecificadoquelanavegacindebeiralaizquierda,la barralateralaladerechayelcontenidoprincipalenlacolumnadeenmedio.Elencabezamientoyel piedepginadebenocupartodalaanchuradelapgina,peronosabemosculdelastrescolumnas ser la ms larga. El orden del cdigo fuente viene determinado por los expertos en accesibilidad y usabilidadynoesnegociable.Cmosepuedencombinartodosestosrequisitosparaconseguiruna composicinquefuncione? Paraquefuncione,deberisaadirunelementoadicionalaletiquetado.Esinevitable,perounelemento adicionalesalgoquenoosdeberapreocupardemasiado.Necesitarisunelementoqueenvuelvalas tres"columnas". 4. InsertadlasdoslneasdestacadaseneldocumentoHTML:
<i i=hae"Hae<dv dv d"edr>edr/i> <i i=wapr> dv d"rpe" <i i=mi"Mi cnet/i> dv d"an>an otn<dv <i i=sdbr>iea<dv dv d"iea"Sdbr/i> <i i=nv>aiain/i> dv d"a"Nvgto<dv <dv /i> <i i=foe"Foe<dv dv d"otr>otr/i>

Los diseadores (que, por suerte, son conscientes de la accesibilidad y de la independencia de dispositivo)hanestipuladoquelanavegacindebetenerunaanchurade12emylabarralateral,de14 em. La columna con el contenido principal debe tener una anchura fluida, de manera que la composicinseadapteadiferentestamaosdeventanas,yaquelascomposicionesconunaanchura fija no son demasiado fciles de utilizar por el usuario. Para evitar que las lneas de texto sean demasiadolargasydificultenlalegibilidad,deberislimitarlacomposicinaunaanchuramxima.Para evitar el solapamiento en ventanas sumamente estrechas, tambin deberis limitar la composicin a unaanchuramnima.Dentrodeestaslimitaciones,lacomposicinsedebecentrarhorizontalmenteen laventanadelnavegador. 5. A continuacin, asignad las anchuras a la navegacin y a la barra lateral y definid las limitaciones de anchurayelcentradogeneralaadiendolasreglassiguientesalfinaldelarchivoCSS:
bd{ oy mri:0at; agn uo mnwdh 4e; i-it: 0m mxwdh 5e; a-it: 6m } #iea { sdbr wdh 1e; it: 3m pdig 005m adn: .e; bcgon-oo:#f; akrudclr f6 } #a { nv wdh 1e; it: 1m pdig 005m adn: .e; bcgon-oo:#d; akrudclr dd
mosaic.uoc.edu/ac/le/es/m6/ud10/index.html#relative 7/12

09/11/12

CSS Posicionamiento esttico y relativo con CSS

6. Guardad los archivos y volved a cargarlos deberais ver la barra lateral amarilla y la navegacin de colorgrisconlasanchurasdeseadas.Silaventanadelnavegadoresbastanteancha,tambinveris quetodalapginatieneunaanchuralimitadayqueaparececentradahorizontalmente. 7. Intentadcambiareltamaodelaventanaymiradcmoseadaptalacomposicin. Nota Si utilizis la versin 6 o anterior de Microsoft Internet Explorer, no podris ver los efectosdeningunalimitacindelaanchura.EstoesasporqueestasversionesdelIE noaceptananchuras(oalturas)mnimasymximas.Alfinaldelejemploveremosuna maneradesolucionaresteproblema.Dehecho,alolargodetodoesteejemploiris viendo unos resultados extraos, incluso con IE 7, porque Internet Explorer tiene muchoserroresderepresentacin.Enesteejemplonoscentraremosenlamanerade hacerlascosassegnlosestndares,yalfinalyaveremoslassoluciones. Siobserviselcdigoconatencin,verisquelasanchurasestnfijadasen13emy11emenlugarde14 em y 12 em. Esto es as porque necesitamos un poco de separacin horizontal no queremos que el contenidodeestascolumnastoquelosbordes,yaquenoquedademasiadobien.Laseparacinseaadea laanchura,conlocual13em+0,5em+0,5emsumanuntotalde14em,queesloquequeremos. Crearcolumnas Muy bien, ahora ya tenemos los componentes bsicos, pero se muestran uno despus de otro. Como queremostrescolumnas,lasdeberemosempezarahacerflotar. 1. AadidlasreglassiguientesavuestroarchivoCSS:
#an{ mi fot lf; la: et } #iea { sdbr fot lf; la: et wdh 1e; it: 3m pdig 005m adn: .e; bcgon-oo:#f; akrudclr f6 } #a { nv fot lf; la: et wdh 1e; it: 1m pdig 005m adn: .e; bcgon-oo:#d; akrudclr dd }

Conestecdigosehacenflotarlascolumnas,s,peronosemuestranenelordencorrecto.Adems,la columnadelcontenidoprincipalesdemasiadoestrecha.Yquhapasadoconelpiedepgina? 2. Enprimerlugar,nosencargaremosdelpiedepgina.Elproblemaesquehemoshechoflotarlastres columnas,conloquehanquedadofueradelflujodeldocumento.Elpiedepginaquedajustodebajo delencabezamientoylacajadelneaquecontieneeltextosehaacortado,demaneraquelapalabra "Footer"aparecealaderechadeloselementosflotantes.Podemossolucionarlohaciendoqueelpiede pginaestaunaciertadistanciadetodaslascolumnasflotantes.Aadidlareglasiguienteavuestro archivoCSS:

#otr{ foe cer lf; la: et bre-o:1xsld#6; odrtp p oi 39 }

3. Yahoranosdedicaremosalastrescolumnas.Loharemospasoapaso,yduranteunmomentotodo tendrunaspectohorribleperonoosdesesperisporquealfinaltodoacabarbien. La clave es el elemento de envoltorio. Definiremos unos mrgenes izquierdo y derecho que se correspondanconlasanchurasdelascolumnaslaterales(lanavegacinylabarralateral).Lacolumna delcontenidoprincipalocupartodalaanchuradelenvoltorioylascolumnaslateralessedesplazarn hacia el espacio que dejan vaco los mrgenes. Suena complicado? No os preocupis, lo iremos
mosaic.uoc.edu/ac/le/es/m6/ud10/index.html#relative 8/12

09/11/12

CSS Posicionamiento esttico y relativo con CSS

haciendo poco a poco. En primer lugar definiremos los mrgenes del envoltorio aadiendo la regla siguientealarchivoCSS:
#rpe { wapr mri:01e 01e; agn 4m 2m pdig 01m adn: e; }

Recordad que los valores de la propiedad m r i abreviada se especifican en el orden agn TRaBaLenguas,esdecir: t p o (superior), r g t i h (derecho), b t o (inferior), l f (izquierdo).Definimos otm et losmrgenessuperioreinferiora0,elmargenderechoen14em(paralabarralateral)yelmargen izquierdo en 12 em (para la navegacin). Tambin hemos aadido 1 em de separacin horizontal porquenoqueremosqueelcontenidotoquelascolumnaslaterales,yaquedeberespirar. 4. El siguiente paso es hacer que la columna del contenido principal ocupe toda la anchura de su elemento envoltorio padre el cdigo tambin define un color de fondo chilln para esta columna, temporalmente:
#an{ mi fot lf; la: et wdh 10; it: 0% bcgon-oo:lm; akrudclr ie }

5. Guardad el archivo y volved a cargarlo veris una columna de contenido de color verde lima con la barralateralylanavegacindebajo.Tambinverisquehaymuchoespacioenblancoaamboslados. Lo que debemos hacer ahora es conseguir que nuestras columnas laterales se desplacen hacia este espacioenblanco. De momento, nos dedicaremos a la barra lateral, que es flotante y ya tiene la anchura correcta, pero como la columna # a n tiene una anchura del 100% la barra lateral se desplaza hacia abajo. Cmo mi podemos hacer que suba y se coloque al lado de # a nteniendo en cuenta que # a n ocupa toda la mi mi anchura? Lo haremos en dos pasos: en primer lugar, la moveremos hacia arriba y, despus, la desplazaremoshaciaelmargen. 6. Paraconseguirquelabarralateralflotante,quesehadesplazadohaciaabajo,vuelvaairhaciaarriba, utilizaremosuntrucomuyingenioso.Aadidlosiguientealaregla# i e a : sdbr
#iea { sdbr fot lf; la: et wdh 1e; it: 3m pdig 005m adn: .e; bcgon-oo: #f; akrudclr f6 mri-et -4m agnlf: 1e; }

7. Guardad,volvedacargaryverisquelabarralateralseencuentraahoraalamismaalturaverticalque la columna del contenido. Con un margen izquierdo negativo igual a la anchura de la barra lateral, estamos moviendo el elemento hacia el interior del envoltorio y ya no se desplaza hacia abajo. El problemaesquequedasobreelcontenido. 8. Deberisdesplazarlahaciaelmargensinquevuelvaairhaciaabajo,yaquesdondeentraenjuego finalmente el posicionamiento relativo. ste hace precisamente lo que queremos: desplaza la caja generada sin mover el elemento en s. Aadid las propiedades destacadas del cdigo siguiente a la reglapara# i e a : sdbr
#iea { sdbr fot lf; la: et wdh 1e; it: 3m pdig 005m adn: .e; bcgon-oo:#f; akrudclr f6 mri-et -4m agnlf: 1e; psto:rltv; oiin eaie lf:1e; et 5m }

Observadquehemostenidoquedesplazarelelemento15em,yno14em.Estoesasporqueenel envoltoriohay1emdeseparacinaladerechaqueesnecesarioquesuperemos.Labarralateralya
mosaic.uoc.edu/ac/le/es/m6/ud10/index.html#relative 9/12

09/11/12

CSS Posicionamiento esttico y relativo con CSS

seencuentraenellugardondedebeestar:haciaelmargen,alladodelacolumnadelcontenidoybien alineadaconlosbordesderechosdelencabezamientoyelpiedepgina. 9. Ahora debis hacer lo mismo con la navegacin el procedimiento es similar, pero hay un pequeo detalle que debis tener en cuenta. Mover y desplazar la barra lateral ha sido fcil porque los movimientos eran bsicamente los mismos que la anchura de la columna: un margen negativo de 14 emyundesplazamientode14em+1emhacialaderecha.Perolacolumnadelanavegacinsedebe mover por encima de la columna del contenido y entonces todava se debe desplazar ms hacia el margen. Aqunuestrosaliadossernlosporcentajes.Unvalordeporcentajeenlosmrgenesdelacolumnade la navegacin ser relativo a la anchura de su padre, el envoltorio. Como queris mover la columna hasta el extremo del envoltorio, aadid la propiedad destacada del cdigo siguiente a la regla para #a: nv
#a { nv fot lf; la: et wdh 1e; it: 1m pdig 005m adn: .e; bcgon-oo:#d; akrudclr dd mri-et -0% agnlf: 10; }

10. Yalotenemos!Guardad,volvedacargaryverislanavegacinsobrelaparteizquierdadelacolumna del contenido. Todo lo que debis hacer es desplazarla hacia el margen. Aadid las siguientes propiedadesresaltadasalareglapara# a : nv
#a { nv fot lf; la: et wdh 1e; it: 1m pdig 005m adn: .e; bcgon-oo:#d; akrudclr dd mri-et -0% agnlf: 10; psto:rltv; oiin eaie rgt 1e; ih: 3m }

Aqu tambin la anchura de la navegacin es de 12 em, pero tenemos 1 em de separacin del envoltorio que debemos superar, por lo que es necesario que desplacemos la caja 13 em. Lo estis desplazando hacia la izquierda, es decir, desde el borde derecho, y por ello utilizamos la propiedad rgt ih. 11. Eliminadelfondodecolorverdelimadelacolumnadelcontenidoyyalotendristodo. SolucionarlosproblemasconInternetExplorer Hay dos propiedades de esta composicin que hacen que no funcione bien con Internet Explorer 6 para Windows. Uno de los problemas es que IE 6 no acepta las propiedades m n w d h (anchura mn.) y m x i-it awdh i t (anchuramx.)yelotroesqueIEesmuymaloconlosporcentajes. Para emular las restricciones de anchura, podis utilizar la notacin e p e s o ( exclusiva de Microsoft. xrsin) Toma una expresin de JScript como argumento y proporciona el valor de retorno de esta expresin. Si exigehacermuchosclculos,estaexpresinpuedeprovocarproblemasderendimiento,yaquesecalcula cadavezqueelnavegadordebedefinirlaanchurade b d .TambinexigequeJScriptestactivado,pero oy podisaadirunadegradacinmuyelegante,demaneraquesi,porejemplo,JScriptnoestdisponible,el diseorecurriraunaalternativaqueseguirsiendoutilizable.Enesteejemploharisquelamaquetacin sea totalmente elstica en lugar del diseo fluido limitado que hemos creado antes si JScript est desactivado. La manera recomendada de utilizar reglas de estilos para solucionar problemas en Internet Explorer es utilizando los "comentarios condicionales". sta es una funcin nica de Microsoft que integra lgica condicional en los comentarios del HTML (hay un apartado dedicado exclusivamente a los comentarios condicionalesendev.opera.com). 1. AadidlaslneassiguientesenelcdigoHTMLjustoantesdelaetiqueta< h a > /ed:
<-[fleI 6> !-i t E ] <ikrl"tlset tp=tx/s"he=lyu-e.s" ln e=syehe" ye"etcs rf"aoti6cs>
mosaic.uoc.edu/ac/le/es/m6/ud10/index.html#relative 10/12

09/11/12

CSS Posicionamiento esttico y relativo con CSS

<[ni]!edf->

2. Ahoracreadunarchivonuevoconelnombrel y u - e . s quecontengalosiguiente: aoti6cs

bd{ oy wdh 5e; it: 0m wdh epeso(=ouetdcmnEeetofeWdh it: xrsinwdcmn.ouetlmn.fstit, e=ouetgtlmnBI(nv)ofeWdh1, mdcmn.eEeetyd"a".fstit/2 (<0e?4e"(>6e?5e""uo)) w4*m"0m:w5*m"6m:at"); } #rpe { wapr hih:1m egt e; } #a { nv mri-et -2m agnlf: 2e; mri-et epeso(-dcmn.eEeetyd"rpe". agnlf: xrsin((ouetgtlmnBI(wapr) cinWdh)"x) letit)+p"; lf:1e; et 3m }

As se solucionan los dos problemas de IE 6. Utilizamos expresiones JScript para emular las propiedades m n w d h y m x w d h que IE 6 no acepta, con un valor alternativo elstico de 50 em. A continuacin i-it a - i t , utilizamos otra expresin JScript para definir un margen izquierdo en pxeles en lugar de porcentajes, tambin con un valor alternativo elstico. La altura para # r p e es slo para habilitar la propiedad wapr hsaot a L y u especficadeMicrosoft,quenecesitamosparaqueelposicionamientorelativodelanavegacin funcionecorrectamente.Microsofthadocumentadoh s a o t a L y u enlaMSDN,peronoesprecisamentefcilde entender. Y qu sucede con IE 7? S acepta m n w d h y m x w d h pero sigue situando mal el elemento de la i-it a - i t , navegacin es el mismo problema de h s a o t de IE 6 que vuelve a asomar la cabeza. Debis habilitar aLyu h s a o t en el elemento # r p e . Por suerte, podis hacerlo de manera que no comprometa a los aLyu wapr navegadores conformes con los estndares, o sea que no ser necesario que creis una hoja de estilos diferenteparaIE7podisaadirsencillamentelareglasiguienteparamanipularelenvoltorio:
#rpe { wapr mri:01e 01e agn 4m 2m pdig 01m adn: e; mnhih: 1m i-egt e; }

Ladefinicindeunaalturamnimahabilita h s a o t a L y u ynoprovocaningnproblemaenotrosnavegadores, esdecir,lopodisponerenlahojadeestilosprincipal. Estassolucionesnosonperfectassieltamaodelaventanasemodificaendeterminadasdimensiones,la composicin seguir haciendo cosas raras en IE 6 e IE 7, aunque si se vuelve a cargar la pgina, la composicinquedarbienotravez. 36.3.2.Otrosusosdelposicionamientorelativo El uso ms habitual del posicionamiento relativo no implica desplazar la caja generada. Esto puede sonar extrao: por qu deberais utilizar el posicionamiento relativo sin desplazar la caja? Explicaremos esta razn en el apartado siguiente porque tambin tiene que ver con el posicionamiento absoluto. As pues, deberisesperarunpoco. Definir p s t o : e a i e (sin desplazar la caja) tambin puede ser til con algunos problemas de oiinrltv representacin extraos de Internet Explorer. Activa la famosa propiedad interna h s a o t que tiene un a L y u , impactomuyimportanteenlarepresentacinquehaceInternetExplorerdeloselementos.

Resumen
Elposicionamientoestticoeslamanerapordefectodehacerlascosas.Lascajasdebloquesedistribuyen verticalmente segn el orden en el que aparecen en el cdigo fuente, mientras que las cajas en lnea se distribuyenhorizontalmenteencajasenlneadentrodeestascajasdebloque. Elposicionamientorelativopermitedesplazarlacajageneradaenunaodosdimensiones.Elelementosigue ocupando espacio como si fuera esttico, pero la caja generada se puede desplazar a otra posicin. El posicionamiento relativo se utiliza principalmente mosaic.uoc.edu/ac/le/es/m6/ud10/index.html#relative en combinacin con elementos flotantes para crear
11/12

09/11/12

CSS Posicionamiento esttico y relativo con CSS

posicionamiento relativo se utiliza principalmente en combinacin con elementos flotantes para crear composicionesenlasqueelordendelapresentacinesdiferentedelordendelcdigofuente.

Preguntasderepaso
Preguntasalasquedeberaispoderresponder: 1. Qusucedecuandodosmrgenesadyacentesdeuncontextodeformatoestticosesuperponeny unooambosmrgenessonnegativos? 2. Aadidunbordeverticalentrecadaunadelascolumnaslateralesylacolumnadelcontenidoprincipal. Recordad que las tres columnas son flotantes, con lo cual la altura del elemento de envoltorio ha pasadoasercero. 3. Cmopodishacerquetodaslascolumnastenganlamismaaltura(oquecomomnimoloparezca), demaneraqueloscoloresdefondolleguenhastaelpiedepginaseacualsealacolumnamslarga? (Consejo:buscad"fauxcolumns"envuestromotordebsquedapreferido.)

LoscontenidosrecogidosenesteartculoestnsujetosaunalicenciaCreativeCommons Reconocimiento,NocomercialCompartirbajolamismalicencia3.0Noadaptada.

mosaic.uoc.edu/ac/le/es/m6/ud10/index.html#relative

12/12