¿Como se consigue esto?

[apipe93]

Hola amigos, he visto este "efecto" y me ha gustado mucho, he buscado demaciado por la web, pero no lo he encontrado, si alguien sabe como hacer que una imagen quede siempre visible al mover el scroll, como esta en la siguiente pagina, se lo agradeceria bastante:

[URL="http://www.imaginamos.com/"]http://www.imaginamos.com/[/URL]



Tambien tengo una inquietud en cuanto a los enlaces tanto en imagenes como en texto, quisiera saber si hay forma de que al clickear sobre el enlace no se muestre el cuadro punteado que lo rodea. muchas gracias

[cristian_cena]

Iniciado por apipe93

si alguien sabe como hacer que una imagen quede siempre visible al mover el scroll

Si haces referencia a la imagen que está arriba a la derecha "site of the day": se consigue aplicando position:fixed; junto a las propiedades top/left/right/bottom según el caso. En el tuyo ocuparías top y right.

Iniciado por apipe93

que al clickear sobre el enlace no se muestre el cuadro punteado que lo rodea

aplica outline:0; a tu enlace.

Saludos.

[apipe93]

Iniciado por cristian_cena

Si haces referencia a la imagen que está arriba a la derecha "site of the day": se consigue aplicando position:fixed; junto a las propiedades top/left/right/bottom según el caso. En el tuyo ocuparías top y right.

aplica outline:0; a tu enlace.

Saludos.

Gracias amigo, pero me podrias ayudar un poco con un ejemplo ya que no soy muy bueno en esto, ya que intente con la position: fixed; pero no lo consigo, solo se acomoda arriba pero no hace el efecto que quiero, referente a lo de los enlaces, solo se agrega eso como un atributo o como un estilo de CSS?

Que pena molestar tanto :P gracias por la ayuda...

[cristian_cena]

Iniciado por apipe93

ya que intente con la position: fixed; pero no lo consigo

Eso es bueno, comparte ese código y sobre él hacemos un ejemplo si? (usa highlight por favor)

Iniciado por apipe93

solo se agrega eso como un atributo o como un estilo de CSS?

como un estilo css.

No molestas para nada :D

[mechaz]

http://www.w3schools.com/cssref/pr_class_position.asp

Ahí está :D.

[apipe93]

Este es el codigo que tengo para la imagen, pero simplente no funcion, de las dos maneras en las que me han comentado, espero me ayuden con el error.

Código HTML:

<div id="image5" style="fixed; overflow:hidden; left:10px; top:1526px; width:72px; height:72px; z-index:8"><img src="images/facebook.png" border=0 width=72 height=72></div>
 

[dragonfire256]

Iniciado por apipe93

Este es el codigo que tengo para la imagen, pero simplente no funcion, de las dos maneras en las que me han comentado, espero me ayuden con el error.

Código HTML:

<div id="image5" style="fixed; overflow:hidden; left:10px; top:1526px; width:72px; height:72px; z-index:8"><img src="images/facebook.png" border=0 width=72 height=72></div>
 

No es fixed, es position:fixed Arregla ese error a ver que tal... Saludos

[apipe93]

ya lo cambie a position: fixed, pero sigue igual

[dragonfire256]

Iniciado por apipe93

ya lo cambie a postion: fixed, pero sigue igual

Ese fue el unico error que note en tu codigo... Ahora quedo esperar a los "expertos" Yo tambien me la paso preguntado en estos foros a cada rato Suerte hermano

[cristian_cena]

Algunas observaciones:

• Como indica dragonfire256, fixed es el valor de la propiedad position.
• Se desaconseja usar estilos "inline" o dentro de la propia etiqueta html, por lo que sería mejor que los coloques en una hoja de estilos a la cual llamas con <link rel="stylesheet" href="./folder/file.css"/>
• Quité overflow y z-index, si los necesitas vuelve a incluirlos, creo que el ejemplo será más claro si los quitamos por ahora.
• Declarando la propiedad alt en la etiqueta img aumentas la accesibilidad de tu documento, hay una minoría de usuarios ciegos a quienes disponer de una descripción de la imagen le será útil.
• top:1526px; es un valor muy grande, siempre que tengas valores grandes considera usar la propiedad opuesta (bottom) o disminuir el valor.

Chequea este ejemplo:

Código HTML:

<div id="image5">
    <img src="images/facebook.png" alt="los lectores de pantalla leen esto"/>
</div>
 

​

Código CSS:

#image5, #image5 img{
    width:72px; 
    height:72px;
}
#image5{
    position:fixed;     
    top:10px; right:10px; /*estas son tus cotas*/
}
#image5 img{ 
    border:0;  
}
 

​
Saludos

[dragonfire256]

Iniciado por cristian_cena

Algunas observaciones:

• Como indica dragonfire256, fixed es el valor de la propiedad position.
• Se desaconseja usar estilos "inline" o dentro de la propia etiqueta html, por lo que sería mejor que los coloques en una hoja de estilos a la cual llamas con <link rel="stylesheet" href="./folder/file.css"/>
• Quité overflow y z-index, si los necesitas vuelve a incluirlos, creo que el ejemplo será más claro si los quitamos por ahora.
• Declarando la propiedad alt en la etiqueta img aumentas la accesibilidad de tu documento, hay una minoría de usuarios ciegos a quienes disponer de una descripción de la imagen le será útil.
• top:1526px; es un valor muy grande, siempre que tengas valores grandes considera usar la propiedad opuesta (bottom) o disminuir el valor.

Chequea este ejemplo:

Código HTML:

<div id="image5">
    <img src="images/facebook.png" alt="los lectores de pantalla leen esto"/>
</div>
 

​

Código CSS:

#image5, #image5 img{
    width:72px; 
    height:72px;
}
#image5{
    position:fixed;     
    top:10px; right:10px; /*estas son tus cotas*/
}
#image5 img{ 
    border:0;  
}
 

​
Saludos

Quiero hacer una aclaratoria nada mas... El atributo alt, segun tengo entendido, sirve para mostrar lo que esta dentro de comillas cuando la imagen no se pueda cargar... A mi me recomendaron usar el atributo title

[cristian_cena]

El atributo alt sirve para incluir "texto alternativo", semánticamente es distinto de añadir un título, de hecho la w3c recomienda usar alt como prioridad de primer nivel:
http://www.w3.org/standards/webdesign/accessibility
http://www.w3.org/WAI/gettingstarted/Overview.html
Es cierto que si la imagen se presenta en pantalla y falla el src se produce un reemplazo por texto pero alt adquiere sentido cuando el documento es accedido por un lector de pantalla/sintetizador de voz o línea braille.

Iniciado por dragonfire256

segun tengo entendido ... A mi me recomendaron

Podrías compartir la fuente? la verdad hay tanto material dando vueltas que sería bueno compararlos.

[dragonfire256]

Iniciado por cristian_cena

Es cierto que si la imagen se presenta en pantalla y falla el src se produce un reemplazo por texto pero alt adquiere sentido cuando el documento es accedido por un lector de pantalla/sintetizador de voz o línea braille.

Podrías compartir la fuente? la verdad hay tanto material dando vueltas que sería bueno compararlos.

Esa parte de lector de pantalla no la conocia/sintetizador... Fue en uno de los tantos threads que he abierto o fue en un curso que me lo dijeron? No recuerdo