0

Como solucionar: cuando se abre la ventana modal pero al ampliar o reducir (crtl + -) se me sale el contenido hacia height. Quiero hacerlo en el contenido que sea fija en el mismo lugar y sin mover de la pantalla. La tengo incluido el boostrap en el archivo principal. Sólo me interesa es centrar y ajustar a la pantalla sin salir de esta.

¿puede ser en el contenido se enfoca bien o otro tipo de contenido de "wrapper"?

Códigos:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=500, initial-scale=1, maximum-scale=1">

    <meta name="description" content="">
    <meta name="author" content="">

    <title>estructura administrativa IGM</title>

    <link rel="stylesheet" href="estructura_administrativa/css/estilos.css" type="text/css" media="screen" />

    <link rel="stylesheet" href="estructura_administrativa/css/component.css" type="text/css" media="screen" />

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


    <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">

    <style type="text/css">

        body {
            background-color:#0e83cd;
            text-align:center;
            margin-top:650px;
            font-family: 'Roboto', sans-serif;
        }


        .hrmedio {
              background-color: white;
              height: 3px;
              width:977px;
              margin-top:-150px;
              margin-left:240px;
              position: absolute
            }

        .hrvertical1 {
              background-color: white;
              height:373px;
              width:3px;
              margin-top:-520px;
              margin-left:710px;
              position: absolute
        }

        .hrvertical2 {
              background-color: white;
              height:90px;
              width:3px;
              margin-top:-150px;
              margin-left:240px;
              position: absolute
            }

        .hrvertical3 {
              background-color: white;
              height:90px;
              width:3px;
              margin-top:-150px;
              margin-left:555px;
              position: absolute
        }
        .hrvertical4 {
              background-color: white;
              height:90px;
              width:3px;
              margin-top:-150px;
              margin-left:885px;
              position: absolute
        }
        .hrvertical5 {
              background-color: white;
              height:90px;
              width:3px;
              margin-top:-150px;
              margin-left:1215px;
              position: absolute
        }

        .titulo {
            text-transform: uppercase;
            letter-spacing: 1px;
            font-size:20px;
            }

        .texto {
            font-size: 17px;
            text-align: justify;
            text-shadow: 1px 2px 5px #575757;
        }

    </style>

    <script type="text/javascript">
    $(document).ready(function () {
        $('.tooltips').tooltip({
            trigger: 'focus'
        })
    });
    </script>

  </head>
  <body>

  <div>
    <div class="hrmedio"></div>
    <div class="hrvertical1"></div>
    <div class="hrvertical2"></div>
    <div class="hrvertical3"></div>
    <div class="hrvertical4"></div>
    <div class="hrvertical5"></div> 
  </div>


<div class="direccion">
    <a class="btn btn-1 btn-1a css-tooltip-left color-naranja"><div class="titulo">DIRECCIÓN</div>
        <span>
            <p>DIRECCIÓN (DIR)</p>
            <div class="texto">La Direcci&oacute;n act&uacute;a en nombre y en representaci&oacute;n del Comandante del Comando De Industria Militar e Ingenier&iacute;a. (CIMI) 
            <br><br>Tiene la facultad para celebrar los actos y contratos que se requieren para el desarrollo de los propios fines del IGM. Se rige bajo el decreto
            con fuerza de ley 2.090 y las leyes 15.284 y 16.771.<br>
            </div>
        </span>
    </a>
</div>

<div class="subdirecciongeneral">
    <a class="btn btn-1 btn-1a css-tooltip-right color-naranja"><div class="titulo">SUBDIRECCIÓN</br>GENERAL</div>
        <span>
            <p>SUBDIRECCIÓN GENERAL (SDG)</p>
            <div class="texto">La Subdirecci&oacute;n General, dirige, planifica, controla y eval&uacute;a las actividades de todas las Subdirecciones, Unidad de Cuartel y Funciones primarias, con la finalidad de lograr cumplir los objetivos del IGM.</div>
        </span>
    </a>
</div>

<div class="subdirecciongeografica">
    <a class="btn btn-1 btn-1a css-tooltip-top color-naranja"><div class="titulo">SUBDIRECCIÓN</br>GEOGRÁFICA</div>
        <span>
            <p>SUBDIRECCIÓN GEOGRÁFICA (SDGEO)</p>
            <div class="texto">La Subdirecci&oacute;n General, dirige, planifica, controla y eval&uacute;a las actividades de todas las Subdirecciones, Unidad de Cuartel y Funciones primarias, con la finalidad de lograr cumplir los objetivos del IGM.</div>
        </span>
    </a>
</div>

<div class="subdireccioningenieria">
    <a class="btn btn-1 btn-1a css-tooltip-top color-naranja"><div class="titulo">SUBDIRECCIÓN</br>INGENIERÍA</div>
        <span>
            <p>SUBDIRECCIÓN INGENIERÍA (SDI)</p>
            <div class="texto">La Subdirecci&oacute;n de Ingenier&iacute;a, proporciona la producci&oacute;n de los productos y servicios derivados de los procesos cartogr&aacute;fico, geod&eacute;sico e investigaciones para mejorar los procesos productivos.<br><br> Su org&aacute;nica est&aacute; compuesta por el Departamento de Investigaci&oacute;n y Desarrollo, el Departamento Cartografico, el Departamento Geom&aacute;tico, el Departamento Geod&eacute;sico y el Departamento de Inform&aacute;tica.</div>
        </span>
      </a>
</div>

<div class="subdirecciongrafica">
    <a class="btn btn-1 btn-1a css-tooltip-top color-naranja"><div class="titulo">SUB.PRODUCCIÓN</br>GRÁFICA</div>
        <span>
            <p>SUBDIRECCIÓN GRÁFICA (SDPG)</p>
            <div class="texto">La Subdirecci&oacute;n de Producci&oacute;n Gr&aacute;fica, proporciona el servicio de impresi&oacute;n para productos derivados de los procesos productivos cartogr&aacute;fico y geocartogr&aacute;fico que generan la Subdirecci&oacute;n de Ingenier&iacute;a y la Subdirecci&oacute;n Geogr&aacute;fica.<br><br>Su org&aacute;nica est&aacute; compuesta por la Secci&oacute;n Pre prensa, la Secci&oacute;n Impresi&oacute;n offset, la Secci&oacute;n Impresi&oacute;n digital, la Secci&oacute;n Tipograf&iacute;a, la Secci&oacute;n Encuadernaci&oacute;n y la Secci&oacute;n Correcci&oacute;n de prueba.</div>
        </span>
    </a>
<div>

<div class="subdireccioncomercial">
    <a class="btn btn-1 btn-1a css-tooltip-left color-naranja"><div class="titulo">SUBDIRECCIÓN</br>COMERCIAL</div>
        <span>
            <p>SUBDIRECCIÓN COMERCIAL (SDC)</p>
            <div class="texto">La Subdirecci&oacute;n Comercial, realiza la comercializaci&oacute;n y difusi&oacute;n de los productos y servicios derivados de los procesos cartogr&aacute;fico y geocartogr&aacute;fico, que el IGM ofrece a la comunidad. Su org&aacute;nica est&aacute; compuesta por el Departamento de Ventas y el Departamento de Marketing.</div>
        </span>
    </a>
</div>
</div>
  </body>
</html>

1 ejemplo de imagen:

introducir la descripción de la imagen aquí

4
  • 3
    Jamás obtendrás el mismo diseño sin zoom que con zoom si usas píxeles. Lo mejor en este caso es usar medidas relativas como rem, de ésta manera al agrandar o reducir la fuente (ctrl +/-) las unidades lo harán con ellas. Por defecto, la fuente en la mayoría de navegadores es 16px y este a su vez equivale a 1rem. Para obtener rem de acuerdo a px, basta con dividir los píxeles entre 16: -580px / 16 = 36.25rem.
    – gugadev
    el 9 feb. 2017 a las 14:20
  • Otra cosa, deberías de poner un ejemplo funcional en donde se pueda reproducir el problema para poder ofrecer una solución. De lo contrario, es probable que no recibas suficiente ayuda.
    – gugadev
    el 9 feb. 2017 a las 14:25
  • @guzgarcia, me lo imaginaba es dificil una funcion simple que se adapte al zoom. aún es nueva todavía para que el futuro se arregle este punto. El rem lo estudiaré y probarla. Gracias de todas las maneras. Saludos. el 9 feb. 2017 a las 15:10
  • Yo te recomiendo mucho usar un pre/post procesador para CSS. En lo personal te recomiendo PostCSS. Implementa el futuro estándar CSS4, como variables, funciones, etc. Además, tiene muchos plugins como normalize, cssnano, etc., uno de ellos, pxtorem te compila una hoja de estilos transformando los px a rem.
    – gugadev
    el 9 feb. 2017 a las 15:38

0

Tu Respuesta

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

Examina otras preguntas con la etiqueta o formula tu propia pregunta.