0

Estoy tratando de pasar una web php de un hosting a un vps, tengo pocos conocimientos de PHP, pero gracias a ésta página pude hacer que funcione, conecté a la base de datos y actualicé algunas extensiones que estaban obsoletas y no funcionaban en php7, al fin pude dejar la web operativa, pero en cuanto al diseño no puedo hacer que sea responsive, ya que tiene un menú y muestra el contenido php en un iframe que no se ve bien en los móviles, se suma a ésto que no encuentro a la persona que me hizo la programación y por eso busco su ayuda, viendo algunos videos utilicé css grid para tratar de hacerlo responsive, lo logré en parte ya que el iframe no cambia, solo cambia el menú y sigue sin verse bien en móviles. Su ayuda me servirá de mucho.

Código html:

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet"> 
    <link rel="stylesheet" href="estilos.css">
    <title>TC</title>
</head>
    <body>
    <div id="preloader">
    <div id="loader">&nbsp;</div>
    
<!-- Menu en Header -->

<div class="contenedor">
    <header class="header">
        
            <div class="logo" >
            <a href="menu_principal.html">
            <img alt="TC" src="imagenes/logo.png"></a>
            </div>

        <nav>
            <ul class="menu">
                <li><a href="principal.php"  target="formularios">Inicio</a></li>

                <li><a href="#">Referidos</a>
                    <ul class="submenu">            
                        <li><a href="rr.php" target="formularios">Registro De Referidos</a></li>
                        <li><a href="list_refe1.php" target="formularios">Listado Referidos</a></li>
                    </ul>
                </li>

                <li><a href="#">Junta</a>
                    <ul class="submenu">        
                        <li><a href="principal1.php" target="formularios">Junta 100</a></li>
                        <li><a href="principal2.php" target="formularios">Junta 250</a></li>
                        <li><a href="principal3.php" target="formularios">Junta 500</a></li>
                    </ul>
                </li>

                <li><a href="#">Usuario</a>
                    <ul class="submenu">        
                        <li><a href="verif_contrausu.php" target="formularios">Cambiar Contraseña</a></li>
                        <li><a href="cerrarsesion.php"  target="formularios">Cerrar Sesión</a></li>
                    </ul>   
                </li>

            </ul>
        </nav>
    </header>


<main class="contenido">
    <div id="contenido">
    <iframe src="p.php" style="width: 100%; height: 250px" frameborder=0 name="formularios"></iframe>
    </div>
</main>
        
                        
<footer class="footer">
    <li><a href="Regla.html">Términos y Condiciones</a></li>
    <li><a href="preg_resp.html" target="formularios">Preguntas Frecuentes</a></li>
    </footer>
    
</body>
        </html>

Código css:

    * {
    margin: 0;
    padding: 0;
    text-decoration: none;
}

body {
    background: #ffffff;
    color: #000;
    font-family: 'Roboto', sans-serif;
}

.contenedor {
    width: 100%;
    max-width: auto;
    display: grid;
    grid-gap: 20px;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, auto);

    grid-template-areas: "header header header"
                         "contenido contenido contenido"
                         "footer footer footer";
}

.contenedor > div,
.contenedor .header,
.contenedor .contenido,
.contenedor .footer {
    background: #fff;
    padding: 20px;
    border-radius: 4px;
}

.contenedor .header {
    background: #12c6cc;
    grid-area: header;
}

.contenedor .contenido {
    grid-area: contenido;
    width: 100%;
    max-width: 1000px;
    margin: 10px auto;
}


.contenedor .footer {
    background: #2259f1;
    color: #fff;
    grid-area: footer;
}

.menu {
    text-align: center;
    width: 70%;
    height: 70px;
    float: left;
}

.menu > li{ 
    position: relative;
    display: inline-block;
}

.menu > li > a{
    display: block;
    padding: 15px 20px;
    list-style: none;
    color: #fff;
}

.menu li a:hover{
    color: #1f50f1;
    transition: all .3s;
}

.submenu {
    position: absolute;
    list-style: none;
    background: #12c6cc;
    width: 120%;
    visibility: hidden;
    opacity: 0;
    transition: opacity .5s;
}

.submenu li a{
    display: block;
    padding: 15px;
    color: #fff
}

.menu li:hover .submenu{
    visibility: visible;
    opacity: 1;
}

.logo {
    width: 30%;
    height: 70px;
    float: left;
    box-sizing: border-box;
}

.menu-icon {
    display: none;
}
    

@media screen and (max-width: 767px){
    .menu > li{ 
        display: block;
}

.contenedor .header {
    



        grid-template-areas: "header header header"
                         "contenido contenido contenido"
                         "footer footer footer";
    }
}
3
  • Hola Fredy Guerrero. Te recomiendo que pegues algo de tu código acá. Me gustaría ayudarte pero los admin me retan y me penalizan si ayudo a alguien que no escribió una pregunta con el código. Si querés, reformulá la pregunta poniendo como es el iframe del menú, y como es el código php, etc.. Commented el 15 jun. 2020 a las 5:24
  • ¿Podrias añadir tu codigo para poder ayudarte? y que tu pregunta sea bienvenida y no te la den de baja Commented el 15 jun. 2020 a las 5:27
  • Gracias por las sugerencias, ahora pondré el código. Commented el 15 jun. 2020 a las 13:37

1 respuesta 1

0

A priori poco tiene que ver con php el código que pusiste.

Trata de sustituir tu iframe

Con el contenido del archivo p.php. Ya que nosotros no lo vemos tendrás que ejecutarlo en tu navegador, desde ahí viendo el código fuente podrás sustituir esto por el iframe.

1
  • 2
    Eso es más un comentario que una respuesta, por favor lee Cómo responder y evita usar el área de respuestas para comentarios. Saludos. Commented el 15 jun. 2020 a las 14:28

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.