12/07/2004, 01:15
| ||||
| ||||
 Colocar imágenes en las esquinas Holas! Pregunta sencilla: ¿Cómo puedo colocar una imagen el la esquina superior derecha? ¿O por ejemplo en la esquina inferior izquierda? Tal como lo hago yo, queda una pequeña línea de separación, yo quiero que quede encajada perfectamente en la esquina de la ventana. Gracias!
__________________ |
|
12/07/2004, 01:27
| ||||
| ||||
| Hola Devil Akuma: Con posiciones absolutas (0,0) <img src="imagen.gif" style="position: absolute; top: 0; left: 0;" /> Como fondo del body, se me ocurre que puedes ponerla en cualquiera de las esquinas... <body style="background-image: url(imagen.gif); background-position: rigth bottom;" > Saludos 
__________________ Por favor: No hagan preguntas de temas de foros en mensajes privados... no las respondo |
|
12/07/2004, 02:27
| ||||
| ||||
| Gracias! ¿Sabes dónde podría mirar algún link o tutorual para dar más propiedades para las imágenes? Lo que quiero hacer es que se queden fijas, aunque el usuario baje con la barra de desplazamiento y el cuerpo de la web descienda, esa imagen se quede en su esquinita siempre... Supongo que se podrá hacer con alguna propiedad o algo ¿No?
__________________ |
|
12/07/2004, 02:45
| ||||
| ||||
| Hola otra vez: Bueno, en realidad necesitas buscar información sobre hojas de estilo css y pasarte por el foro... background-repeat: no-repeat; background-attachment: fixed; Serían las cosas que me faltaron en el otro post... En las FAQs css hay información sobre los fondos. Si necesitases más ayuda, pregunta en el foro css. Saludos
__________________ Por favor: No hagan preguntas de temas de foros en mensajes privados... no las respondo |
|
12/07/2004, 03:02
| ||||
| ||||
| Vámonos a CSS! Gracias Caricatos!
__________________ Cómo escribir No hay pregunta tonta, sino tonto que quiere seguir en la ignorancia. |
|
12/07/2004, 04:02
| ||||
| ||||
| Cita: Colocando esto:
Iniciado por caricatos Hola otra vez: Bueno, en realidad necesitas buscar información sobre hojas de estilo css y pasarte por el foro... background-repeat: no-repeat; background-attachment: fixed; <IMG src="luna.gif" border=0 name="luna" style="position: absolute; top: 0; right: 0; background-attachment: fixed; background-repeat: no-repeat;"> No me hace nada nuevo :( ¿Qué es lo que hago mal? Cómo fondo en la web tengo puesto esto: <BODY background="fondo.gif" text="white" ALINK="#770000" VLINK="#CC0000" link="#770000"> Un saludo
__________________ |
|
12/07/2004, 04:16
| ||||
| ||||
| Prueba a ponerlo así: <IMG src="luna.gif" border=0 name="luna" style="position:absolute;top:0px;right:0px;"> 
__________________ Cómo escribir No hay pregunta tonta, sino tonto que quiere seguir en la ignorancia. |
|
12/07/2004, 05:01
| ||||
| ||||
| Cita: No, no... Lo de colocarlo en la esquina me funciona de p.m. lo que no me rula es con lo último que me ha comentado caricatos para que estuviera fija en la esquina aunque se utilize la barra de desplazamiento horizontal.
Iniciado por KarlanKas Prueba a ponerlo así: <IMG src="luna.gif" border=0 name="luna" style="position:absolute;top:0px;right:0px;"> Aunque ponga.. <IMG src="luna.gif" border=0 name="luna" style="position: absolute; top: 0; right: 0; background-attachment: fixed; background-repeat: no-repeat;"> Al utilizar la barra, la luna se va :?
__________________ |
|
12/07/2004, 05:05
| ||||
| ||||
| Hola otra vez: ¡KarlanKas!... ¿Cambiaste xde avatar?... Seguro que prefieres que no te reconozcan por la calle...  Devil Akuma: Esos estilos añadidos son para usar una imagen como fondo del body y que se quede estática... Como estilos para un tag img debes usar lo que pone KarlanKas, aunque se desplazaría con el scroll de la página. Saludos
__________________ Por favor: No hagan preguntas de temas de foros en mensajes privados... no las respondo |
|
12/07/2004, 05:09
| ||||
| ||||
| Sí, la verdad es que empezaban a acosarme y he decidido transmutarme en gato.
__________________ Cómo escribir No hay pregunta tonta, sino tonto que quiere seguir en la ignorancia. |
|
12/07/2004, 06:47
| ||||
| ||||
 off-topic Cita:
Iniciado por KarlanKas Sí, la verdad es que empezaban a acosarme y he decidido transmutarme en gato.  ya decía yo que no te encontraba  Última edición por Helbira; 12/07/2004 a las 06:50 |
|
12/07/2004, 07:45
| ||||
| ||||
| Entonces no se puede hacer lo que yo quiero :? Bueno, que hi farem...
__________________ |
|
12/07/2004, 08:40
| |||
| |||
| Hola todos : Devil Akuma : tal vez te sirva ésto http://www.tierradenomadas.com/rc012.phtml saludos furoya |
|
12/07/2004, 11:55
| ||||
| ||||
| Hola Devil Akuma: Lo que deseas hacer es posible, pero estas aplicando estilos de background a una imagen... Si lo que deseas es que la imágen fija sea el fondo de la página puedes usar algo como esto en el <head> de tu documento: <style type="text/css"> <!-- body{ background-image: url(tu_imagen.jpg); background-position: 0% 0%; background-repeat: no-repeat; background-attachment: fixed; } --> </style> Por ahora no lo recuerdo, pero si tu imagen no aparece exactamente en la esquina, puedes agregar las siguientes propiedades: margin: 0px 0px 0px 0px; padding: (aqui pones en pixeles la distancia del contenido de tu página y la orilla de la ventana, más o menos así: 10px 10px 10px 10px;) Pero si lo que deseas es una imagen en la esquina Y ADEMAS un fondo diferente, entonces visita el último enlace que te puso furoya. Última edición por KnowDemon; 12/07/2004 a las 11:58 |
|
14/07/2004, 07:58
| ||||
| ||||
| El link que me habéis pasado es más o menos lo que quiero hacer, pero si se me ocurre ponerlo me salen cosas extrañas. Lo primero es que la barra de desplazamiento del iexplore aparece más a la izquierda de lo normal (La web tendrá que ser navegada por este navegador obligatoriamente) y también me queda fijo la imagen del fondo (Algo que no deseo) Para ver lo que quiero hacer: http://cine.eol.us/~devil/tierra/main/index.html Quiero que los planetas se queden fijos! Please, echadme un cable que estoy desesperaillo :P Un saludo
__________________ |
|
14/07/2004, 10:12
| |||
| |||
| una cosa oye devil, he entrado a http://www.cineol.net/ desde el enlace de tu página y veo que los layer del menñu secciones se meten por debajo del Flash. Esto me sucede a mi tambien en una página que estoy haciendo ¿ALGUNA SOLUCIÓN?? se le puede marcar algún z-index al object. GRACIAS |
|
14/07/2004, 15:10
| ||||
| ||||
| Mmmmmmm Lo siento, pero no tengo ni idea de cómo demonios está hecha esa página. Puse esos enlaces por poner algo y porque soy muy asiduo a esa web, pero de cómo esta por dentro... Lo siento
__________________ |
|
17/07/2004, 09:48
| |||
| |||
| Hola de nuevo : Cita: Devil Akuma : Y justo para el Internet Explorer ... ... la barra de desplazamiento del iexplore aparece más a la izquierda de lo normal (La web tendrá que ser navegada por este navegador obligatoriamente) y también me queda fijo la imagen del fondo (Algo que no deseo) ... Si fuera otro navegador, podrías usar position:fixed, pero éste no lo reconoce ( hay algo llamado stationary, pero seguramente tampoco funciona ). Le estuve dando vueltas al asunto porque no puede ser que algo así no salga. Los problemas están en que la capa ( porque hay que resolverlo con capas ) que se desplaza es, generalmente, la de adelante. Pero tú quieres desplazar los enlaces, el fondo, y dejar fijos los planetas que están primero. Ésto nos lleva a que la Luna -que está arriba a la derecha- no pueda flotar sobre el contenido, ya que al quedar sobre la capa desplazable pisa la scrollbar. En eso estaba cuando cuando saltó una chispa sináptica, y recordé que hace bastante tiempo vi una tema sobre "detectar la existencia de 'scrollbars' en un documento"; y yo me pregunté "para qué puede servir éso?"; pero igual lo resolví. Ahora le encontré la utilidad. Adaptando algunas líneas nos va a servir para ubicar la Luna.
Código:
Supongo que la página en cuestión es una prueba, ya que es evidente que los enlaces no se van a centrar verticalmente en cualquier resolución, y en algunos casos hasta van a quedar tapados por la Tierra. Pero ese es otro tema.<HTML><HEAD><TITLE>Índice</TITLE>
<script>
function ajusta(){
document.body.style.overflow="scroll";
ancho=document.body.clientWidth-200;
document.getElementById("luna").style.left=ancho+"px";
document.body.style.overflow="hidden";
}
</script>
<STYLE>
A {
FONT-FAMILY: Arial; FONT-SIZE: 20px; TEXT-DECORATION: none
}
BODY {
padding:0; margin:0; scrollbar-face-color: #000000; scrollbar-highlight-color: #aaaaaa; scrollbar-shadow-color: #aaaaaa; scrollbar-3dlight-color: #eeeeee; scrollbar-arrow-color: #eeeeee; scrollbar-track-color: #000000; scrollbar-darkshadow-color: #000000
}
#enlaces{
height:100%; overflow:auto; background:url("http://cine.eol.us/~devil/tierra/images/index_fondo.gif");
}
#luna{
height:100%;width:10px; position: absolute; left:100%; top:0; vertical-align:top; padding:0; z-index:1; border-collapse:collapse
}
#luna td{
vertical-align:top; padding:0
}
#tierra{
height:100%;width:10px; position: absolute; left:0; botom:0; vertical-align:bottom; padding:0; z-index:1; border-collapse:collapse
}
#tierra td{
vertical-align:bottom; padding:0
}
</STYLE>
<SCRIPT src="http://cine.eol.us/~devil/tierra/main/JSFX_LinkFader.js" type=text/javascript></SCRIPT>
</HEAD>
<BODY onload="ajusta()" onresize="location.reload()" aLink=#770000 link=#770000 text=white vLink=#cc0000>
<table id="luna">
<td>
<IMG alt=Cargando... border=0 vspace=0
src="http://cine.eol.us/~devil/tierra/images/esquina_luna.gif" title="La Luna!"></td>
</td>
</table>
<table id="tierra">
<td>
<IMG
alt=Cargando... border=0 src="http://cine.eol.us/~devil/tierra/images/esquina_tierra.gif"
title="La Tierra!"></td>
</table>
<div id="enlaces">
<BR><BR><BR><BR><BR><BR><BR>
<P align=center><FONT face=Arial><A href="http://www.cineol.net/"
target=_blank>Conócenos</A></FONT></P>
<P align=center><FONT face=Arial><A href="http://www.cineol.net/"
target=_blank>Temario</A></FONT></P>
<P align=center><FONT face=Arial><A href="http://www.cineol.net/"
target=_blank>Vocabulario</A></FONT></P>
<P align=center><FONT face=Arial><A href="http://www.cineol.net/"
target=_blank>Ejercicios</A></FONT></P>
<P align=center><FONT face=Arial><A href="http://www.cineol.net/"
target=_blank>Curiosidades</A></FONT></P><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR>
</div>
</BODY></HTML>
saludos furoya P.D. : A mí también me queda la barra separada del borde. En el ejemplo que da el autor en TdN no pasa. Habría que avisarle. ( en IE se puede arreglar, pero temo que lo descalibremos para los otros navegadores.) |
|
17/07/2004, 11:38
| ||||
| ||||
| Hola a todos: furoya: Recuerdo que en una página tuve problemas con backgroundAtachment = "fixed" y con explorer se tenía que usar backgroundAtachment = "static"... No sé si es a eso a lo que te refieres, o si ayuda a resolver el tema ¿Lo has probado alguna vez? La página en cuestión es: http://www.pepemolina.com/imagenes/index.html De paso me gustaría saber tu opinión (aunque la tengo olvidada)... Saludetes
__________________ Por favor: No hagan preguntas de temas de foros en mensajes privados... no las respondo |
|
19/07/2004, 13:05
| |||
| |||
| Hola caricatos : sí, probablemente (no, seguro) era static, yo lo escribí de memoria, y mi memoria... El tema de Devil Akuma era uqe él no quería fondo sino "frente" fijo; por eso no funcionaba el background. Quise ver tu página, pero ésta máquina anda demasiado mal y se cuelga -te estoy escribiendo con el mensaje "Este programa ha efectuado una operación no válida ..." en pantalla-, voy a buscar una mejor y la miro como se debe. saludosa furoya |
|
31/07/2004, 18:26
| ||||
| ||||
| Curiosamente yo también necesito algo muy parecido por no decir igual y después de ver el trabajo de caricatos he quedado sorprendido (muy buen trabajo caricatos). El problema es que con netscape 4 los estilos creo que no estaban implementados o algo raro le ocurre y se ve todo desposicionado por desgracia mia. Si alguien me puede indicar los paso que devería seguir para lograr el mismo efecto en netscape. Con la versión 7 de netscape se ve bien y con explorer también. Gracias adelantadas |
|
31/07/2004, 18:34
| ||||
| ||||
| me da la sensación que va a ser imposible y corregidme si me equivoco pero opino que para lograr tal efecto con netscape 4 necesitaría realizar algún tipo de calculo como averiguar la anchura de la ventana, restar el tamaño de la capa y esa sería la posición ¿no? ¿Alguien puede echarme una mano para readaptar el script de caricatos? |
|
10/02/2005, 11:23
| |||
| |||
| Hola otra vez : vuelvo por el asunto de " la barra de desplazamiento del iexplore aparece más a la izquierda ". Probé el código en IE y FF.
Código:
saludos
<html>
<head><title> MENÚ FIJO.</title>
<style>
* html body {
overflow:hidden;
}
#Fija {
position:absolute;
top:0;
left:0;
}
html>body #Fija {
position:fixed;
}
#Todo {
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
overflow:auto;
}
html>body #Todo {
position:static;
top:auto;
left:auto;
width:auto;
height:auto;
overflow:visible;
}
</style>
</head>
<body leftmargin=0 topmargin=0 marginheight=0 marginwidth=0>
<div id=Todo>
<p>
<h2 style="margin-left:110px">Mantiene un elemento fijo mientras se desplaza el documento.</h2>
<p style="margin-left:110px">En <b>IE</b> el efecto es simulado.</p>
<img height=500 width=0><br>
<h3 style="margin-left:110px">Fin.</h3>
</div>
<div id=Fija style="height:100px; width:100px; background-color:bisque">
<h1>MENÚ</h1>
</div>
</body>
</html>
furoya |
|
23/09/2005, 14:17
| |||
| |||
| lo tengo Vamos a ver si soy capaz de explicarme: en la hoja en la zona entre <head> y </Head> pon esto <style type="text/css"> BODY { OVERFLOW: auto; } </style> Luego tienes que definir dos div uno para lo que va a ser fijo y otro para lo que vaya a ser movil en mi caso <div id="fija" style = " Z-INDEX: 202; LEFT: 85%; POSITION: absolute; TOP: 90%; height:5%; width:10% "> <asp:button id="Button1" style="Z-INDEX: 202; " runat="server" Width="100%" ForeColor="Black" Font-Size="Larger" Font-Names="Verdana" Font-Bold="True" BackColor="Red"Text="Volver"></asp:button> </div> <div id="movil" style = "LEFT: 0 px; OVERFLOW: auto; WIDTH: 102.5%; POSITION: absolute; TOP: 0 px; HEIGHT: 100%"> <asp:Label id="Label1" style="Z-INDEX: 101; " runat="server" ForeColor="Black" Height="100%" Width="100%" BackColor="Transparent"></asp:Label> </div> Copia esto tal cual y te deberia funcionar. Metele un texto mas largo que la hoja y veras correr el texto mientras el boton se queda fijo. Con una imagen es el mismo concepto pero con un objeto imagen saludos |
|
23/09/2005, 18:56
| |||
| |||
| wolas, venía buscando una solución a un problema similar del que se está discutiendo en este hilo. A lo mejor parte de lo que ponga os sirve de ayuda a alguno. He puesto este chorizo en mi css
Código:
Y he agregado a <body> esto.truco {
background-image: url("url_to_image");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: bottom right;
}
Código:
Asi funciona perfecto, lo saqué de aqui: javimoya.com/blog.class="truco" Bien, mi problema. Estoy con un foro phpbb y desearía agregar precisamente esto, el problema es que mi imagen se queda por detrás de las tablas y no se ve:  Alguien sabría como solucionar mi problema? (poner la imagen por encima) Muchas gracias pd, disculpad si me he colado y tenía q haber abierto otro hilo, me pareció mas conveniente continuar aqui edit, ya lo he conseguido! siguiendo las indicaciones de furoya, tuve que editar un par de tpls y ahora funciona perfecto... graciassssssss Última edición por epiky; 24/09/2005 a las 04:40 |
|
24/09/2005, 14:58
| |||
| |||
| Hola epiky : El ejemplo que puse arriba lo hace. El problema es que no tiene sólo CSS, Siempre estuve por arreglarlo, pero entre que no conseguía un Mozilla, y que después descubrí que en el enlace a tierradenomades hay un ejemplo que sí funciona, no me ocupé más. Lo que sí voy a actualizar es un efecto para cambiar los botones de la scrollbar por imágenes. Que es masomenos lo mismo que usar solamente una capa div; y a eso le puedes agregar la capa que quieras. Y no usa hacks (creo) En el sitio de tunait hay un ejemplo para un botón fijo. Salta un poco, pero funciona. saludos furoya |
|
24/09/2005, 18:04
| |||
| |||
| Gracias furoya, estoy empezando a darme por vencido... en firefox todo funciona a la perfección casi con todos los ejemplos, el problema es con ie. Empiezo a creer que el problema lo ocasiona el hecho de que tenga que "partir" los efectos para ajustarlos a los archivos *.tpl del template de mi foro, (overall_header.tpl y overall_footer.tpl) otra explicación no se me ocurre. En el caso del ejemplo de tunait, aunque no parta el efecto en dos archivos me sigue pasando lo mismo, en firefox perfecto mientras que en el explorer no (se queda siempre arriba) Seguiré investigando thnx |
|
26/09/2005, 11:49
| |||
| |||
| Mmmmm. Nunca trabajé con templates. No sabría decirte. Lo que se me ocurre es que nos dejes ver el documento (si tiene documentos enlazados es mejor un link a la página), porque no me queda claro si tiene un encabezado y un pié de página fijos; y si la imagen-botón va en el panel del medio, que sí se desplazaría. Si estás usando 3 div's, tal vez puedas poner el botón en el footer, arriba a la derecha, y darle un margin-top negativo igual a la altura de la imagen. Ésto la debería superponer al div que tiene inmediatamente arriba. No sé, son ideas. [edit] En el tema Footer Stick. K3NNY (  Hola!) puso un muy buen enlace con un ejemplo para los 3 div's. Todavía no probé agregarle el botón.[/edit] El problema es unicamente para IE, y encima hay diferencia con las versiones. En Moz se puede fijar cualquier elemento mientras el resto del documento se desplaza. Pero en IExplorer aún no funciona y por eso hay que usar capas. En vez de meter nuestro documento en el body lo hacemos en un bloque con scrollbar que simula el body, y a éso le podemos superponer una imagen que esté fuera del bloque. En este enlace Aspecto de la barra de scroll puse un div que toma la medida del panel del documento en IE/FF. Era necesario porque lo que se buscaba era tapar los botones de la barra de desplazamiento con imágenes, Y es imposible cubrir las scrollbars del body. Lo único que deberías hacer es que la imagen de abajo tenga un margen derecho igual al ancho de la barra para que quede como un botón fijo. Hay que tener en cuenta también el doctype que se use. Eso lo puedes ver en varias respuestas del foro. Prueba a ver si te sirve. Y suerte. saludos furoya Última edición por furoya; 04/10/2005 a las 12:14 |
