Estilo aplicado a una imagen, se desproporciona con diferentes pantallas

• 

  titiruizah · Miembro · agosto 31, 2015 at 3:13 pm

  • Copiar enlace
  • Añadir tema a favoritos

  Buen dia

  Tengo a mi mano un sitio perteneciente a la biblioteca de la Universidad, he creado una imagen en la cual he ubicado diferentes puntos con CSS (no utilice <map>) con la idea de que cuando se pasa el puntero sobre alguna area de la imagen se desplieguen etiquetas con información.

  El problema es el siguiente, el estilo va muy bien en el equipo que lo he creado, pero cuando lo veo en un equipo con una resolución menor, pues el estilo sobre la imagen se desplaza a lo ancho, es decir aparece recostado en un lado del contenedor padre.

  Aclaracion inicialmente he hecho una pagina de prueba de este estilo en mi servidor local y va muy bien, aun si reduzco el tamaño del navegador, sera algo del wordpress?.

  Aqui dejo el codigo:

  html:

  <div class=»imagen_mapa»>
  <img src=»http://biblioteca.ucp.edu.co/catalogo/wp-content/uploads/2011/03/Nuevo-Reunir1.png» >

  <ul class=»notas»>
  <li id=»nota1″><P><img src=»http://biblioteca.ucp.edu.co/catalogo/wp-content/uploads/2015/08/BCDCH.jpg» width=»200″ height=»150″>Biblioteca Cardenal Darío Castrillón Hoyos</P>
  <li id=»nota2″><p>Centro Biblioteca Jorge Roa Martínez</p>
  <li id=»nota3″><p>Biblioteca Colombo Americano</p>
  <li id=»nota4″><p>Biblioteca Escuela Superior de Administración Publica</p>
  <li id=»nota5″><p>Biblioteca Fundación Universitaria del Area Andina</p>
  <li id=»nota6″><p>Biblioteca SENA</p>
  <li id=»nota7″><p>Biblioteca Gustavo Gallego Aguilar</p><!–Universida coperativa de C–>
  <li id=»nota8″><p>Biblioteca Universidad Libre de Colombia</p>
  <li id=»nota9″><p>Biblioteca Universidad Antonio Nariño</p>
  <li id=»nota10″><p>Biblioteca Corporación Instituto de Administración y Finanzas</p>
  <li id=»nota11″><p>Biblioteca UNISARC</p>

  </div>

  CSS:

  div.imagen_mapa li{
  position: relative;
  }

  ul.notas li{
  position: absolute;
  }

  ul.notas li{
  border: solid medium #008453;
  list-style: none;
  }

  ul.notas li{
  display: none;
  }

  div.imagen_mapa:hover ul.notas li{
  display: block;
  }

  /*Aplicar estilos al texto de las notas y posicionarlo debajo de cada nota*/
  ul.notas li p{
  position: absolute;
  top: 100%;

  background: tomato;
  opacity: 0.65%;

  margin: 10px 0 0 0;
  padding: 0.3em;
  }

  /*Oculta el texto de la nota*/
  ul.notas li p{
  display: none;
  }

  ul.notas li:hover p{
  display: block;
  }

  /*Establece las dimensiones y posiciona cada nota*/
  ul.notas li#nota1{
  width: 1px; height: 13px; top: 755px; left: 458px;/*UCP*/
  }

  ul.notas li#nota2{
  width: 1px; height: 13px; top:755px; left: 461px;/*UTP*/
  }

  ul.notas li#nota3{
  width: 1px; height: 13px; top: 7450px; left: 457px;/*Colombo*/
  }

  ul.notas li#nota4{
  width: 1px; height: 13px; top: 750px; left: 463px;/*ESAP*/
  }

  ul.notas li#nota5{
  width: 1px; height: 13px; top: 770px; left: 458px;/*FUAA*/
  }

  ul.notas li#nota6{
  width: 1px; height: 13px; top: 766px; left: 453px;/*SENA*/
  }

  ul.notas li#nota7{
  width: 1px; height: 13px; top: 788px; left: 455px;/*Universid*/
  }

  ul.notas li#nota8{
  width: 1px; height: 13px; top: 773px; left: 448px;/*Univ*/
  }

  ul.notas li#nota9{
  width: 1px; height: 13px; top: 783px; left: 438px;/*Universida Coperativa de C*/
  }

  ul.notas li#nota10{
  width: 1px; height: 13px; top: 758px; left: 469px;/*CIAF*/
  }

  ul.notas li#nota11{
  width: 1px; height: 13px; top: 724px; left: 481px;/*unisarc*/
  }

  El blog con el que necesito ayuda es (visible solo para usuarios conectados).

• 

  titiruizah · Miembro · agosto 31, 2015 at 3:22 pm

  • Copiar enlace

  Aqui esta la pagina donde necesito ayudad

  «http://biblioteca.ucp.edu.co/catalogo/»