1. Con una cuenta podrás:

    • Publicar preguntas y pedir ayuda
    • Crear tutoriales
    • Acceder a contenido privado
    • Convertirte en un Héroe de la web
    Cerrar notificación
  2. Eres nuevo en la comunidad y necesitas ayuda?
    Sigue estos pasos y recomendaciones antes de publicar tu duda:
    Cerrar notificación

Solucionado Menu desplegable IE se desploma

Tema en 'Temas Solucionados' comenzado por Nedol, 6 de Septiembre de 2015.

Estado del tema:
No está abierto para más respuestas.
  1. Nedol

    Nedol Nuevo Miembro

    Se incorporó:
    5 de Septiembre de 2015
    Mensajes:
    10
    Me gusta recibidos:
    1
    Puntos de trofeos:
    3
    Género:
    Hombre
    Hola como van, este es mi primera ayuda :p.

    verán necesito hacer un menu desplegable para una pagina web de una fundación que estoy ayudando.
    mi idea es que quede algo asi :

    [​IMG]
    pero al abrir en google chrome se ve asi
    [​IMG]

    y al intentar en Internet explorer se ve muy distinto.
    [​IMG]

    coloco el codigo Html:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

    <html>
    <head>
    <title>Page title</title>
    <link rel="stylesheet" type="text/css" href="estilo-general.css" media="all" />
    </head>
    <body>
    <div id="global">
    <!--Abro Global que cierro antes del body-->

    <div id="cabecera">
    <div id="logo">
    <img alt="Inicio" src="imagenes/logofin.png" width="240" height="200" />
    </div>
    <div id="titulo">
    <img alt="Logo" src="imagenes/titulo.png" width="760" height="200" />
    </div>
    </div> <!--cierro cabecera, Logotipo y titulo de la web, se uso margin y float-->
    <!-- inicia menu desplegable-->
    <div id="navegacion">
    <ul class="nave">
    <li><a href="#">Inicio</a></li>
    <li><a href="#">Quienes somos</a>
    <ul>
    <li><a href="#">Mision</a></li>
    <li><a href="#">Vision</a></li>
    <li><a href="#">Nuestras Instalaciones</a></li>
    <li><a href="#">Valores</a></li>
    </ul>
    </li>
    <li><a href="#">Proyectos</a></li>
    <li><a href="#">Actividades</a></li>
    <li><a href="#">Padrinos</a></li>
    <li><a href="#">Contacto</a></li>
    </ul>

    </div>

    <div id="contenido">
    <p>Esta será la zona principal de la web</p>

    </div>
    <div id="pie">Este es el pie de pagina</div>
    <!--cierro Global que inicie en el body-->
    </div>
    </body>
    </html>

    y el codigo css:

    * {text-indent:0px; margin:0px; padding:0px; border:0px;}
    body {text-align:center; background-color:#e6e5db}
    #global {background-color:#ccff66; width:1024px; margin:4px auto; font-family:verdana, arial, sans-serif;}
    #cabecera {background-color:1cb02a; border-left:black 1px solid; border-right:black 1px solid; height:210}
    #logo {width:245px; float:left; margin-top:5px; margin-left:2px}
    #titulo {width:765px; float:right; margin-top:5px; margin-right:5px}
    #navegacion {margin:auto; width:1024px; font-family:impact, georgia, sans-serif; float:left;}
    ul, ol { list-style:none;}
    .nave li a {background-color:#000; color:#fff; text-decoration:none; padding: 10px 15px; display:block;}
    .nave {float:left;}
    .nave li a:hover {background-color:#434343;}
    .nave > li {float:left;}
    .nave li ul {display:none; position:absolute; min-width:140px;}
    .nave li:hover > ul {display:block;}
    #contenido {background-color:#fff;border-left:black 1px solid; border-right:black 1px solid;}
    #contenido p {padding:5px 10px 5px 10px; text-indent:15px;}
    #pie {background-color:#363737;}

    p {text-align:justify;}

    espero entiendan mi problema y me ayuden a resolverlo.

    encontre en google un menu ya realizado y no se desplomaba en ningun navegador, al echarle ojo encontre esto:
    <li class="nivel1"><a href="http://www.forosdelweb.com" class="nivel1">Opción 1</a>
    <!--[if lte IE 6]><a href="http://www.forosdelweb.com" class="nivel1ie">Opción 1<table class="falsa"><tr><td><![endif]-->
    <ul>
    <li><a href="#">Opción 1.1</a></li>
    <li><a href="#">Opción 1.2</a></li>
    </ul>
    <!--[if lte IE 6]></td></tr></table></a><![endif]-->
    </li>
     

    Archivos adjuntos:

  2. gammafp

    gammafp
    Moderador
    Miembro del Equipo

    Se incorporó:
    12 de Enero de 2015
    Mensajes:
    818
    Me gusta recibidos:
    389
    Puntos de trofeos:
    63
    Género:
    Hombre
    Deja de usar internet explorer y ya, XD.
    Lo que pasa es que internet explorer va a su bola, mejor dicho trabajas en una página en donde se ve bien en todos los navegadores del mundo y luego la pones en internet explorer y lo que pasa luego es que internet explorer te manda a tomar por saco, lo que pasaba es que microsoft se creian el centro del universo haciendo sus propias formas de hacer las cosas y por eso tienes esos problemas.
    Desde entonces yo he dejado de desarrollar para internet explorer y centrarme mas en chrome y firefox, aunque edge se está tomando enserio lo de los estandares, con lo cual es una buena noticia ya que solo desarrollas una web y se vera bien en casi todos los navegadores a menos en los mejores.
     
  3. Nedol

    Nedol Nuevo Miembro

    Se incorporó:
    5 de Septiembre de 2015
    Mensajes:
    10
    Me gusta recibidos:
    1
    Puntos de trofeos:
    3
    Género:
    Hombre
    gammafp, gracias pero me urge aprender y solucionar como hago para que ese menu ocupe el ancho de la pagina
     
  4. fede5426

    fede5426
    Moderador
    Miembro del Equipo

    Se incorporó:
    5 de Mayo de 2015
    Mensajes:
    237
    Me gusta recibidos:
    171
    Puntos de trofeos:
    43
    Género:
    Hombre
    Yo lo veo bien en IE 10.. no entiendo por qué sale mal en tu navegador si el código no tiene nada que IE no soporte :confused: debería verse bien en cualquier navegador..

    No es una buena práctica en realidad, aunque parezca totalmente incomprensible todavía hay mucha gente que usa internet explorer.. y si, es una tortura para los programadores web, pero dejar que el diseño no se adapte a este navegador o incluso colocar un mensaje que no permita ver el sitio y "obligue" al usuario a cambiar explorer, termina en una posible pérdida de clientes (puede sonar extremo, pero creeme que es así) no solo para la empresa que contrate tu servicio, sino también para vos que creas el sitio. Yo maqueto de IE9 para arriba, el 8 si es completamente obsoleto ya.
     
    Última modificación: 7 de Septiembre de 2015
    A gammafp le gusta esto.
  5. CG21Editor

    CG21Editor Miembro

    Se incorporó:
    3 de Septiembre de 2015
    Mensajes:
    121
    Me gusta recibidos:
    16
    Puntos de trofeos:
    18
    Género:
    Hombre
    En El M9io Apartece Bien.
    Inetnta Verlo Con LocalHost. Cambia Como Lo Quieres Aveces.
     
  6. gammafp

    gammafp
    Moderador
    Miembro del Equipo

    Se incorporó:
    12 de Enero de 2015
    Mensajes:
    818
    Me gusta recibidos:
    389
    Puntos de trofeos:
    63
    Género:
    Hombre
    Tienes razón pierdes clientes, pero al desarrollar para IE9 igual estas perdiendo otra cantidad de clientes; clientes que usan IE8 ..., entonces me curo en salud y corto el problema de raíz, ya que edge está pegando duro en estos instantes.
     
    Última modificación: 8 de Septiembre de 2015
  7. gammafp

    gammafp
    Moderador
    Miembro del Equipo

    Se incorporó:
    12 de Enero de 2015
    Mensajes:
    818
    Me gusta recibidos:
    389
    Puntos de trofeos:
    63
    Género:
    Hombre
    Si te sirve de consuelo en IE11 se ve bien:
    [​IMG]
     
  8. Nedol

    Nedol Nuevo Miembro

    Se incorporó:
    5 de Septiembre de 2015
    Mensajes:
    10
    Me gusta recibidos:
    1
    Puntos de trofeos:
    3
    Género:
    Hombre
    Gracias a todos, pero el dia de ayer KaoruMishimaru_20
    me envio este codigo donde se resuelve mi error. Gracias a todos, publico el codigo para el que le llegue a suceder.

    <!DOCTYPE html>
    <html lang="es">
    <head>
    <meta charset="UTF-8">
    <title>Page Title</title>

    <style>

    * {
    margin:0px;
    padding:0px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    }

    body {
    background-color:#e6e5db;
    }

    #global {
    background-color:#ccff66;
    width:1024px;
    margin:4px auto;
    font-family:verdana, arial, sans-serif;
    }

    #cabecera {
    background-color: #1cb02a;
    border-left:black 1px solid;
    border-right:black 1px solid;
    height:210px;
    }

    #logo {
    width:245px;
    float:left;
    margin-top:5px;
    margin-left:2px
    }

    #titulo {
    width:765px;
    float:right;
    margin-top:5px;
    margin-right:5px;
    }

    #navegacion {
    margin:auto;
    width: 100%;
    font-family: Arial;
    text-transform: uppercase;
    font-size: 12px;
    float:left;
    background: #000;
    }

    #navegacion ul li{
    list-style: none;
    }

    .nave li a {
    background-color:#000;
    color:#fff;
    text-decoration:none;
    padding: 15px;
    display:block;
    }

    .nave {
    width: 100%;
    float:left;
    }

    .nave li a:hover {
    background-color:#434343;
    }

    .nave > li {
    float:left;
    }

    .nave li ul {
    display:none;
    position:absolute;
    min-width:140px;
    }

    .nave li:hover > ul {
    display:block;
    }

    .contenido {
    background: #FFF;
    width: 100%;
    height: auto;
    overflow: hidden;
    }

    .contenido p{
    padding: 10px;
    }

    footer {
    background-color:#363737;
    padding: 10px;
    color: #FFF;
    text-align: center;
    }

    </style>

    </head>
    <body>

    <!--Abro Global que cierro antes del body-->
    <div id="global">
    <div id="cabecera">
    <div id="logo">
    <img alt="Inicio" src="imagenes/logofin.png" width="240" height="200" />
    </div>

    <div id="titulo">
    <img alt="Logo" src="imagenes/titulo.png" width="760" height="200" />
    </div>
    </div>
    <!--cierro cabecera, Logotipo y titulo de la web, se uso margin y float-->

    <!-- inicia menu desplegable-->
    <div id="navegacion">
    <ul class="nave">
    <li><a href="#">Inicio</a></li>
    <li><a href="#">Quienes somos</a>

    <ul>
    <li><a href="#">Mision</a></li>
    <li><a href="#">Vision</a></li>
    <li><a href="#">Nuestras Instalaciones</a></li>
    <li><a href="#">Valores</a></li>
    </ul>
    </li>
    <li><a href="#">Proyectos</a></li>
    <li><a href="#">Actividades</a></li>
    <li><a href="#">Padrinos</a></li>
    <li><a href="#">Contacto</a></li>
    </ul>
    </div>

    <div class="contenido">
    <p>Esta será la zona principal de la web</p>
    </div>

    <footer>Pie de pagina</footer>
    </div>
    <!--cierro Global que inicie en el body-->

    </body>
    </html>
     
  9. Nedol

    Nedol Nuevo Miembro

    Se incorporó:
    5 de Septiembre de 2015
    Mensajes:
    10
    Me gusta recibidos:
    1
    Puntos de trofeos:
    3
    Género:
    Hombre
    y ahora como lo pongo resuelto? :p
     
    A gammafp le gusta esto.
  10. gammafp

    gammafp
    Moderador
    Miembro del Equipo

    Se incorporó:
    12 de Enero de 2015
    Mensajes:
    818
    Me gusta recibidos:
    389
    Puntos de trofeos:
    63
    Género:
    Hombre
    No te preocupes, ya te lo pongo yo como resuelto y me alegra que lo hayas podido resolver.
     
    A Nedol le gusta esto.
Estado del tema:
No está abierto para más respuestas.

Comparte esta página