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

Borda da div menu não vai até a buttom


mestre fyoda

Pergunta

A div menu ela não esta colocando a borda até lá em baixo

#content_container{ background:#EFF5FF url(../img/images/areaCliente/borda.png) repeat-y;border:5px solid #258;color:#666;margin:20px auto 0;padding:0;text-align:left;width: 950px;}
#menu { width: 219px; float: left; border-right:1px solid #CFE2FF; margin: 0px auto; padding: 15px; }
#menu ul{list-style:none;margin:0 0 10px;padding:0;padding-left: 25px;}
#menu ul li{line-height:30px;margin:0 auto;padding:0;}
#conteudo { float:right; width: 670px;text-align:left; margin: 0px auto; padding: 15px; background-color: #FFF;}
.clear{clear:both;}

       <div id="content_container">

          <div id="menu">
            <br />
            <p class="header">Navegação Rápida</p>
            <ul>
              <li><a href=""><img src="img/images/areaCliente/support.gif" alt="Suporte" width="16" height="16" border="0" class="absmiddle" /></a> <a href="" title="Suporte">Últimos Pedidos</a></li>
              <li><a href=""><img src="img/images/areaCliente/pedidoaberto.png" alt="Área do Cliente" width="16" height="16" border="0" class="absmiddle" /></a> <a href="" title="Área do Cliente">Pedidos em Aberto</a></li>
              <li><a href="" title="Anúncios"><img src="img/images/areaCliente/entrega.png" alt="Anúncios" width="16" height="16" border="0" class="absmiddle" /></a> <a href="" title="Anúncios">Pedidos Entregues</a></li>
              <li><a href="" title="Base de Conhecimento"><img src="img/images/areaCliente/pedido.png" alt="Base de Conhecimento" width="16" height="16" border="0" class="absmiddle" /></a> <a href="" title="Base de Conhecimento">Pedidos por Número</a></li>
              <li><a href="" title="Enviar Ticket"><img src="img/images/areaCliente/datapedido.png" alt="Enviar Ticket" width="16" height="16" border="0" class="absmiddle" /></a> <a href="" title="Tickets de Suporte">Data do Pedido</a></li>
              <li><a href="" title="Downloads"><img src="img/images/areaCliente/pedido.png" alt="Downloads" width="16" height="16" border="0" class="absmiddle" /></a> <a href="" title="Downloads">Todos os Pedidos</a></li>
              <li><a href="" title="Pedido"><img src="img/images/areaCliente/order.gif" alt="Pedido" width="16" height="16" border="0" class="absmiddle" /></a> <a href="" title="Pedido">Alterar E-Mail</a></li>
              <li><a href="" title="Anúncios"><img src="img/images/areaCliente/alterarsenha.png" alt="Anúncios" width="16" height="16" border="0" class="absmiddle" /></a> <a href="" title="Anúncios">Alterar Senha</a></li>
              <li><a href="" title="Base de Conhecimento"><img src="img/images/areaCliente/editarcadastro.png" alt="Base de Conhecimento" width="16" height="16" border="0" class="absmiddle" /></a> <a href="" title="Base de Conhecimento">Alterar dados Cadastrais</a></li>
              <li><a href="" title="Enviar Ticket"><img src="img/images/areaCliente/email.png" alt="Enviar Ticket" width="16" height="16" border="0" class="absmiddle" /></a> <a href="" title="Tickets de Suporte">E-Mail de Ofertas</a></li>
              <li><a href="" title="Downloads"><img src="img/images/areaCliente/boleto.png" alt="Downloads" width="16" height="16" border="0" class="absmiddle" /></a> <a href="" title="Downloads">2º via do Boleto</a></li>
              <li><a href="" title="Pedido"><img src="img/images/areaCliente/suporte.png" alt="Pedido" width="16" height="16" border="0" class="absmiddle" /></a> <a href="" title="Pedido">Suporte</a></li>
            </ul>
            <br /><br /><br />
          </div>

          <div id="conteudo">
            <h1>Área do Assinante</h1><br />
              <p>Bem-vindo <b><asp:Label ID="nomeCliente" runat="server"></asp:Label></b></p><br />
        <table width="100%" border="0" align="center" cellpadding="10" cellspacing="0">
          <tr>
            <td><div align="center"><a href=""><img src="img/images/areaCliente/32x32.png" border="0" alt="" /></a></div></td>
            <td width="50%"><strong><a href="">Últimos Pedidos</strong>
              </td>
            <td><div align="center"><a href=""><img src="img/images/areaCliente/pedidoaberto32x32.png" border="0" alt="" /></a></div></td>
            <td><strong><a href="">Pedidos em Aberto</a></strong><br />
              </td>
          </tr>
          <tr>
            <td><div align="center"><a href=""><img src="img/images/areaCliente/entrega32x32.png" border="0" alt="" /></a></div></td>
            <td><strong><a href="">Pedidos Entregues</a></strong><br />
              </td>
            <td><div align="center"><a href=""><img src="img/images/areaCliente/pedido32x32.png" border="0" alt="" /></a></div></td>
            <td><strong><a href="">Pedidos por Número</a></strong><br />
              </td>
          </tr>
          <tr>
            <td><div align="center"><a href=""><img src="img/images/areaCliente/datapedido32x32.png" border="0" alt="" /></a></div></td>
            <td><strong><a href="">Data do Pedido</a><br />
            </strong></td>
            <td><div align="center"><a href=""><img src="img/images/areaCliente/pedido32x32.png" border="0" alt="" /></a></div></td>
            <td width="50%"><strong><a href="">Todos os Pedidos</a></strong><br />
              </td>
          </tr>
          <tr>
            <td><div align="center"><a href=""><img src="img/images/areaCliente/.png" border="0" alt="" /></a></div></td>
            <td><strong><a href="">Alterar E-Mail</a></strong><br />
              </td>
            <td><div align="center"><a href=""><img src="img/images/areaCliente/alterarsenha32x32.png" border="0" alt="" /></a></div></td>
            <td><strong><a href="">Alterar Senha</a></strong><br />
              </td>
          </tr>
          <tr>
            <td><div align="center"><a href=""><img src="img/images/areaCliente/editarcadastro32x32.png" border="0" alt="" /></a></div></td>
            <td><strong><a href="">Alterar Dados Cadastrais</a></strong><br />
              </td>
            <td><div align="center"><a href=""><img src="img/images/areaCliente/email32x32.png" border="0" alt="" /></a></div></td>
            <td><strong><a href="">E-Mail de Ofertas</a></strong><br />
              </td>
          </tr>
          <tr>
            <td><div align="center"><a href=""><img src="img/images/areaCliente/boleto32x32.png" border="0" alt="" /></a></div></td>
            <td><strong><a href="">2º via do Boleto</a></strong><br />
              </td>
            <td><div align="center"><a href=""><img src="img/images/areaCliente/suporte32x32.png" border="0" alt="" /></a></div></td>
            <td><strong><a href="">Suporte</a></strong><br />
              </td>
          </tr>          
          
          <tr>
            <td><div align="center"><a href=""><img src="img/images/areaCliente/boleto32x32.png" border="0" alt="" /></a></div></td>
            <td><strong><a href="">2º via do Boleto</a></strong><br />
              </td>
            <td><div align="center"><a href=""><img src="img/images/areaCliente/suporte32x32.png" border="0" alt="" /></a></div></td>
            <td><strong><a href="">Suporte</a></strong><br />
              </td>
          </tr>
          <tr>
            <td><div align="center"><a href=""><img src="img/images/areaCliente/boleto32x32.png" border="0" alt="" /></a></div></td>
            <td><strong><a href="">2º via do Boleto</a></strong><br />
              </td>
            <td><div align="center"><a href=""><img src="img/images/areaCliente/suporte32x32.png" border="0" alt="" /></a></div></td>
            <td><strong><a href="">Suporte</a></strong><br />
              </td>
          </tr>
          <tr>
            <td><div align="center"><a href=""><img src="img/images/areaCliente/boleto32x32.png" border="0" alt="" /></a></div></td>
            <td><strong><a href="">2º via do Boleto</a></strong><br />
              </td>
            <td><div align="center"><a href=""><img src="img/images/areaCliente/suporte32x32.png" border="0" alt="" /></a></div></td>
            <td><strong><a href="">Suporte</a></strong><br />
              </td>
          </tr>

        </table>
        </div>

          <div class="clear"></div>
        </div>

Link para o comentário
Compartilhar em outros sites

16 respostass a esta questão

Posts Recomendados

  • 0

Mas quem disse que a borda não está na div toda?

Está sim, o problema é que a div está acabando justamente ali aonde a borda para, a div não está indo até la embaixo.

Aumentei o height dela na firebug e ficou certinho, não desalinhou nada no layout. ;)

Link para o comentário
Compartilhar em outros sites

  • 0

Realmente inverti...hehe

mas me responde uma coisa, o conteúdo da div conteudo é dinamico? ou seja por isso não tem tamanho fixo?

Se for, o que acha de colocar a borda do lado esquerdo da div conteudo em vez de deixar do lado direito da div menu?

Fiz aqui, e funcionou...

#content_container{ background:#EFF5FF url(../img/images/areaCliente/borda.png) repeat-y;border:5px solid #258;color:#666;margin:20px auto 0;padding:0;text-align:left;width: 950px;}
#menu { width: 219px; float: left; margin: 0px auto; padding: 15px; }
#menu ul{list-style:none;margin:0 0 10px;padding:0;padding-left: 25px;}
#menu ul li{line-height:30px;margin:0 auto;padding:0;}
#conteudo { float:right; width: 670px;text-align:left; margin: 0px auto; padding: 15px; background-color: #FFF; border-left:1px solid #CFE2FF;}
.clear{clear:both;}

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...