. Hay que ajustar en función al tamaño final de fuente. */ .twoColElsLtHdr #container { width: 750px; background: #FFFFFF; margin: 0 auto; /* los márgenes automáticos, junto con el ancho, centran la página */ text-align: left; } .twoColElsLtHdr #header { background: url(../../img/img_fondo_cabecera.gif); height: 140px; padding: 0; margin: 0; } .twoColElsLtHdr #header h1 { font: 'Lucida Grande', Geneva, Arial, Verdana, sans-serif; color: #7C90A3; margin: 0; /* poner a cero el margen del último elemento en la capa #header evitará el colapso de los márgenes (un espacio inexplicable entre divs). Si el div tiene un borde alrededor, esto no es necesario ya que eso también evita el colapso de los márgenes. */ padding: 0; /* Usar "padding" en vez de "margin" permite mantener el elemento lejos de los bordes de un

*/ } .twoColElsLtHdr #header h2 { font: 'Lucida Grande', Geneva, Arial, Verdana, sans-serif; color: #7C90A3; margin: 0; padding: 0; } /* Comentarios para sidebar1: 1. Si se ajusta un "font-size" para este div, el ancho global del div se ajustará de acuerdo a él. 2. Si se trabaja en "ems", es mejor no usar "padding" en "sidebar", ya que se añadiría un espacio, creando un ancho de medidas desconocidas (en función del navegador que la interpretara). 3. El espacio entre el lado del div y los elementos interiores (del propio div) puede ser creado colocando un margen derecho e izquierdo en esos elementos, como se ve en la regla ".twoColElsLtHdr #sidebar1 p". */ .twoColElsLtHdr #sidebar1 h3, .twoColElsLtHdr #sidebar1 p { margin-left: 10px; /* Deben darse márgenes izquierdo y derecho a cada elemento que se coloque en las columnas laterales */ margin-right: 10px; } #sidebar1 a { font: 75% 'Lucida Grande', Geneva, Arial, Verdana, sans-serif; color: #0066FF; text-decoration: none; font-weight: normal; } #sidebar1 a:hover { font: 75% 'Lucida Grande', Geneva, Arial, Verdana, sans-serif; text-decoration: underline; color: #0F7AD1; font-weight: normal; } .hr { border: none 0; border-top: 1px dotted #FFFFFF; width: 100%; height: 1px; margin: 10px 0px 0px 0px; } .hr2 { border: none 0; border-top: 1px #FFFFFF; width: 100%; height: 1px; } .alignright { margin: 10px 6px 2px 1px; display: inline; } .alignlast { padding: 0px; margin: 10px 1px 2px 0px; display: inline; } /* Comentarios para mainContent: 1. Si se le asigna al div #mainContent un valor de font-size diferente a #sidebar1 div, los márgenes del div #mainContent se basarán en ese font-size y el ancho del div #sidebar1 se basará también en el mismo. Se deben ajustar los valores de estos divs. 2. El espacio entre el "mainContent" y el "sidebar1" se crea con el margen izuierdo del div "mainContent". No importa cuánto contenido albergue el div "sidebar1", el espacio de la columna permanecerá igual. Se puede eliminar este margen izquierdo si se quiere que el texto del div #mainContent encaje en el espacio del #sidebar1 cuando el contenido en el #sidebar1 acabe. 3. Para evitar el "float drop", se debe comprobar el tamaño máximo aproximado de un elemento/imagen, ya que este div se basa en el tamaño de fuente del usuario (el que ve la página) combinado con los valores que se le den aquí. Sin embargo, si el usuario tiene su navegador con un tamaño de fuente inferior al normal, habrá menos espacio disponible del que se verá en la comprobación en el div #mainContent. 4. En el comentario de condición de Internet Explorer siguiente, la propiedad de zoom se usa para dar a mainContent "hasLayout." Esto evita multitud de errores específicos de IE. */ .twoColElsLtHdr #sidebar1TD h3, .twoColElsLtHdr #sidebar1TD p { margin-left: 10px; /* Deben darse márgenes izquierdo y derecho a cada elemento que se coloque en las columnas laterales */ margin-right: 10px; } #sidebar1TD a { font: 75% 'Lucida Grande', Geneva, Arial, Verdana, sans-serif; color: #0066FF; text-decoration: none; font-weight: normal; } #sidebar1TD a:hover { font: 75% 'Lucida Grande', Geneva, Arial, Verdana, sans-serif; text-decoration: underline; color: #0F7AD1; font-weight: normal; } .twoColElsLtHdr #mainFotoTD { margin: 1.5em 1.5em 0 0.5em; background: #FFFFFF; } .twoColElsLtHdr #mainTextoTD h1 { margin: 0; padding: 0; font-weight: normal; font-size: 1.5em; line-height: 100%; color: #FFFFFF; font: 'Lucida Grande', Geneva, Arial, Verdana, sans-serif; } .twoColElsLtHdr #mainTextoTD h2 { margin: 0; padding: 0; font-weight: normal; font-size: 1,1em; line-height: 110%; color: #FFFFFF; margin-top: 0.2cm; font: 'Lucida Grande', Geneva, Arial, Verdana, sans-serif; } .twoColElsLtHdr #mainTextoTD h3 { font-weight: normal; font-size: 1.1em; color: #FFFFFF; margin-top: 0.1cm; font: 'Lucida Grande', Geneva, Arial, Verdana, sans-serif; } .twoColElsLtHdr #mainTextoTD p { font-weight: normal; font-size: 90%; color: #FFFFFF; font: 'Lucida Grande', Geneva, Arial, Verdana, sans-serif; } .twoColElsLtHdr #mainTextoTD ul { list-style-type: disc; font-weight: normal; font-size: 90%; color: #FFFFFF; font: 'Lucida Grande', Geneva, Arial, Verdana, sans-serif; } .twoColElsLtHdr #mainTextoTD img { float:left; margin: 0px 15px 20px 0px; } .twoColElsLtHdr #mainTextoTD { margin: 0 1.5em 0 0.5em; background: #7C90A3; padding: 15px; color: #FFFFFF; } .twoColElsLtHdr #mainTexto2TD { margin: 0 1.5em 0 0.5em; background: #FFFFFF; padding: 15px; } .twoColElsLtHdr #mainTexto2TD h1 { margin: 0; padding: 0; font-weight: normal; font-size: 1.5em; line-height: 100%; margin: 0; color: #7C90A3; font: 'Lucida Grande', Geneva, Arial, Verdana, sans-serif; } .twoColElsLtHdr #mainTexto2TD h2 { margin: 0; padding: 0; font-weight: normal; font-size: 1.5em; line-height: 110%; color: #000000; font: 'Lucida Grande', Geneva, Arial, Verdana, sans-serif; } .twoColElsLtHdr #mainTexto2TD h3 { font-weight: normal; font-size: 1.1em; color: #000000; font: 'Lucida Grande', Geneva, Arial, Verdana, sans-serif; margin-top: 0.1cm; } .twoColElsLtHdr #mainTexto2TD p { font-weight: normal; font-size: 90%; color: #000000; font: 'Lucida Grande', Geneva, Arial, Verdana, sans-serif; } .twoColElsLtHdr #mainTexto2TD a { color: #0F7AD1; text-decoration: none; } .twoColElsLtHdr #mainTexto2TD a:hover { text-decoration: underline; color: #0F7AD1; } .twoColElsLtHdr #mainTexto2TD img { float:left; margin: 0px 15px 0px 0px; } .twoColElsLtHdr #mainFoto { margin: 1.5em 1.5em 0 17em; background: #FFFFFF; } .twoColElsLtHdr #mainTexto { margin: 0 1.5em 0 17em; background: #7C90A3; padding: 15px; } .twoColElsLtHdr #mainTexto h1 { margin: 0; padding: 0; font-weight: normal; font-size: 2em; line-height: 95%; margin: 10px 0; color: #FFFFFF; font: 'Lucida Grande', Geneva, Arial, Verdana, sans-serif; } .twoColElsLtHdr #mainTexto h2 { margin: 0; padding: 0; font-weight: normal; font-size: 1,1em; line-height: 110%; color: #FFFFFF; font: 'Lucida Grande', Geneva, Arial, Verdana, sans-serif; } .twoColElsLtHdr #mainTexto h3 { font-weight: normal; font-size: 1em; color: #FFFFFFF; font: 'Lucida Grande', Geneva, Arial, Verdana, sans-serif; } .twoColElsLtHdr #mainTexto p { font-weight: normal; font-size: 90%; color: #FFFFFF; font: 'Lucida Grande', Geneva, Arial, Verdana, sans-serif; } .twoColElsLtHdr #mainTexto ul { list-style-type: disc; font-weight: normal; font-size: 90%; color: #FFFFFF; font: 'Lucida Grande', Geneva, Arial, Verdana, sans-serif; } .twoColElsLtHdr #mainTexto img { float:left; margin: 0px 15px 0px 0px; } .twoColElsLtHdr #mainTexto2 { margin: 0 0em 0 17em; background: #FFFFFF; padding: 15px; } .twoColElsLtHdr #mainTexto2 h1 { margin: 0; padding: 0; font-weight: normal; font-size: 2em; line-height: 95%; margin: 10px 0; color: #7C90A3; font: 'Lucida Grande', Geneva, Arial, Verdana, sans-serif; } .twoColElsLtHdr #mainTexto2 h2 { margin: 0; padding: 0; font-weight: normal; font-size: 1.5em; line-height: 110%; color: #000000; font: 'Lucida Grande', Geneva, Arial, Verdana, sans-serif; } .twoColElsLtHdr #mainTexto2 h3 { font-weight: normal; font-size: 1em; color: #000000; font: 'Lucida Grande', Geneva, Arial, Verdana, sans-serif; } .twoColElsLtHdr #mainTexto2 p { font-weight: normal; font-size: 90%; color: #000000; font: 'Lucida Grande', Geneva, Arial, Verdana, sans-serif; } .twoColElsLtHdr #mainTexto2 a { color: #0F7AD1; text-decoration: none; } .twoColElsLtHdr #mainTexto2 a:hover { text-decoration: underline; color: #0F7AD1; } .blancoNegrita { font-weight: bold; font-size: 1em; color: #FFFFFF; font: 'Lucida Grande', Geneva, Arial, Verdana, sans-serif; } /* Pie de página */ .twoColElsLtHdr #footer { background: #FFFFFF; font-size: 10px; border-top: 5px solid #E1E1E1; padding-top: 1em; text-align: center; color: #E1E1E1; } .twoColElsLtHdr #footer p { margin: 0; /* Poner a 0 los márgenes del primer elemento en el "footer" evita la posibilidad de un colapso en los márgenes (un espacio entre divs) */ padding: 10px 0; text-align: center; /* hacer un padding en este elemento creará espacio tal y como el margen tendría, sin el problema del colapso */ } /* Misc */ .desplegable { font-weight: normal; font-size: 85%; border: 1px solid #FFFFFF; color: #FFFFFF; font: 'Lucida Grande', Geneva, Arial, Verdana, sans-serif; background: #0F7AD1; } .h2 { font: 'Lucida Grande', Geneva, Arial, Verdana, sans-serif; color: #7C90A3; } /* Copyright */ .registro #reg { padding: 0 20px; /* este "padding" ajusta la alineación izquierda de los elementos en los divs que aparecen sobre él */ background: #FFFFFF; } .registro fuente #reg p { text-align: center; font-size: 70%; color: #666666; } div.clearer { clear: both; display: block; margin: 0; padding: 10px; height: 0; line-height: 1px; font-size: 1px; } /* Enlaces */ #links { font-size: 10px; color: #0066FF; border-bottom: 1px solid #0F7AD1; text-align: center; } #links a { color: #0066FF; text-decoration: none; } #links a:hover { text-decoration: underline; color: #0F7AD1; text-align: center; } .enlace { font-size: 12px; color: #0F7AD1; text-decoration: none; } .enlace:hover { font-size: 12px; color: #0F7AD1; text-decoration: underline; }