Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Gustavo Zirbes

Botão top

Por , em Desenvolvimento frontend

Recommended Posts

Gustavo Zirbes    0

Gustavo Zirbes
Postado

Opa, tenho uma página com tamanho de largura definido e ela aumenta de acordo com o conteudo do include. Como eu poderia fazre um botão "TOPO" fora da div principal, ao lado direito que desce acompanhando no rodapé da página? Assim a pessoa não precisa ficar rolando para cima a todo momento, pois como é uma página de manuais, ela é muito grande. Postei aqui pois uso PHP, mas acho que isso poderia ser em um html/css não?Valeu.

Compartilhar este post

Link para o post
Compartilhar em outros sites

inforsis    1

inforsis
Postado

opâ Gustavo Zirbes!

Com html/css você pode resolver o problema sim.

 

Primeiramente crie uma id para definir as propriedades do botão.

 

#topo {width:40px;height:15px;margin:0;padding:0;right:0px;bottom:0px;position:fixed;}

 

Agora você insira seu botão no html da página:

 

[url="http-~~-//december.com/html/4/element/body.html"]<body>[/url]
        [url="http-~~-//december.com/html/4/element/img.html"]<img[/url] id="topo" src="botao.jpg" />
</body>

 

Agora link o botão e defina uma id no body da página que será responsavel por subir a página até o topo. Poderia ser definida esta id em qualquer outro elemento, desde que permanessa no topo do página.

 

[url="http-~~-//december.com/html/4/element/body.html"]<body[/url] id="site">
        [url="http-~~-//december.com/html/4/element/a.html"]<a[/url] href="#site">[url="http-~~-//december.com/html/4/element/img.html"]<img[/url] id="topo" src="botao.jpg" /></a>
</body>

 

Testado no IE7 e no FF2. http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

Compartilhar este post

Link para o post
Compartilhar em outros sites

Gustavo Zirbes    0

Gustavo Zirbes
Postado

opâ Gustavo Zirbes!

Com html/css você pode resolver o problema sim.

 

Primeiramente crie uma id para definir as propriedades do botão.

 

<div class="html">#topo {width:40px;height:15px;margin:0;padding:0;right:0px;bottom:0px;position:fixed;}</div>

 

Agora você insira seu botão no html da página:

 

<div class="html"><span style="color: #009900;">[url="http://december.com/html/4/element/body.html"]<span style="color: #0000BB;"><body>[/url]
        <span style="color: #009900;">[url="http://december.com/html/4/element/img.html"]<span style="color: #0000BB;"><img[/url] <span style="color: #000066;">id=<span style="color: #ff0000;">"topo" <span style="color: #000066;">src=<span style="color: #ff0000;">"botao.jpg" /<span style="color: #0000BB;">></a>
<span style="color: #009900;"><span style="color: #0000BB;"></body></div>

 

Agora link o botão e defina uma id no body da página que será responsavel por subir a página até o topo. Poderia ser definida esta id em qualquer outro elemento, desde que permanessa no topo do página.

 

<div class="html"><span style="color: #009900;">[url="http://december.com/html/4/element/body.html"]<span style="color: #0000BB;"><body[/url] <span style="color: #000066;">id=<span style="color: #ff0000;">"site"<span style="color: #0000BB;">></a>
        <span style="color: #009900;">[url="http://december.com/html/4/element/a.html"]<span style="color: #0000BB;"><a[/url] <span style="color: #000066;">href=<span style="color: #ff0000;">"#site"<span style="color: #0000BB;">></a><span style="color: #009900;">[url="http://december.com/html/4/element/img.html"]<span style="color: #0000BB;"><img[/url] <span style="color: #000066;">id=<span style="color: #ff0000;">"topo" <span style="color: #000066;">src=<span style="color: #ff0000;">"botao.jpg" /<span style="color: #0000BB;">></a><span style="color: #009900;"><span style="color: #0000BB;"></a>
<span style="color: #009900;"><span style="color: #0000BB;"></body></div>

 

Testado no IE7 e no FF2. http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

Position fixed tem um problema com IE6, pra resolver: http://www.web2ponto0.com.br/position-fixed-que-tal/

 

[]'s

Certinho pessoal!

 

Realmente, no IE6 estava dando um probleminha, mas com a dica do amigo INSIDE o problema foi resolvido...

 

Deixo abaixo como ficou o CSS (porco pq estou postando aqui da aula) caso alguem mais possa vir a ter a mesma dúvida:

 

<style type="text/css">   #topo {   width:104px;   height:40px;   border: 0px;   margin:0;   padding:0;   right:0px;   bottom:0px;   position:fixed;   }   * html {   overflow-y: hidden;   }    * html body {   overflow-y: auto;   height: 100%;   padding: 0;   }    * html img#topo {   position: absolute;   }</style>
Valeu e até mais!

Compartilhar este post

Link para o post
Compartilhar em outros sites

inforsis    1

inforsis
Postado

opâ Gustavo Zirbes!

Nem percebi o bug no IE6 (não deu para testar ontem). Mais a dica do #INSIDE# foi essencial.

Que bom que conseguimos te ajudar com sua dúvida, e melhor ainda que você retornou para demostrar a solução final.

Qualquer nova dúvida volte a postar. http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

Compartilhar este post

Link para o post
Compartilhar em outros sites

Gustavo Zirbes    0

Gustavo Zirbes
Postado

opâ Gustavo Zirbes!

Nem percebi o bug no IE6 (não deu para testar ontem). Mais a dica do #INSIDE# foi essencial.

Que bom que conseguimos te ajudar com sua dúvida, e melhor ainda que você retornou para demostrar a solução final.

Qualquer nova dúvida volte a postar. http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

Ops probleminha...no IE6 ele aparece mas não desce junto com a página...ele fica parado dai tenho que voltar e passar o mouse me cima dele para ele descer lá para o canto...alguma dica?

 

Inté

Compartilhar este post

Link para o post
Compartilhar em outros sites

webflex    0

webflex
Postado

Olá,Amigo, consegues nos mostrar um pouco do código? A dica do INSIDE é boa ;), no entanto o IE6 é sempre o mesmo problema.Cumps \o/

Compartilhar este post

Link para o post
Compartilhar em outros sites

Gustavo Zirbes    0

Gustavo Zirbes
Postado

CSS:

<style type="text/css">#topo {width:104px;height:40px;border: 0px;margin:0;padding:0;right:0px;bottom:0px;position:fixed;}* html {overflow-y: hidden;}* html body {overflow-y: auto;height: 100%;padding: 0;}* html img#topo {position: absolute;}</style>

IMAGEM:

<a href="#"><img id="topo" src="botao.jpg" /></a>

Compartilhar este post

Link para o post
Compartilhar em outros sites

webflex    0

webflex
Postado

Olá,

 

Realmente não estou conseguindo resolver seu problema :S.

Existe sempre o caminho da utilização de JS.

 

Cumps \o/

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito