Dreamweaver fondo degradado

[Dexter]

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 píxel de alto y ponerlo en propiedades de página como background, repitiéndose en y, pero claro, tiene 1024 de largo y si haces la ventana más grande se ve el cartoon, o sea, que se corta a la derecha.

Debería quedar así:

¿Cómo podría hacerlo? Se me ha ocurrido ponerle de color de fondo el azul de la derecha, igual así no se notaría el corte, pero no sé.

[Dexter]

He cambiado el color del fondo al del último píxel del degradado. No queda mal del todo, pero, hay manera de que el degradado se ajuste al tamaño de la ventana/pantalla?

[Caronte]

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.

[Ruramuq]

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 Explorer 6 no suaviza el estiramiento así que, no sé si se vería bien, y de estirarse, volvería la página ligeramente más lenta en iExplorer.

[Dexter]

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%.

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 Explorer 6 no suaviza el estiramiento así que, no sé si se vería bien, y de estirarse, volvería la página ligeramente más lenta en iExplorer.

Nada, creo que al final haré lo de poner el color de fondo del último píxel, he hecho una búsqueda en Google (que tiene cojones que ya sale este mensaje 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 está 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 Dominance war CS4 han cambiado las cosas, yo usaba tablas y con todo esto de las etiquetas div y los estilos CS me estoy haciendo la picha un lío.

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 a gusto que estaría yo viendo el último videotutorial de Gnomon de Ryan Kingsley sobre zspheres2 que me acabo de bajar.

[Caronte]

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.

[aedozea]

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 dónde tome el ejemplo. http://www.dynamicdrive.com/forums/s...ad.php?t=35488 saludos.

[Dexter]

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 di, v, 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 CS, y eso que hace unos meses hice un cursillo de Dominance war 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 Dominance war antes te permitía especificarla (800 por 600.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.

[Ruramuq]

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>logotipo.

Div style=position:absolute;right:5px;bottom:5px>965.x x.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{ twidth:100%, theight:100%;.
}.
/style>.
body style=position:relative;padding:0px;Margin:0px;hei ght: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;lef t:0px;top:0px;background-image:url(barra, png),background-repeat:repeat-y;background-position:center;></div> t<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>955 .xxx.x.x.x.x.</div> t</div> t<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> t</div> t<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 sé si hay una mejor manera).

Funciona en ie5.5+> internet explorer 8 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]

.
estoy usando tu background.

N_n, np hermano, hoy aprendí algo más, gracias. Y Dexter espero que hayas encontrado una solución. Saludos.

[1950]

¿Y si lo haces con flash?

[Dexter]

¿Y si lo haces con flash?

Déjate, déjate, solo me faltaba eso.

N_n, np hermano, hoy aprendí 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 píxel o con lo tuyo de usar un div al 100%.

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>logotipo.

Div style=position:absolute;right:5px;bottom:5px>965.x x.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{ twidth:100%, theight:100%;.
}.
/style>.
body style=position:relative;padding:0px;Margin:0px;hei ght: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;lef t:0px;top:0px;background-image:url(barra, png),background-repeat:repeat-y;background-position:center;></div> t<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>955 .xxx.x.x.x.x.</div> t</div> t<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> t</div> t<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 sé si hay una mejor manera).

Funciona en ie5.5+> internet explorer 8 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.

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 pantall, a, lo único que no es exactamente lo que yo buscab, a, 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 cómodo con divs.

Lo que yo buscaba era una forma de que los divs se comportaran igual que las tablas, centándose en la pantalla, pero parece que el Dominance war no permite especificar eso, solo la distancia en los márgenes 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 tú explicas, metiendo esta línea de código al principio:

<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 adecuando, 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 adecuando, el problema es que no sé porque el div con el correo me sale desplazado al hacer esto, ya no sé si tendré algo mal en el código, lo pego aquí:

<.doctype html public -//w3c//dtd xhtml 1.0 transitional//en http://www.w3.org/tr/xhtml1/dtd/xhtml1-transiciónal, 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 { tbackground-image: url(imágenes/bk_gradient_2px.jpg), tbackground-repeat: repeat-y, tbackground-color: #bcbda, ttext-align: center.
}.
#ventana { tposition:relative, tleft:auto, ttop:1.021in, twidth:999px, theight:auto, tz-index:2, toverflow: visible, tvisibility: visible, tright: auto.
}.
#logotipo { tposition:absolute, tleft:1.5%, ttop:6px, twidth:999px, theight:auto, tz-index:3, tvisibility: visible, tright: 5%.
}.
#mail { tposition:absolute, tleft:11px, ttop:94px, twidth:999px, theight:auto, tz-index:4, tfont-family: trebuchet ms, arial, helvética, sans-serif, tvisibility: visible, tfont-size: 14px, ttext-align: right, tright: 5%.
}.
#tlf { tposition:absolute, tleft:12px, ttop:64px, twidth:999px, theight:18px, tz-index:5, tvisibility: visible, tfont-family: trebuchet ms, arial, helvética, sans-serif, tfont-size: x-large, tcolor: #003971, ttext-align: right, tright: 5%.
}.
#fondo { tposition:absolute, tleft:0, ttop:0, twidth:100%, theight:100%, tz-index:1, tbackground-color: #bcbda, tvisibility: hidden.
}.
->.
/style></head>.

Div style=width:1024px, position: relative, Margin-left: auto, Margin-right: auto;>.
body class=fondo>.

Div id=ventana><img src=imágenes/ventana_wellcomenvg, gif width=999 height=427 align=middle /></div>.

Div id=logotipo><img src=imágenes/logotipo-bnfako.gif width=313 height=80 /></div>.

Div id=mail><a href=x@hotmail.com>xx@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 aprenderé y todo.

[Ruramuq]

Tienes un div entre el head y el body, y eso no es legal. Te estoy poniendo un enlace con el ejemplo anterior: Http://-.

Aunque estas usando Margin:0px auto, tu página no está 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 800 por 600 mínimo para adelante.

Osea:
Div style=Margin:0 auto;width:800px>contenido</div>.

[Dexter]

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=fondo>.

Porque más arriba hay otro head/body.

Te estoy poniendo un enlace con el ejemplo anterior: http://ruraq, vndv.com/_borrame.html.

Eso es justo lo que necesito, muchas gracias.

Aunque estas usando Margin:0px auto, tu página no está 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 conseguí.

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 800 por 600 mínimo 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.