IExplorder me pone el color de fondo ENCIMA

Citar

Escrito el 23 May 2008 02:36 pm

Esto es algo que no soy capaz de entender: tengo una lista desordenada, quiero ponerle una imagen de fondo a cada elemento de lista... y se queda la imagen encima del texto, tapándolo. ¡¡Help!!

Por Juanlu_001

Claber

690 de clabLevel

6 tutoriales

Envíale un mensaje privado Email Web

@Juanlu001

Citar

Escrito el 23 May 2008 02:49 pm

Ese no es el comportamiento normal, desde luego.
Pon ejemplo, o lee este consejo.

Por El Oso Amoroso

Claber

1780 de clabLevel

6 tutoriales

Envíale un mensaje privado

Madrid, España, Europa, Eurasia, La Tierra, Sist.Solar, Vía Láctea, UNIVERSO

Citar

Escrito el 23 May 2008 03:12 pm

Ah OK ya lo arreglé, puse para el texto del elemento de lista un valor cualquiera de "position", y se solucionó :-P

Por Juanlu_001

Claber

690 de clabLevel

6 tutoriales

Envíale un mensaje privado Email Web

@Juanlu001

Citar

Escrito el 23 May 2008 04:32 pm

Juanlu_001 escribió:

Ah OK ya lo arreglé, puse para el texto del elemento de lista un valor cualquiera de \"position\", y se solucionó :-P

? Creo que esa no es buena práctica Juanlu_001, lo mejor es leer sobre las bases del CSS y entender el porqué del problema, es la mejor forma de avanzar en tu aprendizaje.

Por Darel

725 de clabLevel

5 tutoriales

Envíale un mensaje privado Email

I'm a human

@Darel

Citar

Escrito el 23 May 2008 04:50 pm

Jarl, a mí me parecía una solución excelente... Pero bueno, estoy abierto a sugerencias sobre por qué se queda el fondo por encima del texto...

Por Juanlu_001

Claber

690 de clabLevel

6 tutoriales

Envíale un mensaje privado Email Web

@Juanlu001

Citar

Escrito el 23 May 2008 04:54 pm

Haciendo caso a rizome, pongo el código de esa sección de la página (ya sé que parece caótico y horrible, pero hay sus motivos) ((creo)):

Código :

<div id=\"links\">
         <ul>
            <li><div class=\"enlace\"><a href=\"\">Inicio</a></div><div class=\"seccion actual\"> </div><div class=\"clear\"></div></li>
            <li><div class=\"enlace\"><a href=\"\">¿Quiénes somos?</a></div><div class=\"seccion normal\"> </div><div class=\"clear\"></div></li>
            <li><div class=\"enlace\"><a href=\"\">¿Qué hacemos?</a></div><div class=\"seccion normal\"> </div><div class=\"clear\"></div></li>
            <li><div class=\"enlace\"><a href=\"\">¿Cómo llegar?</a></div><div class=\"seccion normal\"> </div><div class=\"clear\"></div></li>
            <li><div class=\"enlace wrap\"><a href=\"\">Métodos diagnósticos</a></div><div class=\"seccion normal\"> </div><div class=\"clear\"></div></li>
            <li><div class=\"enlace\"><a href=\"\">Cuadro médico</a></div><div class=\"seccion normal\"> </div><div class=\"clear\"></div></li>
            <li><div class=\"enlace wrap\"><a href=\"\">Sociedades colaboradoras</a></div><div class=\"seccion normal\"> </div><div class=\"clear\"></div></li>
            <li><div class=\"enlace\"><a href=\"\">Contacto</a></div><div class=\"seccion normal\"> </div><div class=\"clear\"></div></li>
         </ul>
      </div>

El de la parte de la hoja de estilos principal que controla esos elementos:

Código :

#links ul li {
   font-weight: bold;
   font-size: 13pt;
   list-style: none;
   text-transform: uppercase;
   margin-bottom: 5px;
   margin-left: -20px;
   background: #82B1ED url(../images/fondo_links.jpg) repeat-x;
}

Y la regla que usé para solucionar el problema en una hoja para IE:

Código :

#links ul li .enlace{
   position: absolute;
}

That\'s all, Folks.

Por Juanlu_001

Claber

690 de clabLevel

6 tutoriales

Envíale un mensaje privado Email Web

@Juanlu001

Citar

Escrito el 23 May 2008 04:55 pm

Y si no aquí está la página, demonios

http://www.betasalud.es/prelim.php

Por Juanlu_001

Claber

690 de clabLevel

6 tutoriales

Envíale un mensaje privado Email Web

@Juanlu001

Citar

Escrito el 23 May 2008 05:45 pm

Cuando pongáis ejemplos, por favor, que sean ejemplos completos, y que realmente ilustren el problema.
He copiado el código, y no veo ninguna diferencia...

Código :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
#links ul li {
   font-weight: bold;
   font-size: 13pt;
   list-style: none;
   text-transform: uppercase;
   margin-bottom: 5px;
   margin-left: -20px;
   background: #82B1ED url('http://www.cristalab.com/images/header/logo.png?ponnies') repeat-x;
}
</style>
</head>
<body>
<div id="links">
         <ul>
            <li><div class="enlace"><a href="">Inicio</a></div><div class="seccion actual"> </div><div class="clear"></div></li>
            <li><div class="enlace"><a href="">¿Quiénes somos?</a></div><div class="seccion normal"> </div><div class="clear"></div></li>
            <li><div class="enlace"><a href="">¿Qué hacemos?</a></div><div class="seccion normal"> </div><div class="clear"></div></li>
            <li><div class="enlace"><a href="">¿Cómo llegar?</a></div><div class="seccion normal"> </div><div class="clear"></div></li>
            <li><div class="enlace wrap"><a href="">Métodos diagnósticos</a></div><div class="seccion normal"> </div><div class="clear"></div></li>
            <li><div class="enlace"><a href="">Cuadro médico</a></div><div class="seccion normal"> </div><div class="clear"></div></li>
            <li><div class="enlace wrap"><a href="">Sociedades colaboradoras</a></div><div class="seccion normal"> </div><div class="clear"></div></li>
            <li><div class="enlace"><a href="">Contacto</a></div><div class="seccion normal"> </div><div class="clear"></div></li>
         </ul>
      </div>
</body>
</html>

Los 'hacks', a mi no me gusta ponerlos en hoja aparte... sino en el sitio donde corresponden.
En cualquier caso, no veo que en este caso, sea necesario.

Pero vamos, repito: no veo diferencia alguna...

(click para ampliar)

Por El Oso Amoroso

Claber

1780 de clabLevel

6 tutoriales

Envíale un mensaje privado

Madrid, España, Europa, Eurasia, La Tierra, Sist.Solar, Vía Láctea, UNIVERSO

Citar

Escrito el 23 May 2008 05:49 pm

Hay muchas etiquetas inecesarias en tu HTML. Precisamente una de la ventajas de CSS es dejar el código HTML lo más limpio posible. Bastaría con que declararas una sóla clase para la lista desordenada y a aprtir de allí aplicar estilos a los elementos en su interior. Esta sería una sugerencia:

Código :

ul.menu{
   width:200px; /*Ancho del menú completo, la misma lista ordenada equivaldría a tu div#link, resultando este último inecesario*/
   height:auto;
}
ul.menu li{
   width:100%;
   background:#FF9900; /*Este fondo sería es que cambiarías dependiendo si es la sección actual o no*/
   margin-bottom:5px; /*Espaciado vertical entre los elementos del menu*/
   padding-right:15px; /* Simulación del área que se colorea si es la sección actual, el cual será del color marcado en la propiedad background*/
}
ul.menu li a{
   width:100%;
   background:url(gradient.jpg) top center repeat-x; /* imagen azul degradada.*/
   color:#000000;
   display:block;
   line-height:30px; /* Alto de los elementos del menu*/
   vertical-align:middle;
   font-size:12px;
   text-decoration: none;
   border-right:2px solid #000000; /* Borde negro a la derecha del texto*/
}

He aquí cómo se vería el HTML:

Código :

<ul class="menu">
       <li><a href="">Inicio</a></li>
        <li><a href="">¿Quienes Somos?</a></li>
        <li><a href="">¿Qué hacemos?</a></li>
        <li><a href="">¿Cómo llegar?</a></li>
    </ul>

Por Darel

725 de clabLevel

5 tutoriales

Envíale un mensaje privado Email

I'm a human

@Darel

Citar

Escrito el 23 May 2008 08:35 pm

Mmmm Darel me acabas de dar una idea muy buena... No se me había ocurrido hacerlo de esa manera, muchas gracias

Por Juanlu_001

Claber

690 de clabLevel

6 tutoriales

Envíale un mensaje privado Email Web

@Juanlu001

IExplorder me pone el color de fondo ENCIMA

Escribe una respuesta rapida