¿Como corregir el problema del boton scroll cuando lo ocultan?

[bloguero]

Hola les cuento que hize un boton cirucular(digamos boton entre comillas ya que solo es un circulo) como scrooll que cuando haces click ahi, te manda hasta la parte superior de la pagina, supongo q ya han visto eso y me entienden. La cosa es que solo se logra ver casi la mitad del boton ya que se queda en el medio del fondo de la pagina y de la barra del footer? como soluciono esto para que dicho boton scroll kede encima, y se logre ver bien. Espero sus respuestas y gracias.
Saludos

[kseso?]

como soluciono esto para que dicho boton scroll kede encima, y se logre ver bien

Obvio: Poniéndolo sobre todo lo demás.
¿Insuficiente? Entonces

[bloguero]

Iniciado por kseso?

Obvio: Poniéndolo sobre todo lo demás.
¿Insuficiente? Entonces

Por favor si quieres ayudar, se claro, ya q no me diste ninguna sugerencia.

[cristian_cena]

A mi entender la imagen viene a que en este foro, el de css, se necesita en principio, claro está, código css. De prescindir de este detalle el tema suele, la mayoría de las veces, carecer de sentido.
Usted supone que es fácil comprender su situación aunque podremos coincidir en que debería ser más preciso en comunicarla. Cuanto más lo sea mejores respuestas obtendrá.

Es muy fácil, note:

Iniciado por bloguero

Hola les cuento que hize un boton cirucular(digamos boton entre comillas ya que solo es un circulo) como scrooll que cuando haces click ahi, te manda hasta la parte superior de la pagina, supongo q ya han visto eso y me entienden.

La descripción es excelente, solo faltó acompañarla con el código correspondiente: html/css/js
Ahora:

Iniciado por bloguero

La cosa es que solo se logra ver casi la mitad del boton ya que se queda en el medio del fondo de la pagina y de la barra del footer? como soluciono esto para que dicho boton scroll kede encima, y se logre ver bien.

Esto es imposible de responder con exactitud, en principio podes resolverlo con z-index pero a falta de código (entre ellos el que más dudas me deja es el html) dejas escapar una posible solución.

Lo invito a que exponga con claridad el problema siendo amable con quienes lo ayudan. Con seguridad obtendrá una solución.

[bloguero]

Iniciado por cristian_cena

A mi entender la imagen viene a que en este foro, el de css, se necesita en principio, claro está, código css. De prescindir de este detalle el tema suele, la mayoría de las veces, carecer de sentido.
Usted supone que es fácil comprender su situación aunque podremos coincidir en que debería ser más preciso en comunicarla. Cuanto más lo sea mejores respuestas obtendrá.

Es muy fácil, note:

La descripción es excelente, solo faltó acompañarla con el código correspondiente: html/css/js
Ahora:

Esto es imposible de responder con exactitud, en principio podes resolverlo con z-index pero a falta de código (entre ellos el que más dudas me deja es el html) dejas escapar una posible solución.

Lo invito a que exponga con claridad el problema siendo amable con quienes lo ayudan. Con seguridad obtendrá una solución.

Hola, mira mi codigo css es este:

/******Iniciocss*****/
#back-top {
position: fixed;
bottom: 30px;
right: 30px;
padding-top: 50px;
display: none;
}
#back-top a {
width: 108px;
display: block;
text-align: center;
font: 11px/100% Arial, Helvetica, sans-serif;
text-transform: uppercase;
text-decoration: none;
color: #737373;
padding-top: 50px;
width: 108px;
height: 58px;
display: block;
margin-bottom: 7px;
background: #ddd;
-webkit-border-radius: 108px;
-moz-border-radius: 108px;
border-radius: 108px;
-webkit-transition: 1s;
-moz-transition: 1s;
transition: 1s;
-webkit-transition: 1s;
-moz-transition: 1s;
transition: 1s;
}
#back-top a:hover {
background-color: #000;
}
#back-top a:hover span {
background-color: #777;
}
/*****Fincss******/

esta es una captura en imagen del problema que kiero solucionar.
www.subefotos.com/ver/?49047fca5a3d7125e87de195e5d6fa3co.jpg
Saludos

[cristian_cena]

Hola bloguero, no se ve la imagen. Es necesario el html para poder responder lo siguiente:

Iniciado por bloguero

La cosa es que solo se logra ver casi la mitad del boton ya que se queda en el medio del fondo de la pagina y de la barra del footer? como soluciono esto para que dicho boton scroll kede encima, y se logre ver bien.

Es decir, tenes elementos que se relacionan (boton, fondo y barra del footer) y necesitamos verlos (html+css). El problema seguro lo resolves aplicando la propiedad z-index, nada más te pido el código para ayudarte a hacerlo.

Saludos.

[kseso?]

Iniciado por bloguero

Por favor si quieres ayudar, se claro, ya q no me diste ninguna sugerencia.

Más claro:
En este foro leemos códigos (html+css).
Las mentes se leen aquí

Y por favor, publique los códigos con las etiquetas HIGHLIGHT

[HIGHLIGHT="HTML"]su código aquí[/HIGHLIGHT]

[sergio1210]

El z-index funcionara dependiendo de si el elemento que lo oculta es hermano, padre, hijo... del elemento ocultado, habría que ver el código HTML.

Si no poniéndole un position;relative y subiéndolo un poco con un bottom: o un top: negativo también te podría quedar bien.

Un saludo!

[bloguero]

Iniciado por cristian_cena

Hola bloguero, no se ve la imagen. Es necesario el html para poder responder lo siguiente:

Es decir, tenes elementos que se relacionan (boton, fondo y barra del footer) y necesitamos verlos (html+css). El problema seguro lo resolves aplicando la propiedad z-index, nada más te pido el código para ayudarte a hacerlo.

Saludos.

Bueno la imagen es este: http://bit.ly/JhKne5 , date cuenta como el footer tapa mi boton scroll.

Código HTML:

<p id='back-top'>
<a href='#top'><span></span>Arriba</a>
</p>
 
<footer>
    <div class="container">
      <p>2012</p>
    </div>
</footer>
 

Código CSS:

footer {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-weight: inherit;
    font-style: inherit;
    font-size: 100%;
    font-family: inherit;
    vertical-align: baseline;
}
footer{display: block}
footer {
    position: relative;
    height: 54px;
    clear: both;
    width: 100%;
    background-image: url(../images/footer.png);
    background-position: left top;
    background-repeat: repeat-x;
    margin-bottom: 18px;
    background-color: black;
    text-align:center;
    color:#FFF;
}
 
 
 
#container{
    position: relative;
    width: 100%;
}
    
#container {
    position: relative;
    width: 980px;
    margin: 0 auto;
    background-color: transparent;
    min-height: 100%;
}
 
 
#back-top {
position: fixed;
bottom: 30px;
right: 30px;
padding-top: 50px;
display: none;
}
#back-top a {
width: 108px;
display: block;
text-align: center;
font: 11px/100% Arial, Helvetica, sans-serif;
text-transform: uppercase;
text-decoration: none;
color: #737373;
padding-top: 50px;
width: 108px;
height: 58px;
display: block;
margin-bottom: 7px;
background: #ddd;
-webkit-border-radius: 108px;
-moz-border-radius: 108px;
border-radius: 108px;
-webkit-transition: 1s;
-moz-transition: 1s;
transition: 1s;
-webkit-transition: 1s;
-moz-transition: 1s;
transition: 1s;
}
#back-top a:hover {
background-color: #000;
}
#back-top a:hover span {
background-color: #777;
}
 

[bloguero]

Iniciado por sergio1210

El z-index funcionara dependiendo de si el elemento que lo oculta es hermano, padre, hijo... del elemento ocultado, habría que ver el código HTML.

Si no poniéndole un position;relative y subiéndolo un poco con un bottom: o un top: negativo también te podría quedar bien.

Un saludo!

uhmm puedes chekar mi codigo, donde podria pones eso del position: relative o lo q tu mencionas.

Asi se ve ahorita mi boton scroll, mi footer lo tapa:
http://bit.ly/JhKne5


Saludos y gracias por tu comentario.

[sergio1210]

en el HTML a el enalce en cuestión

Código:

<a href='#top'><span></span>Arriba</a>

le pondría un id:

Código:

<a id="boton_arriba" href='#top'><span></span>Arriba</a>

y en los estilos añadiría esto:

Código:

a#boton_arriba{
z-index:50; /*Con esto seguramente ya es suficiente pero te quedara montado sobre lo negro*/
position:relative; 
bottom:60px;
/*con esto ultimo lo subes un poco de su posición natural*/
}

[bloguero]

Iniciado por sergio1210

en el HTML a el enalce en cuestión

Código:

<a href='#top'><span></span>Arriba</a>

le pondría un id:

Código:

<a id="boton_arriba" href='#top'><span></span>Arriba</a>

y en los estilos añadiría esto:

Código:

a#boton_arriba{
z-index:50; /*Con esto seguramente ya es suficiente pero te quedara montado sobre lo negro*/
position:relative; 
bottom:60px;
/*con esto ultimo lo subes un poco de su posición natural*/
}

Gracias con esto ya me salio, pero la descripcion que diste en la primera linea no entendi, porque probe solo poniendo z-index:50; y ningun cambio se dio, y eso que hice variar los valores numericos. para que sirve z-index, relative, y bottom.

[cristian_cena]

z-index funciona con elementos posicionados en cualquier posicion distinta de static, por tanto, como ya declaraste posicionamiento en las cajas que intervienen en el apilado solo debes agregar esta propiedad.
Una capa con z-index:1; se apilará por encima de otra capa con z-index:0; y así sucesivamente.
Me arriesgo a decir que position:fixed no es la mejor solucion para #back-top, ya que no funcionará como esperas para distintas resoluciones. Más bien usa un padre relativo y da position:absolute a #back-top

Por ejemplo:

Código HTML:

<div id="padreRelativo"> <!-- puedes usar una caja que ya tengas, no hace falta que crees cajas extras ¿ok?-->
<p id='back-top'><a href='#top'><span></span>Arriba</a></p>
<footer>
    <div class="container">
      <p>2012</p>
    </div>
</footer>
</div>
 

Código CSS:

#padreRelativo{
position:relative;
}
#back-top {
/*... tus estilos...*/
position: absolute;
z-index:1;
}
footer {
/*... tus estilos...*/
position: relative;
z-index:0;
}
 

En fin, ¿para que sirve #padreRelativo? bien, las cotas de #back-top (propiedades top/left/bottom/right) ahora, gracias a que tenes una caja absoluta dentro de una caja relativa, dependen de #padreRelativo. ¿si? De no haber hecho esto, es decir, si dejas a #back-top con position:fixed las cotas de este dependeran de la ventana con su consecuentes problemas de visualizacion en distintas resoluciones. Tal vez si tienes tu pagina alineada a la izquierda no lo notes, pero bastaría con centrarla para verlo.

Saludos.

pd: intenta evitar declarar distintos bloques de estilos para un mismo elemento, como en el caso de footer por ejemplo, mas bien coloca todos los estilos en el mismo selector (ej: footer{/*todos tus estilos para footer acá*/}), con esto obtendrás una mejor legibilidad de tu código.

[sergio1210]

Comprender el posicionamiento en CSS es un tema importante, te recomiendo que le leas el capitulo 5 de este libro: http://www.librosweb.es/css/capitulo5.html lo explica muy bien y con ejemplos los diferentes tipos de posicionamientos: static, relative, absolute y fixed así como que es el z-index y el top, left, right y bottom.

Resumiendo:
static es el posicionamiento por defecto si no se dice nada.
relative posiciona respecto a su posicion normal (o static)
absolute lo posiciona respecto a al primer elemento padre posicionado, es decir que no tenga un static, de no tener ningún padre posicionado lo hará respecto al body.
fixed lo posiciona respecto a la ventana del navegador.

Una vez indicado el tipo de posicionamiento ¿como lo movemos? pues con...

top le indica a cuantos pixeles respecto al borde superior debe estar
bottom lo mismo respecto al inferior
right lo mismo respecto al derecho
left lo mismo respecto al izquierdo

z-index le dice el nivel en el eje z es decir tridimensional, como las capas en photoshop, sirve para cuando se solapan capas decidir quien ira encima y quien debajo, y como bien te ha dicho cristian_cena si no esta posicionado no funciona y a mayor numero más "encima" esta esa capa.

Un saludo!