Quebra de página

[marcello.alvess 0]

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

 

[Diéssica 140]

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 {
border-top: 1px solid #000;
}

li:last-child {
border-bottom: 1px solid #000;
}

:bye:

Referências:

:seta: CSS3 Selectors, em W3C

[marcello.alvess 0]

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

[Diéssica 140]

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/

[marcello.alvess 0]

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

 

Abraço

[Diéssica 140]

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

[marcello.alvess 0]

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 :)

[Evandro Oliveira 331]

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]