Gracias Gracias:  4
Resultados 1 al 14 de 14

Tema: dreamweaver fondo degradado urgente

  1. #1
    Cereal Killer Avatar de Dexter
    Fecha de ingreso
    Oct 2004
    Ubicación
    Laboratorio submarino a 15 minutos de la Atlántida
    Mensajes
    3,936

    dreamweaver fondo degradado (urgente)

    pues que tengo que hacer una página y el fondo tiene que tener un degradado, lo jodido es que tiene tres colores, con el blanco en el centro....

    Yo lo que he hecho es recortar una tira de 1 pixel de alto y ponerlo en propiedades de página como background, repitiendose en "Y".. pero claro, tiene 1024 de largo y si haces la ventana más grande se ve el carton... osea, que se corta a la derecha...

    debería quedar así:


    ¿Como podría hacerlo? se me ha ocurrido ponerle de color de fondo el azul de la derecha, igual así no se notaria el corte, pero no se..
    Miniaturas adjuntadas Miniaturas adjuntadas dreamweaver fondo degradado  urgente -wellcomenvg.jpg  

  2. #2
    Cereal Killer Avatar de Dexter
    Fecha de ingreso
    Oct 2004
    Ubicación
    Laboratorio submarino a 15 minutos de la Atlántida
    Mensajes
    3,936

    Respuesta: dreamweaver fondo degradado (urgente)

    he cambiado el color del fondo al del último pixel del degradado...


    no queda mal del todo pero... hay manera de que el degradado se ajuste al tamaño de la ventana/pantalla?

    Miniaturas adjuntadas Miniaturas adjuntadas dreamweaver fondo degradado  urgente -05-11-2009-18-27-59.jpg  

  3. #3
    BlenderAdicto Avatar de Caronte
    Fecha de ingreso
    Dec 2004
    Ubicación
    Valencia-España
    Mensajes
    14,691

    Respuesta: dreamweaver fondo degradado (urgente)

    Hace mucho que no toco HTML, pero creo recordar que se podía hacer dentro de una tabla, o sea, haciendo que una tabla de una única celda ocupe toda la pantalla.
    Pero ojo, tendrás que probarlo, porque no estoy seguro
    "Algún día todo será digital". Caronte.
    Mi web: NicoDigital.com

  4. #4
    Senior Member Avatar de Ruramuq
    Fecha de ingreso
    Sep 2004
    Mensajes
    124

    Respuesta: dreamweaver fondo degradado (urgente)

    creo que la única manera es usando una imagen <img con css width/height 100% para que se estire.. y ponerla detrás de todo.. pero IE6 no suaviza el estiramiento así que no sé si se veria bien, y de estirarse, volveria la página ligeramente más lenta en IE..

  5. #5
    Cereal Killer Avatar de Dexter
    Fecha de ingreso
    Oct 2004
    Ubicación
    Laboratorio submarino a 15 minutos de la Atlántida
    Mensajes
    3,936

    Respuesta: dreamweaver fondo degradado (urgente)

    Cita Iniciado por Caronte Ver mensaje
    Hace mucho que no toco HTML, pero creo recordar que se podía hacer dentro de una tabla, o sea, haciendo que una tabla de una única celda ocupe toda la pantalla.
    Pero ojo, tendrás que probarlo, porque no estoy seguro
    Si, eso había pensado yo también.. hacer una tabla y ponerle de tamaño 100%...

    Cita Iniciado por •Ruramuq• Ver mensaje
    creo que la única manera es usando una imagen <img con css width/height 100% para que se estire.. y ponerla detrás de todo.. pero IE6 no suaviza el estiramiento así que no sé si se veria bien, y de estirarse, volveria la página ligeramente más lenta en IE..
    nah.. creo que al final haré lo de poner el color de fondo del último pixel.. he hecho una búsqueda en google (que tiene cojones que ya sale este post el primero) y parece ser que es lo que se suele hacer....que para otra cosa ya seria javascript

    gracias por la ayuda...

    lo que me esta volviendo loco ahora es hacer que todos los elementos se muevan al maximizar y queden en sus sitio.. yo he hecho páginas pero a mi aire y encima en el DW CS4 han cambiado las cosas, yo usaba tablas y con todo esto de las etiquetas DIV y los estilos CSS me estoy haciendo la picha un lio...

    Yo es que me meto en unos berenjenales, me han dado un .psd con las capas, tiene que quedar tal cual y estoy más perdido que un pulpoide en un garajoide... Lo que hay que hacer por dinero.. con lo agusto que estaría yo viendo el último videotutorial de gnomon de ryan kingsley sobre zspheres2 que me acabo de bajar...

  6. #6
    BlenderAdicto Avatar de Caronte
    Fecha de ingreso
    Dec 2004
    Ubicación
    Valencia-España
    Mensajes
    14,691

    Respuesta: dreamweaver fondo degradado (urgente)

    Yo solo llegue a hacer una página que se escalaba completa (contenido incluido) dependiendo del tamaño de la ventana del navegador y bueno... acabé tan sumamente quemado, que juré que nunca más lo haría.
    Si no es un requisito, móntala con anchura de 1024 centrada y arreando
    "Algún día todo será digital". Caronte.
    Mi web: NicoDigital.com

  7. #7
    Raz Avatar de aedozea
    Fecha de ingreso
    Apr 2007
    Ubicación
    Lima - Peru
    Mensajes
    343

    Thumbs up Respuesta: dreamweaver fondo degradado (urgente)

    Hola Dexter... tu inquietud me llamo la atención así que me puse a probar una que otra opción, te adjunto el archivo que logre hacer... espero te sirva de algo. Te adjunto la página de donde tome el ejemplo.

    http://www.dynamicdrive.com/forums/s...ad.php?t=35488

    Saludos
    Archivos adjuntados Archivos adjuntados

  8. #8
    Cereal Killer Avatar de Dexter
    Fecha de ingreso
    Oct 2004
    Ubicación
    Laboratorio submarino a 15 minutos de la Atlántida
    Mensajes
    3,936

    Respuesta: dreamweaver fondo degradado (urgente)

    Si aedozea, eso es.. lo he probado y me funciona bien, lo que pasa es que ahora cada vez que clico en el fondo se me pone delante y me tapa los otros divs, en la vista previa sale bien pero es un coñazo... me estoy volviendo loco con esto de las etiquetas div.. estoy intentando hacerlo así en lugar de con tablas, coloco los elementos pero se quedan fijos... si pongo la posición en % se mueven pero lo veo tan poco preciso... definitivamente no entiendo esto de los estilos CSS... y eso que hace unos meses hice un cursillo de DW y en su momento lo comprendi.. no debió interesarme mucho porque ya no me acuerdo...

    es algo tan sencillo como montar esto...




    si lo hago con tablas consigo que el contenido se mantenga en el centro de la página.. que se alinee según redimensionas la ventana.. pero no atino a hacer que cada elemento se este en su sitio... si lo hago con divs puedo colocarlos donde quiera pero a ojo y no logro que cada cosa se quede en su sitio

    Caronte, es que no encuentro donde ajustar la resolución de la página.. yo creo recordar que el DW antes te permitia especificarla (800x600..1024x768 etc) pero ahora no lo veo, abajo me salen unas dimensiones pero cuando despliego el menú las otras dimensiones me salen en gris...

    en fin.. lo dicho, que me meto en unos berenjenales... y se supone que tenía que presentarles algo mañana
    Miniaturas adjuntadas Miniaturas adjuntadas dreamweaver fondo degradado  urgente -wellcomenvg.jpg   dreamweaver fondo degradado  urgente -homenvg.jpg  

  9. #9
    Senior Member Avatar de Ruramuq
    Fecha de ingreso
    Sep 2004
    Mensajes
    124

    Respuesta: dreamweaver fondo degradado (urgente)

    si quieres alinear divs al centro de la página usas css con margin:0px auto

    por ejemploe

    <div style="margin:0px auto;width:700px">centro</div>
    donde 700px es el ancho del contenido que va alineado al centro

    también tienes cosas como position:absolute dentro de un position:relative
    así un objecto podrá posicionarse relativo a otro :

    <div style="position:relative;padding:4px 0px">LOGO
    <div style="position:absolute;right:5px;bottom:5px">965 .xx.xx.xx</div>
    </div>

    y también están los float:left float:rigtht

    en tu caso la página parece dividires en 3 secciones principales

    [HTML]
    <style type="text/css">
    html,body{
    width:100%;
    height:100%;
    }
    </style>
    <body style="position:relative;padding:0px;margin:0px;he ight:100%;text-align:center">

    <div style="background-color:#f60;height:100%;position:absolute;top:0px;l eft:0px;width:50%"></div>
    <div style="background-color:#0f0;height:100%;position:absolute;top:0px;r ight:0px;width:50%"></div>
    <div style="width:100%;height:100%;position:absolute;le ft:0px;top:0px;background-image:url(barra.png);background-repeat:repeat-y;background-position:center;"></div>

    <div id="header" style="text-align:center;position:relative;padding:15px 0px;width:700px;height:50px;margin:0px auto">
    <img src="screen.jpg" height="50" width="200" />
    <div style="position:absolute;right:10px;bottom:10px">9 55.xxx.x.x.x.x..</div>
    </div>

    <div id="screen" style="height:300px;margin:0px auto;width:700px;position:relative;border:1px solid black">screen
    <div style="position:absolute;right:20px;bottom:10px">
    <ul style="list-style:none">
    <li style="float:left;"><a href="#" style="padding:0px 10px">Descargas</a></li>
    <li style="float:left;"><a href="#" style="padding:0px 10px">Contacto</a></li>
    </ul>
    </div>
    </div>

    <div id="footer" style="margin:0px auto;width:700px">Llamenos desde su Operador..</div>

    </body>
    [/HTML]

    en este ejemplo el background no se estira solo se usan colores planos usndo 2 divs para darle ese color plano..(no se si hay una mejor manera)
    funciona en IE5.5+> IE8 firefox opera chrome..
    estoy usando inline styles pero lo ideal es poner todos los styles juntos y luego sacarlos a un archivo .css

    estoy usando tu background aedozea..

  10. #10
    Raz Avatar de aedozea
    Fecha de ingreso
    Apr 2007
    Ubicación
    Lima - Peru
    Mensajes
    343

    Thumbs up Respuesta: dreamweaver fondo degradado (urgente)

    Cita Iniciado por •Ruramuq• Ver mensaje
    ...

    estoy usando tu background aedozea..
    n_n... np hermano, hoy aprendi algo mas... gracias. Y Dexter espero que hayas encontrado una solución.


    Saludos

  11. #11
    Miembro Nuevo
    Fecha de ingreso
    Feb 2009
    Mensajes
    28

    Respuesta: dreamweaver fondo degradado (urgente)

    ¿Y si lo haces con Flash?

  12. #12
    Cereal Killer Avatar de Dexter
    Fecha de ingreso
    Oct 2004
    Ubicación
    Laboratorio submarino a 15 minutos de la Atlántida
    Mensajes
    3,936

    Respuesta: dreamweaver fondo degradado (urgente)

    Cita Iniciado por 1950 Ver mensaje
    ¿Y si lo haces con Flash?
    dejate, dejate.. solo me faltaba eso
    Cita Iniciado por aedozea Ver mensaje
    n_n... np hermano, hoy aprendi algo más... gracias. Y Dexter espero que hayas encontrado una solución.
    Gracias aedozea, lo del fondo ya está solucionado,tengo la opción de hacerlo con lo del último pixel o con lo tuyo de usar un div al 100%

    Cita Iniciado por •Ruramuq• Ver mensaje
    si quieres alinear divs al centro de la página usas css con margin:0px auto

    por ejemploe

    <div style="margin:0px auto;width:700px">centro</div>
    donde 700px es el ancho del contenido que va alineado al centro

    también tienes cosas como position:absolute dentro de un position:relative
    así un objecto podrá posicionarse relativo a otro :

    <div style="position:relative;padding:4px 0px">LOGO
    <div style="position:absolute;right:5px;bottom:5px">965 .xx.xx.xx</div>
    </div>

    y también están los float:left float:rigtht

    en tu caso la página parece dividires en 3 secciones principales

    [HTML]
    <style type="text/css">
    html,body{
    width:100%;
    height:100%;
    }
    </style>
    <body style="position:relative;padding:0px;margin:0px;he ight:100%;text-align:center">

    <div style="background-color:#f60;height:100%;position:absolute;top:0px;l eft:0px;width:50%"></div>
    <div style="background-color:#0f0;height:100%;position:absolute;top:0px;r ight:0px;width:50%"></div>
    <div style="width:100%;height:100%;position:absolute;le ft:0px;top:0px;background-image:url(barra.png);background-repeat:repeat-y;background-position:center;"></div>

    <div id="header" style="text-align:center;position:relative;padding:15px 0px;width:700px;height:50px;margin:0px auto">
    <img src="screen.jpg" height="50" width="200" />
    <div style="position:absolute;right:10px;bottom:10px">9 55.xxx.x.x.x.x..</div>
    </div>

    <div id="screen" style="height:300px;margin:0px auto;width:700px;position:relative;border:1px solid black">screen
    <div style="position:absolute;right:20px;bottom:10px">
    <ul style="list-style:none">
    <li style="float:left;"><a href="#" style="padding:0px 10px">Descargas</a></li>
    <li style="float:left;"><a href="#" style="padding:0px 10px">Contacto</a></li>
    </ul>
    </div>
    </div>

    <div id="footer" style="margin:0px auto;width:700px">Llamenos desde su Operador..</div>

    </body>
    [/HTML]

    en este ejemplo el background no se estira solo se usan colores planos usndo 2 divs para darle ese color plano..(no se si hay una mejor manera)
    funciona en IE5.5+> IE8 firefox opera chrome..
    estoy usando inline styles pero lo ideal es poner todos los styles juntos y luego sacarlos a un archivo .css

    estoy usando tu background aedozea..
    Muchas gracias Ruramuq, anoche estuve probando varias cosas.. con divs sale bien, los he hecho todos del tamaño de la ventana principal, alineados y si les pongo un margen a la izquierda al % se mueven todos bien al redimensionar la pantalla.. lo único que no es exactamente lo que yo buscaba.. la idea es que el contenido quede centrado completamente en todas las resoluciones o dimensiones de pantalla...

    Con tablas se hace fácil, les pones alinear al centro y chinpun, también probé a convertir los divs en tablas... el problema es que la página principal se puede hacer con tablas pero ya las otras sería más comodo con divs

    Lo que yo buscaba era una forma de que los divs se comportaran igual que las tablas, centandose en la pantalla pero parece que el DW no permite especificar eso, solo la distancia en los margenes left, rigth, top y bottom...
    La idea era hacerlo sin tener que meterme con código pero bueno...
    Ayer encontré por ahí algo parecido a lo que tu explicas.. metiendo esta línea de código al principio:
    Código:
    <div style="width:999px; position: relative; margin-left: auto; margin-right: auto;">
    Con esa línea el contenido se centra bien pero no tengo muy claro lo que hace ni si lo he pegado en el sitio adecuado, en "div style="width:999px" venia con otro valor y yo le he puesto el ancho de la ventana principal, tampoco se si lo he metido en el sitio adecuado... el problema es que no se porque el div con el correo me sale desplazado al hacer esto, ya no se si tendré algo mal en el codigo, lo pego aquí:
    Código:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Wellcome bn</title>
    <style type="text/css">
    <!--
    body {
    	background-image: url(imágenes/bk_gradient_2px.jpg);
    	background-repeat: repeat-y;
    	background-color: #BBCBDA;
    	text-align: center;
    }
    #ventana {
    	position:relative;
    	left:auto;
    	top:1.021in;
    	width:999px;
    	height:auto;
    	z-index:2;
    	overflow: visible;
    	visibility: visible;
    	right: auto;
    }
    #logo {
    	position:absolute;
    	left:1.5%;
    	top:6px;
    	width:999px;
    	height:auto;
    	z-index:3;
    	visibility: visible;
    	right: 5%;
    }
    #mail {
    	position:absolute;
    	left:11px;
    	top:94px;
    	width:999px;
    	height:auto;
    	z-index:4;
    	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    	visibility: visible;
    	font-size: 14px;
    	text-align: right;
    	right: 5%;
    }
    #tlf {
    	position:absolute;
    	left:12px;
    	top:64px;
    	width:999px;
    	height:18px;
    	z-index:5;
    	visibility: visible;
    	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    	font-size: x-large;
    	color: #003971;
    	text-align: right;
    	right: 5%;
    }
    #fondo {
    	position:absolute;
    	left:0;
    	top:0;
    	width:100%;
    	height:100%;
    	z-index:1;
    	background-color: #BBCBDA;
    	visibility: hidden;
    }
    -->
    </style></head>
    <div style="width:1024px; position: relative; margin-left: auto; margin-right: auto;">
    <body class="fondoo">
    <div id="ventana"><img src="imágenes/ventana_WELLCOMEnvg.gif" width="999" height="427" align="middle" /></div>
    <div id="logo"><img src="imágenes/logo-bnFAKO.gif" width="313" height="80" /></div>
    <div id="mail"><a href="xxxxxx@hotmail.com">xxxxxxx@hotmail.com</a></div>
    <div id="tlf">965.xx.xx.xx</div>
    <p>&nbsp;</p>
    </body>
    </html>
    Así he ajustado los divs en DW:


    Así me sale en el explorador


    No.. si al final aprendere y todo
    Miniaturas adjuntadas Miniaturas adjuntadas dreamweaver fondo degradado  urgente -0001.jpg   dreamweaver fondo degradado  urgente -0002.jpg  

  13. #13
    Senior Member Avatar de Ruramuq
    Fecha de ingreso
    Sep 2004
    Mensajes
    124

    Respuesta: dreamweaver fondo degradado (urgente)

    tienes un div entre el head y el body, y eso no es legal,
    te estoy poniendo un link con el ejemplo anterior:
    http://----------------------------

    aunque estas usando margin:0px auto, tu página no esta alineada al centro.

    margin:0px auto es lo mismo que margin:0px auto 0px auto
    es decir top right bottom left
    que es lo mismo que decir:
    margin-left=auto
    margin-right=auto
    margin-top=0px
    margin-bottom=0px

    según las imágenes que has puesto, la página puede funcionar en una resolución 800x600 minimo para adelante..
    osea:
    <div style="margin:0 auto;width:800px">contenido</div>

    ..
    Última edición por Ruramuq; 24-12-2012 a las 03:40

  14. #14
    Cereal Killer Avatar de Dexter
    Fecha de ingreso
    Oct 2004
    Ubicación
    Laboratorio submarino a 15 minutos de la Atlántida
    Mensajes
    3,936

    Respuesta: dreamweaver fondo degradado (urgente)

    Cita Iniciado por •Ruramuq• Ver mensaje
    tienes un div entre el head y el body, y eso no es legal
    ¿te refieres a esto? "</style></head>
    <div style="width:1024px; position: relative; margin-left: auto; margin-right: auto;">
    <body class="fondoo">"

    porque más arriba hay otro head/body

    te estoy poniendo un link con el ejemplo anterior:
    http://ruraq.vndv.com/_borrameeee.html
    Eso es justo lo que necesito... muchísimas gracias

    aunque estas usando margin:0px auto, tu página no esta alineada al centro.

    margin:0px auto es lo mismo que margin:0px auto 0px auto
    es decir top right bottom left
    que es lo mismo que decir:
    margin-left=auto
    margin-right=auto
    margin-top=0px
    margin-bottom=0px
    Pero entonces... esto se podría hacer ajustando esos parámetros del div en el DW? porque yo creo que había probado a cambiarlos y no lo consegui...
    bueno.. ahora tengo tiempo hasta el lunes.. voy a estudiarme esto que me has puesto

    según las imágenes que has puesto, la página puede funcionar en una resolución 800x600 minimo para adelante..
    osea:
    <div style="margin:0 auto;width:800px">contenido</div>
    Las imágenes las he reducido para colgarlas.. la página esta pensada para 1024x768... la ventana del centro mide 999px... es eso lo que debería poner en "width"? ¿999px o 1024px?

    muchas gracias de nuevo, ya empiezo a recordar un poco como iba el tema y a entenderlo mejor

Temas similares

  1. ayuda Urgente Imagen de fondo 3D max 2009
    Por Marcab64 en el foro Problemas con Programas
    Respuestas: 0
    Último mensaje: 02-11-2010, 11:14
  2. Photoshop degradado a la imagen
    Por eli en el foro Peticiones y Búsquedas
    Respuestas: 4
    Último mensaje: 09-09-2009, 11:35
  3. un background degradado
    Por PipeRock en el foro Render, Iluminación y Cámaras
    Respuestas: 1
    Último mensaje: 13-03-2009, 20:19
  4. horizonte degradado
    Por erixel en el foro Materiales y Texturizado
    Respuestas: 8
    Último mensaje: 12-08-2008, 11:49
  5. sonido de fondo en DREaMWEaVER
    Por liberado en el foro Problemas con Programas
    Respuestas: 4
    Último mensaje: 15-06-2006, 16:42

Actualmente estos son sus permisos de publicación en el foro.

  • -No puedes crear nuevos temas al no estar registrado o no haber iniciado sesión en el foro.
  • -No puedes responder temas al no estar registrado o no haber iniciado sesión en el foro.
  • -No puedes subir archivos adjuntos al no estar registrado o no haber iniciado sesión en el foro.
  • -No puedes editar tus mensajes al no estar registrado o no haber iniciado sesión en el foro.
  •