Volver al Programación / Codificación foro

drpop hasta el menú de ayuda

  • demonmaestro
  • Gold Member
  • Gold Member
  • Avatar de Usuario
  • Registrado: Jun 21, 2006
  • Mensajes: 485
  • Loc: Conroe, Texas
  • Status: Offline

Nota Julio 9th, 2010, 6:58 pm

Bueno estoy realmente perdido en este caso. las obras a aparecer, pero su elaboración de los productos y preguntas frecuentes a lo grande y no quiero que.... aquí hay un enlace para ver lo que estoy hablando.
http://www.planetpeeps.com/test
aquí está el código.

código css
Código: [ Select ]
.menu{
    border:none;
    border:0px;
    margin:0px;
    padding:0px;
    font: 67.5% "Lucida Sans Unicode", "Bitstream Vera Sans", "Trebuchet Unicode MS", "Lucida Grande", Verdana, Helvetica, sans-serif;
    font-size:14px;
    font-weight:bold;
    }
.menu ul{
    background:#333333;
    height:35px;
    list-style:none;
    margin:0;
    padding:0;
    }
    .menu li{
        float:left;
        padding:0px;
        }
    .menu li a{
        background:#333333 url("images/seperator.gif") bottom right no-repeat;
        color:#cccccc;
        display:block;
        font-weight:normal;
        line-height:35px;
        margin:0px;
        padding:0px 25px;
        text-align:center;
        text-decoration:none;
        
        }
        .menu li a:hover, .menu ul li:hover a{
            background: #2580a2 url("images/hover.gif") bottom center no-repeat;
            color:#FFFFFF;
            text-decoration:none;
            }
    .menu li ul{
        background:#333333;
        display:none;
        height:auto;
        padding:0px;
        margin:0px;
        border:0px;
        position:relative;
        width:225px;
        z-index:200;
        top:-175px;
        /*left:0;*/
        }
    .menu li:hover ul{
        display:block;
        
        }
    .menu li li {
        background:url('images/sub_sep.gif') bottom left no-repeat;
        display:block;
        float:none;
        margin:0px;
        padding:0px;
        width:225px;
        }
    .menu li:hover li a{
        background:none;
        
        }
    .menu li ul a{
        display:block;
        height:35px;
        font-size:12px;
        font-style:normal;
        margin:0px;
        padding:0px 10px 0px 15px;
        text-align:left;
        }
        .menu li ul a:hover, .menu li ul li:hover a{
            background:#2580a2 url('images/hover_sub.gif') center left no-repeat;
            border:0px;
            color:#ffffff;
            text-decoration:none;
            }
    .menu p{
        clear:left;
        
        }    

        
  1. .menu{
  2.     border:none;
  3.     border:0px;
  4.     margin:0px;
  5.     padding:0px;
  6.     font: 67.5% "Lucida Sans Unicode", "Bitstream Vera Sans", "Trebuchet Unicode MS", "Lucida Grande", Verdana, Helvetica, sans-serif;
  7.     font-size:14px;
  8.     font-weight:bold;
  9.     }
  10. .menu ul{
  11.     background:#333333;
  12.     height:35px;
  13.     list-style:none;
  14.     margin:0;
  15.     padding:0;
  16.     }
  17.     .menu li{
  18.         float:left;
  19.         padding:0px;
  20.         }
  21.     .menu li a{
  22.         background:#333333 url("images/seperator.gif") bottom right no-repeat;
  23.         color:#cccccc;
  24.         display:block;
  25.         font-weight:normal;
  26.         line-height:35px;
  27.         margin:0px;
  28.         padding:0px 25px;
  29.         text-align:center;
  30.         text-decoration:none;
  31.         
  32.         }
  33.         .menu li a:hover, .menu ul li:hover a{
  34.             background: #2580a2 url("images/hover.gif") bottom center no-repeat;
  35.             color:#FFFFFF;
  36.             text-decoration:none;
  37.             }
  38.     .menu li ul{
  39.         background:#333333;
  40.         display:none;
  41.         height:auto;
  42.         padding:0px;
  43.         margin:0px;
  44.         border:0px;
  45.         position:relative;
  46.         width:225px;
  47.         z-index:200;
  48.         top:-175px;
  49.         /*left:0;*/
  50.         }
  51.     .menu li:hover ul{
  52.         display:block;
  53.         
  54.         }
  55.     .menu li li {
  56.         background:url('images/sub_sep.gif') bottom left no-repeat;
  57.         display:block;
  58.         float:none;
  59.         margin:0px;
  60.         padding:0px;
  61.         width:225px;
  62.         }
  63.     .menu li:hover li a{
  64.         background:none;
  65.         
  66.         }
  67.     .menu li ul a{
  68.         display:block;
  69.         height:35px;
  70.         font-size:12px;
  71.         font-style:normal;
  72.         margin:0px;
  73.         padding:0px 10px 0px 15px;
  74.         text-align:left;
  75.         }
  76.         .menu li ul a:hover, .menu li ul li:hover a{
  77.             background:#2580a2 url('images/hover_sub.gif') center left no-repeat;
  78.             border:0px;
  79.             color:#ffffff;
  80.             text-decoration:none;
  81.             }
  82.     .menu p{
  83.         clear:left;
  84.         
  85.         }    
  87.         


página de código
Código: [ Select ]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title></title>
    <link rel="stylesheet" href="menu_style.css" type="text/css" />
</head>
<body><table width="100%" border="1">
 <tr>
  <td><p>sdfsdfasdfdfg</p>
  <p>dfg</p>
 
  <p>sdfg</p>
  <p> sdf</p>
  <p> gsd</p>
  <p>&nbsp;</p></td>
 </tr>
 <tr>
  <td><p>asdfa</p>
  <p>sdf</p>
  <p>asdf</p>
  <p>asf</p>
  <p>asd</p>
  <p>fas</p>
  <p>df</p>
  <p>&nbsp;</p></td>
 </tr>
 <tr>
  <td>    <div class="menu">
        <ul>
            <li><a href="#" >Home</a></li>
            <li><a href="#" id="current">Products</a>
                <ul>
              <li><a href="#">Drop Down CSS Menus</a></li>
                    <li><a href="#">Horizontal CSS Menus</a></li>
                    <li><a href="#">Vertical CSS Menus</a></li>
                    <li><a href="#">Dreamweaver Menus</a></li>
              </ul>
      </li>
            <li><a href="/faq.php">FAQ</a>
        <ul>
        <li><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
        <li><a href="#">4</a></li>
        </ul>
</li>
            <li><a href="/contact/contact.php">Contact</a></li>
        </ul>
    </div>
</td>
 </tr>
</table>

    <br>
    <br>

</body>
</html>
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  2.     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  4. <head>
  5.     <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  6.     <title></title>
  7.     <link rel="stylesheet" href="menu_style.css" type="text/css" />
  8. </head>
  9. <body><table width="100%" border="1">
  10.  <tr>
  11.   <td><p>sdfsdfasdfdfg</p>
  12.   <p>dfg</p>
  13.  
  14.   <p>sdfg</p>
  15.   <p> sdf</p>
  16.   <p> gsd</p>
  17.   <p>&nbsp;</p></td>
  18.  </tr>
  19.  <tr>
  20.   <td><p>asdfa</p>
  21.   <p>sdf</p>
  22.   <p>asdf</p>
  23.   <p>asf</p>
  24.   <p>asd</p>
  25.   <p>fas</p>
  26.   <p>df</p>
  27.   <p>&nbsp;</p></td>
  28.  </tr>
  29.  <tr>
  30.   <td>    <div class="menu">
  31.         <ul>
  32.             <li><a href="#" >Home</a></li>
  33.             <li><a href="#" id="current">Products</a>
  34.                 <ul>
  35.               <li><a href="#">Drop Down CSS Menus</a></li>
  36.                     <li><a href="#">Horizontal CSS Menus</a></li>
  37.                     <li><a href="#">Vertical CSS Menus</a></li>
  38.                     <li><a href="#">Dreamweaver Menus</a></li>
  39.               </ul>
  40.       </li>
  41.             <li><a href="/faq.php">FAQ</a>
  42.         <ul>
  43.         <li><a href="#">1</a></li>
  44.         <li><a href="#">2</a></li>
  45.         <li><a href="#">3</a></li>
  46.         <li><a href="#">4</a></li>
  47.         </ul>
  48. </li>
  49.             <li><a href="/contact/contact.php">Contact</a></li>
  50.         </ul>
  51.     </div>
  52. </td>
  53.  </tr>
  54. </table>
  56.     <br>
  57.     <br>
  59. </body>
  60. </html>
  • Anonymous
  • Bot
  • No Avatar
  • Registrado: 25 Feb 2008
  • Mensajes: ?
  • Loc: Ozzuland
  • Status: Online

Nota Julio 9th, 2010, 6:58 pm

  • natas
  • PHP Ninja
  • Proficient
  • No Avatar
  • Registrado: Mar 28, 2009
  • Mensajes: 305
  • Loc: AFK
  • Status: Offline

Nota Julio 9th, 2010, 8:57 pm

Sólo dio su ". Li menú" elemento en su css un ancho fijo. Copia y pega este y ver si funciona para ti.

Código: [ Select ]
.menu{
    border:none;
    border:0px;
    margin:0px;
    padding:0px;
    font: 67.5% "Lucida Sans Unicode", "Bitstream Vera Sans", "Trebuchet Unicode MS", "Lucida Grande", Verdana, Helvetica, sans-serif;
    font-size:14px;
    font-weight:bold;
    }
.menu ul{
    background:#333333;
    height:35px;
    list-style:none;
    margin:0;
    padding:0;
    }
    .menu li{
        float:left;
        padding:0px;
        width: 100px;
        }
    .menu li a{
        background:#333333 url("images/seperator.gif") bottom right no-repeat;
        color:#cccccc;
        display:block;
        font-weight:normal;
        line-height:35px;
        margin:0px;
        padding:0px 25px;
        text-align:center;
        text-decoration:none;
        
        }
        .menu li a:hover, .menu ul li:hover a{
            background: #2580a2 url("images/hover.gif") bottom center no-repeat;
            color:#FFFFFF;
            text-decoration:none;
            }
    .menu li ul{
        background:#333333;
        display:none;
        height:auto;
        padding:0px;
        margin:0px;
        border:0px;
        position:relative;
        width:200px;
        z-index:200;
        top:-175px;
        /*left:0;*/
        }
    .menu li:hover ul{
        display:block;
        
        }
    .menu li li {
        background:url('images/sub_sep.gif') bottom left no-repeat;
        display:block;
        float:none;
        margin:0px;
        padding:0px;
        width:200px;
        }
    .menu li:hover li a{
        background:none;
        
        }
    .menu li ul a{
        display:block;
        height:35px;
        font-size:12px;
        font-style:normal;
        margin:0px;
        padding:0px 10px 0px 15px;
        text-align:left;
        }
        .menu li ul a:hover, .menu li ul li:hover a{
            background:#2580a2 url('images/hover_sub.gif') center left no-repeat;
            border:0px;
            color:#ffffff;
            text-decoration:none;
            }
    .menu p{
        clear:left;
        
        }    

        
  1. .menu{
  2.     border:none;
  3.     border:0px;
  4.     margin:0px;
  5.     padding:0px;
  6.     font: 67.5% "Lucida Sans Unicode", "Bitstream Vera Sans", "Trebuchet Unicode MS", "Lucida Grande", Verdana, Helvetica, sans-serif;
  7.     font-size:14px;
  8.     font-weight:bold;
  9.     }
  10. .menu ul{
  11.     background:#333333;
  12.     height:35px;
  13.     list-style:none;
  14.     margin:0;
  15.     padding:0;
  16.     }
  17.     .menu li{
  18.         float:left;
  19.         padding:0px;
  20.         width: 100px;
  21.         }
  22.     .menu li a{
  23.         background:#333333 url("images/seperator.gif") bottom right no-repeat;
  24.         color:#cccccc;
  25.         display:block;
  26.         font-weight:normal;
  27.         line-height:35px;
  28.         margin:0px;
  29.         padding:0px 25px;
  30.         text-align:center;
  31.         text-decoration:none;
  32.         
  33.         }
  34.         .menu li a:hover, .menu ul li:hover a{
  35.             background: #2580a2 url("images/hover.gif") bottom center no-repeat;
  36.             color:#FFFFFF;
  37.             text-decoration:none;
  38.             }
  39.     .menu li ul{
  40.         background:#333333;
  41.         display:none;
  42.         height:auto;
  43.         padding:0px;
  44.         margin:0px;
  45.         border:0px;
  46.         position:relative;
  47.         width:200px;
  48.         z-index:200;
  49.         top:-175px;
  50.         /*left:0;*/
  51.         }
  52.     .menu li:hover ul{
  53.         display:block;
  54.         
  55.         }
  56.     .menu li li {
  57.         background:url('images/sub_sep.gif') bottom left no-repeat;
  58.         display:block;
  59.         float:none;
  60.         margin:0px;
  61.         padding:0px;
  62.         width:200px;
  63.         }
  64.     .menu li:hover li a{
  65.         background:none;
  66.         
  67.         }
  68.     .menu li ul a{
  69.         display:block;
  70.         height:35px;
  71.         font-size:12px;
  72.         font-style:normal;
  73.         margin:0px;
  74.         padding:0px 10px 0px 15px;
  75.         text-align:left;
  76.         }
  77.         .menu li ul a:hover, .menu li ul li:hover a{
  78.             background:#2580a2 url('images/hover_sub.gif') center left no-repeat;
  79.             border:0px;
  80.             color:#ffffff;
  81.             text-decoration:none;
  82.             }
  83.     .menu p{
  84.         clear:left;
  85.         
  86.         }    
  88.         
Custom Web Design
  • demonmaestro
  • Gold Member
  • Gold Member
  • Avatar de Usuario
  • Registrado: Jun 21, 2006
  • Mensajes: 485
  • Loc: Conroe, Texas
  • Status: Offline

Nota Julio 9th, 2010, 9:10 pm

muchas gracias funcionó!
Thanks, Josh --DemonMaestro
www.LilNetwork.com
Fun Website www.ShoutsCloud.com
  • demonmaestro
  • Gold Member
  • Gold Member
  • Avatar de Usuario
  • Registrado: Jun 21, 2006
  • Mensajes: 485
  • Loc: Conroe, Texas
  • Status: Offline

Nota Enero 31st, 2011, 3:28 am

cuestión de añadir algo bueno es que tengo que establece en la parte inferior de la página como siempre i cuando el ratón sobre el menú y la ventana se extiende hasta la pantalla. No sé por qué su haciendo.

http://planetpeeps.com/work/work%20in%2 ... ss/source/
Thanks, Josh --DemonMaestro
www.LilNetwork.com
Fun Website www.ShoutsCloud.com
  • Bigwebmaster
  • Site Admin
  • Site Admin
  • Avatar de Usuario
  • Registrado: Dic 20, 2002
  • Mensajes: 8926
  • Loc: Seattle, WA & Phoenix, AZ
  • Status: Offline

Nota Marzo 16th, 2011, 10:18 am

Antes de que incluso se ciernen sobre los elementos del menú en la parte inferior ya tengo una barra de desplazamiento horizontal. ¿Se está haciendo eso para usted? ¿Qué es fija para mí fue la adición de un margen de 0 para el cuerpo. Así que añadir esto a la hoja de estilos:

CSS Código: [ Select ]
body {
   margin:0;
}
  1. body {
  2.    margin:0;
  3. }


No creo que fue su principal problema, sin embargo, lo que también ocurre cuando el cursor sobre un elemento del menú hay una gran cantidad de espacio está apareciendo debajo del menú. Creo que eso es lo que tu pregunta es realmente.

El problema es cómo se están posicionando el elemento con un número negativo para el arriba la propiedad. Así que lo que puede probar si yo fuera usted es completar deshacerse de la propiedad top y en lugar de tratar de hacer lo mismo con márgenes negativos. Así que en lugar de:

CSS Código: [ Select ]
.menu li ul{
   background:#333333;
   display:none;
   height:auto;
   padding:0px;
   margin:0px;
   border:0px;
   position:relative;
   width:200px;
   z-index:200;
   top:-175px;
}
 
  1. .menu li ul{
  2.    background:#333333;
  3.    display:none;
  4.    height:auto;
  5.    padding:0px;
  6.    margin:0px;
  7.    border:0px;
  8.    position:relative;
  9.    width:200px;
  10.    z-index:200;
  11.    top:-175px;
  12. }
  13.  


intente lo siguiente:

CSS Código: [ Select ]
.menu li ul{
   background:#333333;
   display:none;
   height:auto;
   padding:0px;
   margin:-175px 0 0 0;
   border:0px;
   position:relative;
   width:200px;
   z-index:200;
}
 
  1. .menu li ul{
  2.    background:#333333;
  3.    display:none;
  4.    height:auto;
  5.    padding:0px;
  6.    margin:-175px 0 0 0;
  7.    border:0px;
  8.    position:relative;
  9.    width:200px;
  10.    z-index:200;
  11. }
  12.  


Déjame saber si hace algo diferente.
Ozzu Hosting - Want your website on a fast server like Ozzu?
  • demonmaestro
  • Gold Member
  • Gold Member
  • Avatar de Usuario
  • Registrado: Jun 21, 2006
  • Mensajes: 485
  • Loc: Conroe, Texas
  • Status: Offline

Nota Marzo 16th, 2011, 3:47 pm

cómo funciona cada vez que saca una de las opciones cuando se desplaza sobre el menú.
Thanks, Josh --DemonMaestro
www.LilNetwork.com
Fun Website www.ShoutsCloud.com
  • Bigwebmaster
  • Site Admin
  • Site Admin
  • Avatar de Usuario
  • Registrado: Dic 20, 2002
  • Mensajes: 8926
  • Loc: Seattle, WA & Phoenix, AZ
  • Status: Offline

Nota Marzo 16th, 2011, 4:38 pm

Sí, veo lo que se refiere. Vamos a intentar un enfoque diferente. Deshazte de ese margen que te dije para agregar y en su lugar puso arriba a 140px y en lugar de tener posición relativa permite echar fuera del flujo de documentos y lo puso como absoluto. Así que el cambio de menú ul li a.:

CSS Código: [ Select ]
.menu li ul{
   background:#333333;
   display:none;
   height:auto;
   padding:0px;
   border:0px;
   position:absolute;
   width:200px;
   z-index:200;
   top:-140px;
}
  1. .menu li ul{
  2.    background:#333333;
  3.    display:none;
  4.    height:auto;
  5.    padding:0px;
  6.    border:0px;
  7.    position:absolute;
  8.    width:200px;
  9.    z-index:200;
  10.    top:-140px;
  11. }


Entonces me di cuenta de que todavía tienen un pequeño espacio debajo de ese menú. Tal vez usted está deseando, pero si usted está deseando que a ras del fondo tiene que quitar la altura de 50px de la #Identificación del fondo de tu CSS. Quiero saber si esta revisión es mejor :)
Ozzu Hosting - Want your website on a fast server like Ozzu?
  • demonmaestro
  • Gold Member
  • Gold Member
  • Avatar de Usuario
  • Registrado: Jun 21, 2006
  • Mensajes: 485
  • Loc: Conroe, Texas
  • Status: Offline

Nota Marzo 18th, 2011, 2:54 pm

funciona, pero sigue siendo un problema...theres ningún menú ahora...lol

http://planetpeeps.com/work/work%20in%2 ... ss/source/
Thanks, Josh --DemonMaestro
www.LilNetwork.com
Fun Website www.ShoutsCloud.com
  • Bigwebmaster
  • Site Admin
  • Site Admin
  • Avatar de Usuario
  • Registrado: Dic 20, 2002
  • Mensajes: 8926
  • Loc: Seattle, WA & Phoenix, AZ
  • Status: Offline

Nota Marzo 18th, 2011, 3:54 pm

Para mí, muestra un menú de trabajo, tanto en IE y FF. ¿Qué navegador está usando? ¿Estás seguro de que cancele su caché después de hacer los cambios?
Ozzu Hosting - Want your website on a fast server like Ozzu?
  • demonmaestro
  • Gold Member
  • Gold Member
  • Avatar de Usuario
  • Registrado: Jun 21, 2006
  • Mensajes: 485
  • Loc: Conroe, Texas
  • Status: Offline

Nota Marzo 18th, 2011, 3:58 pm

es decir, estoy usando y no es mostrar nada...sólo el menú, pero no el pop ups.
Thanks, Josh --DemonMaestro
www.LilNetwork.com
Fun Website www.ShoutsCloud.com
  • Bigwebmaster
  • Site Admin
  • Site Admin
  • Avatar de Usuario
  • Registrado: Dic 20, 2002
  • Mensajes: 8926
  • Loc: Seattle, WA & Phoenix, AZ
  • Status: Offline

Nota Marzo 18th, 2011, 4:02 pm

¿Qué versión de IE? Estoy usando IE8 y funcionó bien, lo pongo en modo IE7 y todavía funciona bien. ¿Está utilizando un PC o MAC? Muy extraño.
Ozzu Hosting - Want your website on a fast server like Ozzu?
  • demonmaestro
  • Gold Member
  • Gold Member
  • Avatar de Usuario
  • Registrado: Jun 21, 2006
  • Mensajes: 485
  • Loc: Conroe, Texas
  • Status: Offline

Nota Marzo 18th, 2011, 4:45 pm

IE6. su lo que tenemos en el trabajo,
Thanks, Josh --DemonMaestro
www.LilNetwork.com
Fun Website www.ShoutsCloud.com
  • Bigwebmaster
  • Site Admin
  • Site Admin
  • Avatar de Usuario
  • Registrado: Dic 20, 2002
  • Mensajes: 8926
  • Loc: Seattle, WA & Phoenix, AZ
  • Status: Offline

Nota Marzo 19th, 2011, 9:33 am

Ahh veo, IE6 realiza drásticamente diferente de Internet Explorer 7 o superior. IE6 ha sido una espina en el pasado para los desarrolladores. Muchas grandes empresas han dejado de hacer que sus sitios web son compatibles para IE6, incluyendo noticias:

http://www.techradar.com/news/internet/ ... ort-616309

También he dejado de preocuparse por IE6, ya que sólo alrededor del 2-3% de nuestros visitantes son de amortiguación de usarlo, y Microsoft acaba de lanzar IE9. Así que para responder efectivamente a su pregunta sobre por qué no la muestran correctamente en Internet Explorer 6, no estoy seguro. Ya no tienen acceso a Internet Explorer 6 para ejecutar algunas pruebas, pero hay muchos IE6 caprichos y errores de aquí que es posible que pueda obtener la respuesta de:

http://www.positioniseverything.net/explorer.html

Pasar los dos primeros son como los errores de IE7 e IE8, el resto son para Internet Explorer 6 y cualquiera de los insectos podría ser la causa de por qué aquí no estamos viendo nada. El vínculo se establece directamente sobre muestran por cada error, por lo que pueden tratar de que si usted realmente desea conseguir que esto funcione correctamente para IE6.
Ozzu Hosting - Want your website on a fast server like Ozzu?

Página 1 de 1

Publicar Información

  • Total de mensajes en este tema: 13 mensajes
  • Usuarios navegando por este Foro: No hay usuarios registrados visitando el Foro y 114 invitados
  • No puede abrir nuevos temas en este Foro
  • No puede responder a temas en este Foro
  • No puede editar sus mensajes en este Foro
  • No puede borrar sus mensajes en este Foro
  • No puede enviar adjuntos en este Foro
 
 

© 2011 Unmelted, LLC. Ozzu® es una marca registrada de Unmelted, LLC