cambiar la escala según resolución web

DarthVader #1 Ene '13

Muy buenas,

Me estoy volviendo loco intentando adaptar una web a diferentes resoluciones.

En este caso el responsive-design no me sirve, porq hay un texto fijo sin scroll ni overflow que ha de permanecer encima de una imagen de fondo de 374px de ancho y de alto debería cubrir siempre todo el alto de la pantalla.

Es un follón porque en esa misma div, más abajo aparece un menú para navegar por la misma web, y más abajo aún los iconos facebook y blog.

La cosa está es que si lo hago con responsive design y pruebo de empequeñecer la ventana, esa imagen se descoloca etc. etc..

El gran problema está en que esta web no se ve bien si el ALTO de la web es inferior a 1080. (portátiles de pantalla 1024 x 700 y pico). EVITANDO scrolls.

Si es superior veremos un espacio que no importa, pero si es inferior se empieza a comer el menu de abajo y los inconos de facebook y blog.

La única solución que encuentro es conseguir que la web se ESCALE según resolución. Se escale entera. (es decir, hacer zoom negativo si la resolución es menor )

¿Alguien sabe de algún script o jquery que lo realice? me vuelto loco buscando pero na de na.

Gracias.

Merkury #2 Ene '13

#1 Si el responsive design no te sirve ¿como piensas hacerlo?

Vamos, la idea de realizar diseños front end adaptativos es que los elementos se recoloquen, la clave es como recolocarlos, si el texto ha de estar encima de la foto SIEMPRE, tendrás que ver como montarlo.

Vamos de todas formas la idea del zoom no se, yo lo veo muy rebuscado...

Deja la web y le echo un ojo a ver si se me ocurre algo.

#3 Me refería al link (si la tienes subida)

1 respuesta

DarthVader #3 Ene '13

no la tengo subida

te voy a poner una screen

spoiler


<body>


<img id="fondo" src="images/wedding.jpg" alt="Fondo" />  /* aqui puedo meter la imagen de fondo y que se redimensione según screen. Esto no me da ploblemas. Va bien en todas las resoluc.*/

  

  <div id="capa">
    <img src="images/capa1.png"/>
    <div id="logo">
      <img src="images/logo.png" alt="logo" align="top"/>  /* Esta es la capa que contiene el logo arriba a la izq y además una imagen de fondo con zindex-1 donde encima de ella va el texto de la web después un menú y después dos iconos para facebook y blog. Todo a lo alto. Es bastante estrecha. */
     


<div class="content">
       

   

  <p>Ponemos a vuestra disposici&oacute;n todo nuestro esfuerzo, profesionalidad y dedicaci&oacute;n para que vuestra celebraci&oacute;n sea un &eacute;xito.<br />
  Trabajamos para que vuestra <strong>boda</strong> sea &uacute;nica, personalizada y a vuestro gusto. </p>
<p>Entra y descubre como conseguir una <strong>boda perfecta</strong> sin dejar lugar a los imprevistos y contando con vuestra <strong>organizadora de bodas</strong> durante todo el año.</p><br />  /* el texto de la web con su estilo (content)*/

   <p align="right"><a href="cat/index.html">Català</a> | <a href="index.html">Castellano</a></p>
  </div>  /* vínculos de selección de idioma*/

<ul class="sidenav">  /* el menú
<li class="si"><a href="index.html">INICIO</a><li>
<li><a href="nosotros.html">NOSOTROS</a> </li>
<li><a href="casarme.html">QUIERO CASARME</a> </li>
<li><a href="privadas.html">FIESTAS PRIVADAS</a> </li>
<li><a href="fotos_y_videos.html">FOTOS Y VIDEOS</a></li>
<li><a href="prensa_television.html">PRENSA Y TELEVISI&Oacute;N</a> </li>
   <li><a href="contacto.html">CONTACTO</a> </li>
          </ul>    
           



        <div id="piedepagina2"> <a href="http://www.facebook.com/pages/Organizadora-de-bodas"><img src="images/facebook_organizadora_de_bodas.png" hspace="7
  " border="0" alt="organizacion de bodas facebook"  onmouseover="MM_swapImage('bodas_barcelona','','images/blog_wedding_planner_bodas_.png',1)" onmouseout="MM_swapImgRestore()"/></a><a href="#"><img src="images/blog_organizadora_de_bodas.png" border="0" alt="wedding planner blog" name="blog_bodas" id="blog_bodas" onmouseover="MM_swapImage('blog_bodas','','images/blog_organizadora_de_bodas_.png',1)" onmouseout="MM_swapImgRestore()"/></a></div>   

</div>  /* los iconos de facebook*/


<div id="piedepagina">
<p> Organizaci&oacute;n de bodas Copyright &copy; 2013 | Legal | web design : </p> 
</div>  /* pie q contiene info y va a la derecha fuera del follon . No me da problemas*/
  </div>
  

</body>

#2

spoiler

body {
	
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
padding:0px;




}
h2{
	padding-bottom:10px;
	padding-left: 75px;
	color: #EEE;
	font-size: 18px;
	letter-spacing: 9px;
	font-family: "Kozuka Gothic Pro EL";
	word-spacing: 6em;
}
	
#fondo {
	  

  position:fixed;
  z-index: -1;
  top: 0;
  left: 0;
  width: 100%;
  height:100%;
}


#logo {
	position:fixed;
	height:auto;
	width:auto;


}		

#capa {
	width:auto;
	height:1080px;
	background-image:url(../images/capa1.png);
	position: fixed;
	background-attachment: fixed;
}


#logo .content {
	width:340px;
	position:inherit;
	color:#FFFFFF;
	font-family: Arial;
	line-height:16px;
	font-size: 13px;
	padding-left:16px;
	padding-right:8px;
	padding-top:95px;
	TEXT-DECORATION: none;
	TEXT-ALIGN:justify;
	visibility: visible;
	height: 340px;
	overflow: auto;
	
}



#piedepagina {
	
margin-left:auto;
right:0;
padding-right:5px;
line-height:6px;
text-align: right;
color:#FFF;
font-size: 12px;
position: fixed;
bottom: 0 !important;
bottom: -1;
font-family: Arial;
width:2000px;
}

#piedepagina2 {
	height:auto;
	height:40px;
	width:280px;
	position:absolute;
	color:#FFFFFF;
	font-family: Arial;
	line-height:10px;
	font-size: 11px;
	padding-left:86px;
	padding-right:10px;
	text-align:right;
	left: 0px;
}
ul.sidenav {
	/* el rectángulo contenedor */
list-style: none;
text-decoration:none;
text-align:left;
line-height:10px;
letter-spacing:1px;
font-size:12px;
color:#FFFFFF;
font-family:Euphemia;
padding-top:485px;
padding-left:65px;
padding-right:30px;



 
}
ul.sidenav li a {
  /* el enlace de cada item */
  display: block;
  text-decoration: none;
  font-family:Euphemia;
  /* propiedades optativas */
  color: #FFFFFF;
  letter-spacing:1px;
  font-size:12px;
  line-height:26px;
  padding-left:26px;
  padding-right:40px;
  padding-top:0px;
  padding-bottom:0px;
  width:160px;
}

ul.sidenav li.si a {
width:140px;
  /* el enlace de cada item */
  display:block;
  text-decoration: none;
  font-family:Euphemia;
  /* propiedades optativas */
  color: #FFFFFF;
  letter-spacing:1px;
  font-size:12px;
  line-height:28px;
  padding-left:0px;
    padding-top:0px;
  padding-bottom:10px;
}

ul.sidenav li.si a:hover {
  /* propiedades optativas */
  color:#999999;
  background:none;
   

  }
  


ul.sidenav li a:hover {

  /* propiedades optativas */
  color:#999999;
  background: transparent url(../images/selector.png) left no-repeat;
   

  }
  

ul.sidenav li a:hover span {
  /* el contenido se muestra al pasar el cursor encima */
  display: block;
  /* propiedades optativas */

1 respuesta

eXtreM3 #4 Ene '13

Utiliza responsive. Lo guay de las media queries con resolución es que puedes modificar el contenido según el dispositivo, ocultar y/o mostrar capas...

La estructura que has maquetado en tu web es bastante típica amoldarla a responsive. La parte de la izquierda (menús con fondo transparente) quedaría en el top de la web. El menú en un desplegable.

Debajo de todo eso empiezas a meter las imágenes.

Incluso montar un gallery para que se muestre sólo con dispositivos pequeños (de 480 pabajo por ejemplo para los landscapes) y las colocas con 100% de width y height.

Creo que no me he explicado muy bien, el resumen es: el objetivo del responsive es amoldar tu web para que el usuario vea lo que tú quieras que vea, que por lo general no es la web completa, sino las partes significantes.

1 respuesta

B

[Borrado] #5 Ene '13

En vez de poner una etiqueta imagen, haz un contenedor y le metes background-cover.

#fondo {
	position: fixed;
	height: 100%;
	width: 100%;

background: url(images/wedding.jpg) no-repeat center center fixed; 
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.images/wedding.jpg', sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/wedding.jpg', sizingMethod='scale')";
}

Y en cuanto a lo demás, usa responsive y te evitaras dolores de cabeza. Además como te han dicho es muy fácil adaptar ese diseño.

Edit: no se usar el code. facepalm

1 respuesta

DarthVader #6 Ene '13

#4 muchas gracias por las respuestas tanto #5 viky y #4 eXtreM3

Mañana me pongo con ello y os cuento a ver como me ha quedado la cosa.

En serio, gracias!

1 respuesta

Merkury #7 Ene '13

#6 Veo que ya te han dado la solución, que en el curro se ha torcido el día y no he podido revisar lo que me has dejado, ya lo siento.

De todas formas, como consejo empieza siempre estas cosas con bootstrap o algo que te permita hacer el responsive, en el momento que lo pruebes no pararas.

1 respuesta

DarthVader #8 Ene '13

#7 gracias igualmente Merkury

speciaL #9 Ene '13

#1 Por si tienes mas tiempo y quieres ver vídeos en desarrolloweb.com y en HTML5SPAIN hay mucho sobre Responsive Web Design y en HTML5

http://www.desarrolloweb.com/manuales/videotutoriales-responsive-web-design.html
http://desarrolloweb.com/en-directo/hangout-imagenes-responsive-design-7814.html
http://youtu.be/EqCrJByQb_g

Y te dejo mi web que esta en responsive por si quieres mirar el código www.jorgeatgu.com

cambiar la escala según resolución web

Usuarios habituales

Tags