Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Pessoal, tenho essa lista criada com UL LI, quando gero uma impressão acontece o seguinte, quando chega no limite da pagina acontece uma quebra, ate normal ja que a lista continua na proxima pagina, coloquei um border bottom na LI, so que quando ocorre essa quebra a LI abaixo fica sem borda no TOP. tem alguma maneira de que quando essa quebra ocorrer eu colocar um BORDER TOP na LI?
segue imagem de exemplo
Abraço
/applications/core/interface/imageproxy/imageproxy.php?img=http://img829.imageshack.us/img829/7168/7oy8.png&key=f4040d9cac558e1c47c90ad408b51dd6d6b800b5a0690d066943250812c9cac0" alt="7oy8.png" />
Diéssica, valew por responder, mas dessa forma as bordas estão sendo duplicadas, preciso descobrir como identificar se é a ultima LI da pagina de impressão. Abraço
Certamente você não prestou atenção no que eu disse. As bordas não serão duplicadas.
Para identificar a última li eu utilizei a pseudo-classe :last-child, como explicado no meu post.
Enfim, fiz aqui para você dar uma olhada no resultado :seta: http://jsfiddle.net/jtfq2/
Diéssica, eu conheço a propriedade :last-child, o que acontece é o seguinte, enquanto a lista esta em modo screen funciona perfeitamente, o problema é que quando gero uma IMPRESSÃO e que dependendo da quantidade de linhas na lista não caberá em uma única pagina, sendo assim a lista continuara na próxima pagina deixando a LI do final da pagina ou a primeira do inicio da página seguinte, sem borda isso de acordo com a forma que foi inserido as bordas nas LI TOP ou BOTTOM.
Gerei um imagem baseado no html e css que vc postou
segue
/applications/core/interface/imageproxy/imageproxy.php?img=http://imageupload.co.uk/files/3l0hxjzqzmd7t8h9twa7.png&key=c12b2f7a5b39b607f437590cfe77f42ce7a20c462508f13e54f42b1774b1a561" alt="3l0hxjzqzmd7t8h9twa7.png" />
Abraço
Ah, sim.
Existem seletores mais complexos (CSS3) para isso.
Você pode pensar: quantos li há em ca cada página? Se 15, no 16º elemento, aplica essa "exceção". Faça uma fórmula para isso, como por exemplo 10n+1, que selecionará os elementos 1, 11, 21, 31, 41 etc.
Referências:
:seta: Seletores CSS3 (ver "Pseudo classe estrutural" na tabela)
:seta: :nth-child
Diéssica, esses valores serão variáveis, pois essas tabelas receberão valores vindos do Banco de Dados, e podem variar bastante, imaginei que houvesse uma forma de identificar os últimos elementos de uma pagina de impressão, de qualquer forma agradeço por sua atenção.
abraço :)
Acho que dá pra aplicar um truquezinho de margin collapse.
Defina a cor da borda como plano de fundo da UL/OL onde os LI estão.
Nas LI, adicione [inline]margin: (tamanho da borda) 0;[/inline]
Pode fazer assim:
Dispensa o border-bottom. Atribua os valores a propriedade border-top no elemento li e manipule o último elemento li com a pseudo-classe :last-child (seletor CSS3, ver referência), acrescentando border-bottom a ela, como se fosse uma "exceção" ao último elemento do ul.
Parece difícil falando, mas no código é fácil! CSS:
li {
li:last-child {
Referências:
:seta: CSS3 Selectors, em W3C