Ir para conteúdo
Fórum Script Brasil
  • 0

Div Flutuante


weslley clyton

Pergunta

Ae galera.. sei que já tem um monte de tópico falando sobre div flutuante, mas não consegui achar resposta para meu problema..

é o seguinte, eu tenho minha div flutuante funcionando e posicionada no lugar que eu quero tudo certinho ... o único problema é que o lugar onde eu sei a divi fica com o espaço do tamanho da div...

como eu sei que uma imagem vale por mil palavras ta ai a tela:

divflutuante.png

a foto do boi é a div flutuante e o espaço selecionado é onde eu inseri a div e ficou em branco..

o código

<style>
#foto_teste{ position: relative; width: 273px; height: 227px; top: -210px; left: -758px; z-index:12}
</style>

<table width="1016" border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td style="padding-bottom:25px;">
            <div style="float:left" class="index_arvore"></div>
            <div style="float:right" class="index_informativo"></div>
        </td>
      </tr>
      <tr>
        <td align="right" valign="top" style="padding-bottom:68px;">
            <table width="970" border="0" cellspacing="0" cellpadding="0">
                <tr>
                <td width="472">
                    <div style="background:#9C0; height:26px; width:435px; padding:28px 0 20px 37px"><!--url(img/site/bg_titulo_transp.png) top left-->
                        <img src="img/site/titulos/em_destaque.png" width="370" height="23" />
                    </div>
                    <div style="background:#990; height:232px"><!--url(img/site/bg_conteudo_trans.png) top left-->
               <div style="float:right; background:#dbb661; width:233px; height:149px; margin-top:36px; padding:10px;">
                            <div style="padding-bottom:14px;">Nome: Banbino UZNome: Banbino UZ</div>
                            <div style="padding-bottom:3px;">Descri&ccedil;&atilde;o</div>
                            <div align="justify">
A ra&ccedil;a Tabapu&atilde; participou da Expozebu 2010 em Uberaba (MG) com 219 animais, sendo 141 f&ecirc;meas e 78 machos, al&eacute;m de 4 matrizes modelos. Participaram criadores do Norte ao Sul do pa&iacute;s. O julgamento da ra&ccedil;a aconteceu no dia 06 de maio, foi julgado ...</div>
                      </div>
                    </div>
                </td>
                <td width="498" align="left" valign="top">
                    <div style="background:#9C0; height:26px; width:409px; padding:28px 0 20px 37px"></div><!--url(img/site/bg_titulo_transp.png) top left-->
                  <div style="background:#990; height:232px; width:446px;"></div><!--url(img/site/bg_conteudo_trans.png) top left-->
                </td>
                </tr>
            </table>
            <!--Div Flutuante-->
            <div id="foto_teste"><img src="img/site/destaque.png" /></div>
        </td>
      </tr>
      <tr>
        <td align="center" valign="top">
            <div style="background:url(img/site/tracejado.png) repeat-x; height:5px;"></div>
            <table width="970" border="0" cellspacing="0" cellpadding="0" style="margin-top:17px;">
                <tr>
                <td width="287">
                    <div style="background:url(img/site/bg_titulo_transp.png); height:13px; padding:13px 0 12px 9px">
                        <img src="img/site/titulos/newsletter.png" width="156" height="14" />
                    </div>
                    <div style="background:url(img/site/bg_conteudo_trans.png); height:155px; padding:10px;">
                        <div style="margin-bottom:10px;">Cadastre seu e-mail e receba os informativos e novidades da fazenda copacabana.</div>
                        <div style="margin-bottom:3px;">Nome</div>
                        <div><input type="text" style="width:267px; height:20px;"/></div>
                        <div style="margin-bottom:3px; margin-top:3px">Nome</div>
                        <div><span style="margin-top:10px;">
                          <input type="text" style="width:267px; height:20px;"/>
                        </span></div>
                        <div align="right" style="margin-top:10px;"><input type="image" src="img/site/bt_enviar.png" /></div>
                    </div>
                </td>
                <td width="40" style="background:url(img/site/traceja_pe.png) repeat-y center;"></td>
                <td width="288" valign="top">
                    <div align="left" style="height:58px">
                        <div style="float:left"><img src="img/site/logo_nticias.png" width="37" height="38" /></div>
                        <div style="float:left; padding-left:7px; margin-top:12px;"><img src="img/site/titulos/ultimas_noticias.png" width="152" height="14" />
                        </div>
                    </div>
                    <div>
                        <div style="padding-bottom:10px;">06/2010 - 13&ordm; Leil&atilde;o Ber&ccedil;o do Tabapu&atilde;</div>
                        <div style="padding-bottom:10px;">06/2010 - 13&ordm; Leil&atilde;o Ber&ccedil;o do Tabapu&atilde;</div>
                        <div style="padding-bottom:10px;">06/2010 - 13&ordm; Leil&atilde;o Ber&ccedil;o do Tabapu&atilde;</div>
                        <div style="padding-bottom:10px;">06/2010 - 13&ordm; Leil&atilde;o Ber&ccedil;o do Tabapu&atilde;</div>
                      <div style="padding-bottom:10px;">06/2010 - 13&ordm; Leil&atilde;o Ber&ccedil;o do Tabapu&atilde;</div>
                        <div style="padding-bottom:10px;">06/2010 - 13&ordm; Leil&atilde;o Ber&ccedil;o do Tabapu&atilde;</div>
<div>06/2010 - 13&ordm; Leil&atilde;o Ber&ccedil;o do Tabapu&atilde;</div>
                        
                  </div>
                </td>
                <td width="37" style="background:url(img/site/borda_not.png) repeat-y center">&nbsp;</td>
                <td width="318">
                    <div align="left" style="height:58px">
                        <div style="float:left"><img src="img/site/logo_eventos.png" width="37" height="38" /></div>
                        <div style="float:left; padding-left:7px; margin-top:12px;"><img src="img/site/titulos/ultimos_eventos.png" width="152" height="14" />
                        </div>
                    </div>
                    <div>
                        <div style="padding-bottom:10px;">06/2010 - 13&ordm; Leil&atilde;o Ber&ccedil;o do Tabapu&atilde;</div>
                        <div style="padding-bottom:10px;">06/2010 - 13&ordm; Leil&atilde;o Ber&ccedil;o do Tabapu&atilde;</div>
                        <div style="padding-bottom:10px;">06/2010 - 13&ordm; Leil&atilde;o Ber&ccedil;o do Tabapu&atilde;</div>
                        <div style="padding-bottom:10px;">06/2010 - 13&ordm; Leil&atilde;o Ber&ccedil;o do Tabapu&atilde;</div>
                      <div style="padding-bottom:10px;">06/2010 - 13&ordm; Leil&atilde;o Ber&ccedil;o do Tabapu&atilde;</div>
                        <div style="padding-bottom:10px;">06/2010 - 13&ordm; Leil&atilde;o Ber&ccedil;o do Tabapu&atilde;</div>
<div>06/2010 - 13&ordm; Leil&atilde;o Ber&ccedil;o do Tabapu&atilde;</div>
                        
                  </div>
                </td>
                </tr>
            </table>
        </td>
      </tr>
    </table>

ajudem ai =D..

até

Link para o comentário
Compartilhar em outros sites

3 respostass a esta questão

Posts Recomendados

  • 0

seu código fez meus olhos sangrarem D= :wacko:

não parei pra olhar essa bagunça que você fez no código, mas se você inseriu a div em uma tr da tabela então o problema esta ai..

você levantou a foto mas a tr continua ali ocupando o espaço.

se a div não esta dentro de uma tr, tenta por a position dela como absolute ao invés de relative

se não conseguir fala ai

Link para o comentário
Compartilhar em outros sites

  • 0
seu código fez meus olhos sangrarem D= :wacko:

não parei pra olhar essa bagunça que você fez no código, mas se você inseriu a div em uma tr da tabela então o problema esta ai..

você levantou a foto mas a tr continua ali ocupando o espaço.

se a div não esta dentro de uma tr, tenta por a position dela como absolute ao invés de relative

se não conseguir fala ai

cara.. não sou eu quem bagunçou o código.. eu copiei e colei e saiu assim...

então o problema era que eu tinha que colocar no css a div como relative e tinha que ser absolut..

agora o problema é que eu colocando como absolut o css alinha a div de acordo com o tamanho da tela, dai f**** porque dependo da resolução do cara a div invade outrros conteudos...

Link para o comentário
Compartilhar em outros sites

Participe da discussão

Você pode postar agora e se registrar depois. Se você já tem uma conta, acesse agora para postar com sua conta.

Visitante
Responder esta pergunta...

×   Você colou conteúdo com formatação.   Remover formatação

  Apenas 75 emoticons são permitidos.

×   Seu link foi incorporado automaticamente.   Exibir como um link em vez disso

×   Seu conteúdo anterior foi restaurado.   Limpar Editor

×   Você não pode colar imagens diretamente. Carregar ou inserir imagens do URL.



  • Estatísticas dos Fóruns

    • Tópicos
      152k
    • Posts
      651,8k
×
×
  • Criar Novo...