[SOLUCIONADO] Cómo solucionar este efecto extraño en CSS!

berkeleyPunk · #1 (**permalink**) 28/03/2013, 16:20

Buen día señores. El extraño que me hace CSS es el siguiente. Tengo un menú desplegable y un poco más abajo hay un párrafo que contiene varios spans.
Cuando desplego el menú y muevo el cursor sobre la lista desplegada, ésta desaparece exactamente a la altura de los spans, como si éstos o uno de ellos se interpusiera y no dejara recorrer completa la lista desplegada. ¿Por qué?

He aquí el HTML (es mucho pero lo pongo todo para que no pierdan detalle):

Código HTML:

Ver original<body>
  <div id="header">
    <center>
    <ul id="ul_principal">
      <li id="cero" class="radius_1">biografía</li>
      <li id="cero">educación
        <ul>
          <li id="small">preescolar  </li>
          <li id="small">primaria    </li>
          <li id="small">secundaria  </li>
          <li id="small">técnico     </li>
          <li id="small">bachillerato</li>
          <li id="small">licenciatura</li>
        </ul>
      </li>  
      <li id="cero">logros</li>
      <li id="cero">conocimientos
        <ul>
          <li id="small">programación</li>
          <li id="small">otros       </li>
        </ul>
      </li>  
      <li id="cero">laboral</li>
      <li id="cero" class="radius_2">contacto</li>
    </ul>
    </center>
  </div>
 
  <div id="content">
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <center>
    <p>
    Nací al final de la década de <span id="span1">1970<span id="fondo1"><span id="fondo2">La Real Academia de la Lengua Española indica que la forma correcta de anunciar una década es la mencionada, y no: "Los setentas".</span></span></span>, en el sur de la Ciudad de México. Viví los primeros 28 años allí hasta que nació mi hija (ahora con 5 años),
    y desde entonces vivo al oriente de la misma ciudad. Tengo una carrera en el area de humanidades. Como esta carrera prácticamente no tiene campo
    laboral...  
    </p>
    </center>
  </div>
 
  <div id="footer">
  </div>
 
</body>

Y aquí el CSS (es mucho, pero lo puse todo para que no pierdan detalle):

Código CSS:

Ver original<style type="text/css">
 
//  #header, #footer y #content forman el LAYOUT principal.
 
#header, #footer {
    width:100%;
    height:110px;
    background-color:white;}
#content {
    height:400px;
    width:100%;
    background-color:white;}
p {
    position:relative;
    top:0px;
    left:0px;
    width:650px;
    font-size:18px;
    line-height:40px;
    color:#666;
    text-align:justify;}
    
    
// Lo siguiente formatea el menú.
 
ul {
    position:relative;
    top:0px;
    left:0px;
    list-style-type:none;}  
#ul_principal {
    position:relative;
    top:50px;
    left:auto;
    width:912px;
    height:auto;
    list-style-type:none;
    margin:0px auto;}
li {
    font-size:20px;
    font-family:Freestyle Script;
    width:150px;
    height:50px;
    line-height:45px;
    background-color:#666;
    color:#FFF;
    text-align:center;
    border:1px solid white;
    list-style-type:none;}
li ul {display:none;}
#cero {float:left;}
#small {font-size:16px;}
.radius_1 {border-radius:20px 0px 0px 20px;}
.radius_2 {border-radius:0px 20px 20px 0px;}
li:hover {
    color:#0F0;
    cursor:pointer;}
li:hover ul {
    display:block;
    position:relative;
    top:5px;
    left:-41px;}
    
// Lo siguiente formatea los span para convertirlos en POP-UP'S.
 
#span1 {
    position:relative;
    color:red;
    cursor:pointer;}
#fondo1 {
    display:none;
    position:absolute;
    top:-130px;
    left:250px;
    width:250px;
    height:150px;
    background-color:#39C;
    border-radius:20px 0px 20px 0px;
    box-shadow:black 10px 10px 10px;}
#fondo2 {
    display:none;
    position:absolute;
    top:10px;
    left:10px;
    width:210px;
    height:110px;
    background-color:#36C;
    border-radius:15px 0px 15px 0px;
    box-shadow:inset white 5px 5px 5px, inset white -5px -5px 5px;
    font-size:14px;
    line-height:20px;
    color:white;
    padding:10px;}
#span1:hover span {display:block;}  
#span1:hover span span {display:block;} 
</style>

pzin · #2 (**permalink**) 28/03/2013, 16:52

Cuando tu código está lleno de errores lo raro no suele serlo tanto.

Usas etiquetas obsoletas, repites ID's en el documento... Luego tampoco me extrañaría que esos comentarios también los tengas en el código —ya que también estarían mal.

berkeleyPunk · #3 (**permalink**) 28/03/2013, 17:40

Cita:

Iniciado por Bonez

Cuando tu código está lleno de errores lo raro no suele serlo tanto.

Usas etiquetas obsoletas, repites ID's en el documento... Luego tampoco me extrañaría que esos comentarios también los tengas en el código —ya que también estarían mal.

En verdad me hiciste reír con eso de los errores,

, pero no por burlarme, sino porque tienes razón! Voy a reeditar el CSS para no repetir los ID's. Nunca pensé que interfirieran, los repito para asignar determinado estilo a dichos elementos, a lo mejor lo más correcto es asignarles una misma clase en vez del mismo ID.

Sólo un comentario más, y espero que no lo tomes mal amigo BONEZ, que por ser duro pero justo una vez aquí mismo en FOROS DEL WEB se me hecharon todos encima. Se entiende que quien pregunta no sabe o sabe medio mal, así que se agradecería mucho que fueras más preciso en tus comentarios, por ejemplo en eso de las etiquetas obsoletas.

berkeleyPunk · #4 (**permalink**) 28/03/2013, 21:26

He reeditado el HTML y CSS presentado más arriba. El compañero BONEZ tenía toda la razón: TODO EL CÓDIGO era un desastre.
Lo extraño no era el efecto raro que yo vi en un primer momento, lo extraño era que medio funcionara el código!

Lista de errores (al menos los que advertí):
1. asignar el mismo ID a múltiples elementos HTML. Lo hice así porque pretendía asignar a todos los elementos con ese ID cierto diseño. Pero al parecer la idea de un ID no es esa, sino asingar un identificador único a un elemento. Para hacer lo que yo quería hacer, debe emplearse una CLASE.
2. incluir diseño en HTML (como la etiqueta CENTER). La idea fundamental de CSS es separar el contenido del diseño, así que si nos vemos en la necesidad de centrar, hay que centrar con CSS.
3. ¡Los comentarios! los puse originalmente con la etiqueta //. Hace tiempo que no programaba, y medio recordé que los comentarios se abrían así, pero viendolo mejor creo que son de JavaScript.
4. y no sé que otros errorcillos menos evidentes, pero que provocaban el extraño que antes mencionaba.

Gracias amigo BONEZ, me hiciste buscar y arreglar por mí mismo la bronca. Para que veas cómo quedó, aquí muestro el resultado. Verás que el código mejoró notablemente. Te agradecería que indicaras si vez algo malo en este nuevo código (sigo empleando las mismas etiquetas, las que mencionas que ya son obsoletas):

Código HTML:

Ver original<div id="header">
    <ul class="centrar">
      <li class="float_left radius_1">biografía</li>
      <li class="float_left">educación
        <ul>
          <li class="small">preescolar  </li>
          <li class="small">primaria    </li>
          <li class="small">secundaria  </li>
          <li class="small">técnico     </li>
          <li class="small">bachillerato</li>
          <li class="small">licenciatura</li>
        </ul>
      </li>  
      <li class="float_left">logros</li>
      <li class="float_left">conocimientos
        <ul>
          <li class="small">programación</li>
          <li class="small">otros       </li>
        </ul>
      </li>  
      <li class="float_left">laboral</li>
      <li class="float_left radius_2">contacto</li>
    </ul>
  </div>
 
  <div id="content">
    <br />
    <br />
    <center>
    <p>
    Nací al final de la década de <span class="span">1970<span id="fondo1"><span id="fondo2">La Real Academia de la Lengua Española indica que la forma correcta de anunciar una década es la mencionada, y no: "Los setentas".</span></span></span>, en el sur de la <span class="span">Ciudad de México<span id="fondo11"><span id="fondo22">Ciudad de México<br />Habitantes: 8,851,080<br />(<a class="link" href="http://www3.inegi.org.mx/sistemas/mexicocifras/default.aspx?src=487&e=9">censo INEGI 2010</a>)<img src="media/Mapa1.png" /></span></span></span>. Viví los primeros 28 años allí hasta que nació mi hija (ahora con 5 años),
    y desde entonces vivo al oriente de la misma ciudad. Tengo una carrera en el area de humanidades. Como esta carrera prácticamente no tiene campo
    laboral...
    </p>
    </center>
  </div>
 
  <div id="footer">
  </div>

Código CSS:

Ver original/*            L A Y O U T            */
 
#header, #footer {
    width:100%;
    height:110px;
    background-color:white;
    margin:0px auto;}
#content {
    background: -moz-linear-gradient(top, aliceblue , cadetblue);
    height:400px;
    width:100%;
    background-color:white;}
 
/*            M E N Ú            */
 
li {
    font-size:20px;
    width:150px;
    height:50px;
    line-height:45px;
    background-color:#666;
    color:#FFF;
    text-align:center;
    border:1px solid white;
    list-style-type:none;}
li ul {display:none;}
li:hover {
    color:#0F0;
    cursor:pointer;}
li:hover ul {
    display:block;
    position:relative;
    top:5px;
    left:-41px;}
    
/*            C L A S E S            */
 
.small {font-size:16px;}
.float_left {float:left;}
.radius_1 {border-radius:20px 0px 0px 20px;}
.radius_2 {border-radius:0px 20px 20px 0px;}
.span {
    position:relative;
    color:slateblue;
    cursor:pointer;}
.link {
    font-size:10px;
    color:white;
    text-decoration:blink;}
.centrar {
    width:912px;
    margin-left:auto;
    margin-right:auto;} 
    
/*            P O P -  UP'S            */
 
p {
    width:650px;
    font-size:18px;
    line-height:40px;
    color:#666;
    text-align:justify;}
#fondo1 {
    position:absolute;
    top:-80px;
    left:50px;
    width:250px;
    height:150px;
    background-color:#39C;
    border-radius:20px 0px 20px 0px;
    box-shadow:black 10px 10px 10px;
    z-index:1000;}
#fondo2 {
    position:absolute;
    top:10px;
    left:10px;
    width:210px;
    height:110px;
    background-color:#36C;
    border-radius:15px 0px 15px 0px;
    box-shadow:inset white 5px 5px 5px, inset white -5px -5px 5px;
    font-size:14px;
    line-height:20px;
    color:white;
    padding:10px;
    z-index:1000;}
#fondo11 {
    position:absolute;
    top:-130px;
    left:135px;
    width:250px;
    height:150px;
    background-color:#39C;
    border-radius:20px 0px 20px 0px;
    box-shadow:black 10px 10px 10px;
    z-index:1000;}
#fondo22 {
    position:absolute;
    top:10px;
    left:10px;
    width:210px;
    height:110px;
    background-color:#36C;
    border-radius:15px 0px 15px 0px;
    box-shadow:inset white 5px 5px 5px, inset white -5px -5px 5px;
    font-size:14px;
    line-height:20px;
    color:white;
    padding:10px;
    z-index:1000;}
img {
    width:100px;
    height:100px;
    float:right;}
img:hover {
    width:350px;
    height:350px;}
 
span span {display:none;}
span span span {display:none;}
 
.span:hover span {display:block;}   
.span:hover span span {display:block;}

Rafael · #5 (**permalink**) 28/03/2013, 23:59

Hola. La etiqueta center no se usa desde el html 3.

Puedes hacer ese p centrado simplemente con
p style="text-align: center;" o un class para ello.

Rafael · #6 (**permalink**) 29/03/2013, 00:05

Se me hace un abuso anidar en el css span span span.

Span, class.. ¿span?
No entiendo cual es el menú.

pzin · #7 (**permalink**) 29/03/2013, 00:20

Ahora si está mejor.

El extraño error realmente no se debía al mal código. Pero era mejor ordenarlo primero.

El orden de los elementos en el documento especifica a priori su orden en el eje Z. No es tan así, pero no sé decirlo de otra forma. Es buena práctica, y casi obligatoria, que al hacer :hover al menú se le asigne un valor z-index para que esté encima de los demás elementos.

Código CSS:

Ver originalli:hover ul {
  /* los demás estilos */
  z-index: 99;
}

Así el submenú estará por encima de los demás elementos.

Respecto a lo de ser duro… No era mi intención ser duro, sino simplemente directo. Y cuando uno ve un código que hasta los comentarios están mal puestos, pues la verdad es que duele a los ojos.

De todas formas prácticamente arreglaste todo el código sin decirte nada más.

berkeleyPunk · #8 (**permalink**) 06/04/2013, 19:04

Cita:

Iniciado por pzin

Ahora si está mejor.

El extraño error realmente no se debía al mal código. Pero era mejor ordenarlo primero.

El orden de los elementos en el documento especifica a priori su orden en el eje Z. No es tan así, pero no sé decirlo de otra forma. Es buena práctica, y casi obligatoria, que al hacer :hover al menú se le asigne un valor z-index para que esté encima de los demás elementos.

Código CSS:

Ver originalli:hover ul {
  /* los demás estilos */
  z-index: 99;
}

Así el submenú estará por encima de los demás elementos.

Respecto a lo de ser duro… No era mi intención ser duro, sino simplemente directo. Y cuando uno ve un código que hasta los comentarios están mal puestos, pues la verdad es que duele a los ojos.

De todas formas prácticamente arreglaste todo el código sin decirte nada más.

Como sea, gracias y hasta luego. Doy por cerrado y SOLUCIONADO este tema.

Así, supongamos que nadie tenga acceso a nuestras imágenes, excepto los siguientes sitios:
instalaciones electricas
mantenimiento industrial
naves industriales
obra civil
proyecto llave en mano
sistemas contra incendios
subestaciones electricas
constructoras
hvac