• Sábado 27 de Abril de 2024, 04:18

Autor Tema:  Adaptar Un Fondo  (Leído 7820 veces)

manurodri189

  • Miembro MUY activo
  • ***
  • Mensajes: 117
    • Ver Perfil
Adaptar Un Fondo
« en: Lunes 4 de Diciembre de 2006, 17:03 »
0
Pues eso meti un fondo, pero dependiendo con que ordenador lo vea se ve bien o mal, y quisiera saber como lo adapto para que con cualquier resolución se vea bien siempre.Salu2



Mollense

  • Miembro de PLATA
  • *****
  • Mensajes: 1755
  • Nacionalidad: ar
    • Ver Perfil
    • http://solocodigo.com/
Re: Adaptar Un Fondo
« Respuesta #1 en: Lunes 4 de Diciembre de 2006, 17:14 »
0
Cita de: "manurodri189"
Pues eso meti un fondo, pero dependiendo con que ordenador lo vea se ve bien o mal, y quisiera saber como lo adapto para que con cualquier resolución se vea bien siempre.Salu2
¿A que te refieres con bien o mal?
"Los que renuncian son más numerosos que los que fracasan" H.F.
"No se cómo sería la III Guerra Mundial, pero la cuarta sería con piedras" A.E.
"Quién no fía no es de fiar..."


...no te quedes mirando.

manurodri189

  • Miembro MUY activo
  • ***
  • Mensajes: 117
    • Ver Perfil
Re: Adaptar Un Fondo
« Respuesta #2 en: Lunes 4 de Diciembre de 2006, 17:18 »
0
por ejemplo en una resolucion de 1024x768 se ve bien, pero en la de un portatil con pantalla panoramica, no. Digamos que a la derecha falta un cacho de foto, pero vuelve a empezar la imagen de fondo.Salu2



Mollense

  • Miembro de PLATA
  • *****
  • Mensajes: 1755
  • Nacionalidad: ar
    • Ver Perfil
    • http://solocodigo.com/
Re: Adaptar Un Fondo
« Respuesta #3 en: Lunes 4 de Diciembre de 2006, 18:23 »
0
Si, por defecto una imágen de fondo se repite hasta completar la pantalla.

Para que no se repita puedes usar CSS:

Código: Text
  1. <html>
  2.   <head>
  3.     <style type="text/css">
  4.       body {background-image: url(Fondo.gif); background-repeat: no-repeat}
  5.     </style>
  6.   </head>
  7.   <body>
  8.   </body>
  9. </html>
  10.  

Pero de esta manera no se cubre toda la pantalla.
Para centrar la imagen en vez de insertar la imágen en el body lo deberías hacer en un div.

------------------------------------------------------------------------------------------------

Yo no se utilizar capas ni se si todos los navegadores las soportan pero  haciendo uso de estas supongo que podrías insertar una imágen en una capa y utilizar las propiedades width=100% y height=100% para estirarla a toda la pantalla sin importar la resolución del monitor.
"Los que renuncian son más numerosos que los que fracasan" H.F.
"No se cómo sería la III Guerra Mundial, pero la cuarta sería con piedras" A.E.
"Quién no fía no es de fiar..."


...no te quedes mirando.

ArKaNtOs

  • Miembro de PLATA
  • *****
  • Mensajes: 1253
  • Nacionalidad: mx
    • Ver Perfil
Re: Adaptar Un Fondo
« Respuesta #4 en: Lunes 4 de Diciembre de 2006, 19:07 »
0
o puedes realizar esto

<style type="text/css">
body { background: #f0f0f0 url(Fondo.gif) center center no-repeat; }
/* con esto estableces un color de fondo para los lados de la imagen ya que esta estara centrada */
</style>

mas información sobre background:
http://www.w3schools.com/css/css_background.asp

manurodri189

  • Miembro MUY activo
  • ***
  • Mensajes: 117
    • Ver Perfil
Re: Adaptar Un Fondo
« Respuesta #5 en: Lunes 4 de Diciembre de 2006, 19:21 »
0
Cita de: "Angel_K_ido"
Si, por defecto una imágen de fondo se repite hasta completar la pantalla.

Para que no se repita puedes usar CSS:

Código: Text
  1. &#60;html&#62;
  2.   &#60;head&#62;
  3.     &#60;style type=&#34;text/css&#34;&#62;
  4.       body {background-image: url(Fondo.gif); background-repeat: no-repeat}
  5.     &#60;/style&#62;
  6.   &#60;/head&#62;
  7.   &#60;body&#62;
  8.   &#60;/body&#62;
  9. &#60;/html&#62;
  10.  

Pero de esta manera no se cubre toda la pantalla.
Para centrar la imagen en vez de insertar la imágen en el body lo deberías hacer en un div.

------------------------------------------------------------------------------------------------

Yo no se utilizar capas ni se si todos los navegadores las soportan pero  haciendo uso de estas supongo que podrías insertar una imágen en una capa y utilizar las propiedades width=100% y height=100% para estirarla a toda la pantalla sin importar la resolución del monitor.
Esto no me funciona, no se si estara algo mal pero no me va



manurodri189

  • Miembro MUY activo
  • ***
  • Mensajes: 117
    • Ver Perfil
Re: Adaptar Un Fondo
« Respuesta #6 en: Lunes 4 de Diciembre de 2006, 19:23 »
0
Cita de: "ArKaNtOs"
o puedes realizar esto

<style type="text/css">
body { background: #f0f0f0 url(Fondo.gif) center center no-repeat; }
/* con esto estableces un color de fondo para los lados de la imagen ya que esta estara centrada */
</style>

mas información sobre background:
http://www.w3schools.com/css/css_background.asp
Esto si me funciona, el problema ya no es solo el fondo, es que al cambiar la configuracion de la pantalla, se me descolocan hasta los botones y demas, sabes como lo puedo solucionar, digamos que esa web adopte la resolucion que tengo?.Salu2



ArKaNtOs

  • Miembro de PLATA
  • *****
  • Mensajes: 1253
  • Nacionalidad: mx
    • Ver Perfil
Re: Adaptar Un Fondo
« Respuesta #7 en: Lunes 4 de Diciembre de 2006, 19:35 »
0
digamos si estas usando tablas puedes en vez de decir <table width='80%'  podrías adaptarlo a cierta cantidad de pixeles digamos <table width='500px' asi aunque cambie de resolución siempre sera lo mismo :) si estas usando div puedes crear un div como contenedor de los demas div ejemplo

[dohtml]
<div align="center" style="background-color: #f0f0f0; border: 3px #000 dashed; width: 500px">
<div style='border: 2px #ff3300 solid; float: left ; width: 145px;' align='center'>menu</div>
<div style='border: 2px #009bf5 solid; margin-left: 150px;' align='center'>texto</div>
</div>
[/dohtml]

codigo:
Código: Text
  1.  
  2. &#60;div align='center' style='background-color: #f0f0f0; border: 3px #000 dashed; width: 350px'&#62;
  3. &#60;div style='border: 2px #ff3300 solid; float: left; width: 145px;' align='center'&#62;menu&#60;/div&#62;
  4. &#60;div style='border: 2px #009bf5 solid; margin-left: 150px;' align='center'&#62;texto&#60;/div&#62;
  5. &#60;/div&#62;
  6.  
espero algo así te refieras

Mollense

  • Miembro de PLATA
  • *****
  • Mensajes: 1755
  • Nacionalidad: ar
    • Ver Perfil
    • http://solocodigo.com/
Re: Adaptar Un Fondo
« Respuesta #8 en: Lunes 4 de Diciembre de 2006, 19:59 »
0
Cita de: "manurodri189"
Cita de: "Angel_K_ido"
Si, por defecto una imágen de fondo se repite hasta completar la pantalla.

Para que no se repita puedes usar CSS:

Código: Text
  1. &#60;html&#62;
  2.   &#60;head&#62;
  3.     &#60;style type=&#34;text/css&#34;&#62;
  4.       body {background-image: url(Fondo.gif); background-repeat: no-repeat}
  5.     &#60;/style&#62;
  6.   &#60;/head&#62;
  7.   &#60;body&#62;
  8.   &#60;/body&#62;
  9. &#60;/html&#62;
  10.  

Pero de esta manera no se cubre toda la pantalla.
Para centrar la imagen en vez de insertar la imágen en el body lo deberías hacer en un div.

------------------------------------------------------------------------------------------------

Yo no se utilizar capas ni se si todos los navegadores las soportan pero  haciendo uso de estas supongo que podrías insertar una imágen en una capa y utilizar las propiedades width=100% y height=100% para estirarla a toda la pantalla sin importar la resolución del monitor.
Esto no me funciona, no se si estara algo mal pero no me va
Donde dice Fondo.gif debes poner la url de tu imagen de fondo. Si la imagen se llamara fondo.gif y estuviese en el mismo directorio que tu página entonces el código que te di funcionaría.
"Los que renuncian son más numerosos que los que fracasan" H.F.
"No se cómo sería la III Guerra Mundial, pero la cuarta sería con piedras" A.E.
"Quién no fía no es de fiar..."


...no te quedes mirando.

manurodri189

  • Miembro MUY activo
  • ***
  • Mensajes: 117
    • Ver Perfil
Re: Adaptar Un Fondo
« Respuesta #9 en: Lunes 4 de Diciembre de 2006, 20:13 »
0
Cita de: "ArKaNtOs"
digamos si estas usando tablas puedes en vez de decir <table width='80%'  podrías adaptarlo a cierta cantidad de pixeles digamos <table width='500px' asi aunque cambie de resolución siempre sera lo mismo :) si estas usando div puedes crear un div como contenedor de los demas div ejemplo

[dohtml]
<div align='center' width='350px' style='background-color: #f0f0f0; border: 3px #000 dashed;'>
<div style='border: 2px #ff3300 solid; float: left ; width: 145px;' align='center'>menu</div>
<div style='border: 2px #009bf5 solid; margin-left: 150px;' align='center'>texto</div>
</div>
[/dohtml]

codigo:
Código: Text
  1.  
  2. &#60;div align='center' width='350px' style='background-color: #f0f0f0; border: 3px #000 dashed;'&#62;
  3. &#60;div style='border: 2px #ff3300 solid; float: left; width: 145px;' align='center'&#62;menu&#60;/div&#62;
  4. &#60;div style='border: 2px #009bf5 solid; margin-left: 150px;' align='center'&#62;texto&#60;/div&#62;
  5. &#60;/div&#62;
  6.  
espero algo así te refieras
No no estoy usando nada de eso.Salu2



manurodri189

  • Miembro MUY activo
  • ***
  • Mensajes: 117
    • Ver Perfil
Re: Adaptar Un Fondo
« Respuesta #10 en: Lunes 4 de Diciembre de 2006, 20:15 »
0
Cita de: "Angel_K_ido"
Cita de: "manurodri189"
Cita de: "Angel_K_ido"
Si, por defecto una imágen de fondo se repite hasta completar la pantalla.

Para que no se repita puedes usar CSS:

Código: Text
  1. &#60;html&#62;
  2.   &#60;head&#62;
  3.     &#60;style type=&#34;text/css&#34;&#62;
  4.       body {background-image: url(Fondo.gif); background-repeat: no-repeat}
  5.     &#60;/style&#62;
  6.   &#60;/head&#62;
  7.   &#60;body&#62;
  8.   &#60;/body&#62;
  9. &#60;/html&#62;
  10.  

Pero de esta manera no se cubre toda la pantalla.
Para centrar la imagen en vez de insertar la imágen en el body lo deberías hacer en un div.

------------------------------------------------------------------------------------------------

Yo no se utilizar capas ni se si todos los navegadores las soportan pero  haciendo uso de estas supongo que podrías insertar una imágen en una capa y utilizar las propiedades width=100% y height=100% para estirarla a toda la pantalla sin importar la resolución del monitor.
Esto no me funciona, no se si estara algo mal pero no me va
Donde dice Fondo.gif debes poner la url de tu imagen de fondo. Si la imagen se llamara fondo.gif y estuviese en el mismo directorio que tu página entonces el código que te di funcionaría.
jejeje, soy novato en esto pero hasta ahi llego, y no me funciona no se porque.Salu2



ArKaNtOs

  • Miembro de PLATA
  • *****
  • Mensajes: 1253
  • Nacionalidad: mx
    • Ver Perfil
Re: Adaptar Un Fondo
« Respuesta #11 en: Lunes 4 de Diciembre de 2006, 20:17 »
0
Cita de: "manurodri189"
No no estoy usando nada de eso.Salu2
tienes la dirección de tu sitio? o el archivo .html para que asi entendamos que es lo que necesitas?, debes ser mas claro &lt;_&lt;

Mollense

  • Miembro de PLATA
  • *****
  • Mensajes: 1755
  • Nacionalidad: ar
    • Ver Perfil
    • http://solocodigo.com/
Re: Adaptar Un Fondo
« Respuesta #12 en: Lunes 4 de Diciembre de 2006, 20:23 »
0
Muy cierto. Muéstranos tu código y así podremos ayudarte.
"Los que renuncian son más numerosos que los que fracasan" H.F.
"No se cómo sería la III Guerra Mundial, pero la cuarta sería con piedras" A.E.
"Quién no fía no es de fiar..."


...no te quedes mirando.

manurodri189

  • Miembro MUY activo
  • ***
  • Mensajes: 117
    • Ver Perfil
Re: Adaptar Un Fondo
« Respuesta #13 en: Lunes 4 de Diciembre de 2006, 20:38 »
0
Os pongo un trocillo, a ver si os vale:


Citar
<html>
<head>
<title>ARPAF</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
body {
   background-image:  url(Imagenes/Fondo%20Web%20Try.jpg);
   color: #FFFFFF;
}
.Estilo1 {
   color: #000000;
   font-weight: bold;
}
.Estilo2 {color: #FFFFFF}
-->
</style></head>
<body>


espero que os sirva Salu2



Mollense

  • Miembro de PLATA
  • *****
  • Mensajes: 1755
  • Nacionalidad: ar
    • Ver Perfil
    • http://solocodigo.com/
Re: Adaptar Un Fondo
« Respuesta #14 en: Lunes 4 de Diciembre de 2006, 21:42 »
0
A ver maestro...

Si tu problema ya no es el fondo. ¿Por qué posteas esa parte del código y ni siquiera nos dices dondes usas Estilo1 y Estilo2?.

¿Tienes miedo de que te robemos alguna idea?

Te voy a dar un trocito de la solución que necesitas:

Tienes que...
"Los que renuncian son más numerosos que los que fracasan" H.F.
"No se cómo sería la III Guerra Mundial, pero la cuarta sería con piedras" A.E.
"Quién no fía no es de fiar..."


...no te quedes mirando.

manurodri189

  • Miembro MUY activo
  • ***
  • Mensajes: 117
    • Ver Perfil
Re: Adaptar Un Fondo
« Respuesta #15 en: Lunes 4 de Diciembre de 2006, 21:49 »
0
jejeje, lo siento, no hace falta que te pongas asi, no es nada importante, si quieres te pongo la pagina entera, no me importa, pero no se cual es el problema que tengo?, yo pensaba que era el fondo o la resolución, aver de todas maneras, yo pongo todo el codigo de la pagina sin ningun tipo de problema.

Citar
<html>
<head>
<title>ARPAF</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
body {
   background-image:  url(Imagenes/Fondo%20Web%20Try.jpg);
   color: #FFFFFF;
}
.Estilo1 {
   color: #000000;
   font-weight: bold;
}
.Estilo2 {color: #FFFFFF}
-->
</style></head>
<body>
<p><strong> 
    <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=5,0,0,0" width="108" height="46">
      <param name="BGCOLOR" value="#6B828A">
      <param name="movie" value="button2.swf">
      <param name="quality" value="high">

      <embed src="button2.swf" width="108" height="46" quality="high" pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" bgcolor="#6B828A" ></embed>
    </object>
</strong>
  <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=5,0,0,0" width="108" height="46">
    <param name="movie" value="button3.swf">
    <param name="quality" value="high">
    <param name="bgcolor" value="#668286">
    <embed src="button3.swf" quality="high" pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="108" height="46" bgcolor="#668286"></embed>
  </object>

</p>
<p><center>
  <p><img src="Imagenes/Logo%20ARPAF.jpg" width="350" height="142"></p>
  <p> </p>
</center></p>
<p><strong><center>Registro</center></p>
<form name="form1" method="post" action="">
  <center>
  <input name="registroname" type="text" id="registroname" value="" size="20"></center>
</form></p>
<p><center>Password</center></p>

<form name="form2" method="post" action="">
  <center>
  <input name="Contrasena" type="password" id="Contrasena" size="20" maxlength="20"></center>
</form></p>
<p>
  <center>
    <p>
      <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=5,0,0,0" name="Login" width="100" height="22" id="Login">
        <param name="BGCOLOR" value="">
        <param name="movie" value="button4.swf">

        <param name="quality" value="high">
        <embed src="button4.swf" width="100" height="22" quality="high" pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" name="Login" ></embed>
      </object>
    </p>
    <p><center class="Estilo1"><a href="registro.htm" class="Estilo2">Registrarse</a></center>
    </p>
  </center>
</p>
<p> <center>

  Aqui se supone que tenemos que poner la presentacion a la web, todo wapas en blanco, para que se vea bien. Modificalo en el codigo.
</center></p>
</body>
</html>

eso es todo, de todas maneras me faltaria por colgarte las imagenes y los botones, no creo que haga falta, pero bueno ya no se.Salu2


PD: no hace falta que te pongas asi, soy novato y no se mucho de esto.



Mollense

  • Miembro de PLATA
  • *****
  • Mensajes: 1755
  • Nacionalidad: ar
    • Ver Perfil
    • http://solocodigo.com/
Re: Adaptar Un Fondo
« Respuesta #16 en: Lunes 4 de Diciembre de 2006, 22:33 »
0
ok, ¿Cómo te aparece a tí y cómo quieres que se vea en realidad?
"Los que renuncian son más numerosos que los que fracasan" H.F.
"No se cómo sería la III Guerra Mundial, pero la cuarta sería con piedras" A.E.
"Quién no fía no es de fiar..."


...no te quedes mirando.

manurodri189

  • Miembro MUY activo
  • ***
  • Mensajes: 117
    • Ver Perfil
Re: Adaptar Un Fondo
« Respuesta #17 en: Lunes 4 de Diciembre de 2006, 22:41 »
0
Pues en mi ordenador de sobremesa con una resolucion de 1024x768 se me ve bien, sin problemas ninguno, pero el ordenador donde hago las presentaciones es portatil con pantalla panoramica de 15,4" (no me acuerdo de la resolucion) y quiero que se vea bien, y no como mosaicos, (digamos en el trozo de pantalla de la derecha) esque no se explicarme, espero que me hayas, entendido.Salu2



Mollense

  • Miembro de PLATA
  • *****
  • Mensajes: 1755
  • Nacionalidad: ar
    • Ver Perfil
    • http://solocodigo.com/
Re: Adaptar Un Fondo
« Respuesta #18 en: Lunes 4 de Diciembre de 2006, 23:01 »
0
Ok, ya está.

¿No decías que ahora el problema es otro?

Si no quieres que te quede una franja a la derecha en la que se repite tu imagen empieza a leer de nuevo este post.

Hasta siempre.
"Los que renuncian son más numerosos que los que fracasan" H.F.
"No se cómo sería la III Guerra Mundial, pero la cuarta sería con piedras" A.E.
"Quién no fía no es de fiar..."


...no te quedes mirando.

manurodri189

  • Miembro MUY activo
  • ***
  • Mensajes: 117
    • Ver Perfil
Re: Adaptar Un Fondo
« Respuesta #19 en: Lunes 4 de Diciembre de 2006, 23:05 »
0
Tio, no te entiendo, puedes ser mas explicito, el problemas es ese y siempre ha sido ese, y he puesto lo que me habeis dixo, el primero (el tuyo) no me funciona (no hace nada), y el segundo se me descolcan los botones, eso es lo unico que sucede.Salu2



ArKaNtOs

  • Miembro de PLATA
  • *****
  • Mensajes: 1253
  • Nacionalidad: mx
    • Ver Perfil
Re: Adaptar Un Fondo
« Respuesta #20 en: Martes 5 de Diciembre de 2006, 00:53 »
0
bueno noto un problema y es qyue no me hiciste caso, pusiste esto:
body{
background-image:  url(Imagenes/Fondo%20Web%20Try.jpg);
color: #FFFFFF;
}

cuando en realidad debiste poner algo asi:

background: #ffffff url(Imagenes/Fondo%20Web%20Try.jpg) top center no-repeat;

ya que con color, lo que haces es cambiar el color de la letra

y a tus botones hechos en flash estableceles el ancho y alto, y los puedes meter dentro de un div para que no se separen y asi con solo centrar el div, centraras todos los botones de un golpe, bueno ahi nos vemos,espero te sirva  :ph34r:

manurodri189

  • Miembro MUY activo
  • ***
  • Mensajes: 117
    • Ver Perfil
Re: Adaptar Un Fondo
« Respuesta #21 en: Martes 5 de Diciembre de 2006, 10:57 »
0
Ok he puesto eso y he puesto el color negro en vez del blanco, y no queda mal, pero sigo teniendo el problema de los botones, que se descolocan, y se van hacia la izquierda, o mas bien se quedan en el mismo lado pero no me cuadra con el fondo, esque el problema que tengo esque no se que es un div, a ver si me puedes echar una mano.Gracias.Salu2


PD: si te hice caso, pero lo volvi a modificar como estaba, ya que no me servia.



F_Tanori

  • Moderador
  • ******
  • Mensajes: 1919
  • Nacionalidad: mx
    • Ver Perfil
Re: Adaptar Un Fondo
« Respuesta #22 en: Martes 5 de Diciembre de 2006, 11:05 »
0
Son capas

http://www.w3schools.com/tags/tag_div.asp
http://www.htmlcodetutorial.com/_DIV.html

http://www.google.com.mx/search?hl=es&sa=X...iv+html&spell=1

es 'lo nuevo' en el diseño web aunque a veces una tabla pude solucionar  :ph34r:

que es lo que tienes en el fondo?

una fotografia? o algun diseño especial? un degrade?

Saludos
" ExIsTo y A vEcEs PiEnSo "

NOTA:
===========================================================================================================================
Este foro es para ayudar, aprender, compartir... usenlo para eso,
NO SE RESUELVEN DUDAS POR MENSAJE PRIVADO Y MENOS POR CORREO
===========================================================================================================================

manurodri189

  • Miembro MUY activo
  • ***
  • Mensajes: 117
    • Ver Perfil
Re: Adaptar Un Fondo
« Respuesta #23 en: Martes 5 de Diciembre de 2006, 11:10 »
0
Gracias lo exare un ojo a ver si tengo un ratillo.

En el fondo simplemente tengo una fotografia, nada del otro mundo, si es un trabajillo simple, se supone. Salu2



F_Tanori

  • Moderador
  • ******
  • Mensajes: 1919
  • Nacionalidad: mx
    • Ver Perfil
Re: Adaptar Un Fondo
« Respuesta #24 en: Martes 5 de Diciembre de 2006, 11:16 »
0
" ExIsTo y A vEcEs PiEnSo "

NOTA:
===========================================================================================================================
Este foro es para ayudar, aprender, compartir... usenlo para eso,
NO SE RESUELVEN DUDAS POR MENSAJE PRIVADO Y MENOS POR CORREO
===========================================================================================================================