Avatar billede Mik2000 Professor
16. april 2012 - 00:11 Der er 21 kommentarer og
1 løsning

Ny side ved print

Hej

Hvis man har har en side med produkter, hvor der skal laves en printvenlig udgave (bare ren html - ikke pdf) - men hvor man skal sikre at et produkt ikke bliver delt midt i, hvordan gør man så det?

Dvs.

Produkt1
Produkt1_beskrivelse

-- Her må gerne komme sideskift--

Produkt2
Produkt2_beskrivelse

Produkt3
-- Her må IKKE komme sideskift--
Produkt3_beskrivelse

Det vil med andre ord sige at hvis siden slutter midt i et produkt, skal det produktet flyttes til den nye side.

Kan man gøre noget for at klare det?
Avatar billede olebole Juniormester
16. april 2012 - 01:30 #1
<ole>

Du kan evt. lave to sæt styles - ét for skærmvisning og ét for print. I din kode kan du skrive dem som:

<style type="text/css">
@media screen {
    /* CSS-kode for skærmvisning */
}

@media print {
    /* CSS-kode for print */
}
</style>

Sideskift kan du styre ved at sætte page-break-before eller page-break-after på de enkelte HTML-elementer.

/mvh
</bole>
Avatar billede Mik2000 Professor
16. april 2012 - 02:11 #2
Problemet her er at 1 element kan være variabel længde afhængigt af hvor meget beskrivelse der er.

Dvs. at jeg ikke blot kan sige at der er 3 elementer pr. side. Nogle gange kan der være 3 og andre 5 afhængigt af lænden.

Så kan man i så fald gøre noget for at den aldrig laver page-break midt i?
Avatar billede olebole Juniormester
16. april 2012 - 09:42 #3
Prøv at kik på siderne bag de links, jeg skrev. Hvis jeg var dig, ville jeg nok lede efter et link til en page-break property, der hedder noget med 'inside'  *o)
Avatar billede jensenjs Juniormester
16. april 2012 - 10:28 #4
Nu er jeg ikke helt sikker på hvad du mener.

Kan du ikke lave dem i Word, og afslutte med CTRL+ENTER for tvunget sideskift, og gemme som HTML
Så vil udskriften være med sideskift ved udprint.
Avatar billede olebole Juniormester
16. april 2012 - 10:37 #5
@jensenjs: Nej, der er jo tale om dynamiske sider. Og så er der vel ingen, der kan finde på at bruge Word til noget, der skal på nettet. I hvertfald ikke uden at køre det igennem en raw-text editor først - og så forsvinder Words tvungne sideskift jo
Avatar billede jensenjs Juniormester
16. april 2012 - 13:30 #6
Den glippede jeg lige :)
Avatar billede Mik2000 Professor
17. april 2012 - 00:26 #7
page-break-inside: avoid;

Denne ser ud til at virke fint i Internet Explorer 9

Men Chrome mv. forstår den desværre ikke?
Nogle forslag der?
Avatar billede olebole Juniormester
17. april 2012 - 00:35 #8
Ja, gør noget andet  =)

Det er svært at komme med alternativer uden at vide, hvad det er, du ikke kan få til at virke. Prøv at lægge et link
Avatar billede Mik2000 Professor
17. april 2012 - 00:51 #9
Hehe det er rigtigt.
Har det ikke online (arbejder lokalt)

Men i bund og grund har jeg 15 felter i database.
Bl.a. id, navn og beskrivelse

Navn og beskrivelse (og de andre ting) skal vises i listeform, og man skal kunne printe dem.

Når de printes skal må en ikke deles på en siden

Eksempel:
<div>
navn 1
beskrivelse 1
</div>
<div>
navn 2
beskrivelse 2
</div>
<div>
navn 3
beskrivelse 3
</div>

Da beskrivelse og de andre ting har variabel længde, vides det ikke hvornår sideskift skal laves.
Avatar billede olebole Juniormester
17. april 2012 - 01:07 #10
- og lægger du page-break-inside: avoid; på DIV elementerne?
Avatar billede Mik2000 Professor
18. april 2012 - 00:32 #11
Yep og det virker super i ie men ikke i Chrome mv
Avatar billede olebole Juniormester
18. april 2012 - 01:00 #12
Jeg kan se, mange har problemer med understøttelsen - ikke mindst i Chrome. Prøv dette:

*) Fjern evt. float på DIV'ene og deres indhold
*) Sørg for, DIV'ene ikke har display:inline eller display:inline-block
*) Fjern evt. borders på DIV'ene

Virker det så?
Avatar billede Mik2000 Professor
18. april 2012 - 10:13 #13
Hej

Prøvede helt simpelt, men det virker heller ikke i Chrome


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
<!--
div{
    page-break-inside:avoid;
}
-->
</style>
</head>

<body>
<div>Tekst 1<br />
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce quis lectus quis sem lacinia nonummy. Proin mollis lorem non dolor. In hac habitasse platea dictumst. Nulla ultrices odio. Donec augue. Phasellus dui. Maecenas facilisis nisl vitae nibh. Proin vel est vitae eros pretium dignissim. Aliquam aliquam sodales orci. Suspendisse potenti. Nunc adipiscing euismod arcu. Quisque facilisis mattis lacus. Fusce bibendum, velit in venenatis viverra, tellus ligula dignissim felis, quis euismod mauris tellus ut urna.
Proin scelerisque. Nulla in mi. Integer ac leo. Nunc urna ligula, gravida a, pretium vitae, bibendum nec, ante. Aliquam ullamcorper iaculis lectus. Sed vel dui. Etiam lacinia risus vitae lacus. Aliquam elementum imperdiet turpis. In id metus. Mauris eu nisl. Nam pharetra nisi nec enim. Nulla aliquam, tellus sed laoreet blandit, eros urna vehicula lectus, et vulputate mauris arcu ut arcu. Praesent eros metus, accumsan a, malesuada et, commodo vel, nulla. Aliquam sagittis auctor sapien. Morbi a nibh. Nullam non metus. Quisque tellus lorem, pellentesque sit amet, blandit ac, nonummy eget, augue.
Donec eu metus sed lorem auctor vehicula. Fusce dolor. Nulla iaculis congue leo. Mauris risus velit, pulvinar ut, dignissim non, sagittis in, leo. Phasellus aliquet mi vel metus. Maecenas vestibulum lorem at velit. Morbi consequat metus a tellus. Nullam quis dui. Sed enim odio, bibendum at, ultricies et, ullamcorper sit amet, neque. Curabitur porttitor dolor. Vivamus vulputate. Donec sit amet augue eu risus rutrum vestibulum. Etiam pede. In hac habitasse platea dictumst. Vivamus non erat. Vivamus congue vehicula ante.
</div>
<br /><br />
<div>
Tekst 2<br />
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce quis lectus quis sem lacinia nonummy. Proin mollis lorem non dolor. In hac habitasse platea dictumst. Nulla ultrices odio. Donec augue. Phasellus dui. Maecenas facilisis nisl vitae nibh. Proin vel est vitae eros pretium dignissim. Aliquam aliquam sodales orci. Suspendisse potenti. Nunc adipiscing euismod arcu. Quisque facilisis mattis lacus. Fusce bibendum, velit in venenatis viverra, tellus ligula dignissim felis, quis euismod mauris tellus ut urna.
Proin scelerisque. Nulla in mi. Integer ac leo. Nunc urna ligula, gravida a, pretium vitae, bibendum nec, ante. Aliquam ullamcorper iaculis lectus. Sed vel dui. Etiam lacinia risus vitae lacus. Aliquam elementum imperdiet turpis. In id metus. Mauris eu nisl. Nam pharetra nisi nec enim. Nulla aliquam, tellus sed laoreet blandit, eros urna vehicula lectus, et vulputate mauris arcu ut arcu. Praesent eros metus, accumsan a, malesuada et, commodo vel, nulla. Aliquam sagittis auctor sapien. Morbi a nibh. Nullam non metus. Quisque tellus lorem, pellentesque sit amet, blandit ac, nonummy eget, augue.
Donec eu metus sed lorem auctor vehicula. Fusce dolor. Nulla iaculis congue leo. Mauris risus velit, pulvinar ut, dignissim non, sagittis in, leo. Phasellus aliquet mi vel metus. Maecenas vestibulum lorem at velit. Morbi consequat metus a tellus. Nullam quis dui. Sed enim odio, bibendum at, ultricies et, ullamcorper sit amet, neque. Curabitur porttitor dolor. Vivamus vulputate. Donec sit amet augue eu risus rutrum vestibulum. Etiam pede. In hac habitasse platea dictumst. Vivamus non erat. Vivamus congue vehicula
</div>
<br /><br />
<div>
Tekst 3<br />
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce quis lectus quis sem lacinia nonummy. Proin mollis lorem non dolor. In hac habitasse platea dictumst. Nulla ultrices odio. Donec augue. Phasellus dui. Maecenas facilisis nisl vitae nibh. Proin vel est vitae eros pretium dignissim. Aliquam aliquam sodales orci. Suspendisse potenti. Nunc adipiscing euismod arcu. Quisque facilisis mattis lacus. Fusce bibendum, velit in venenatis viverra, tellus ligula dignissim felis, quis euismod mauris tellus ut urna.
Proin scelerisque. Nulla in mi. Integer ac leo. Nunc urna ligula, gravida a, pretium vitae, bibendum nec, ante. Aliquam ullamcorper iaculis lectus. Sed vel dui. Etiam lacinia risus vitae lacus. Aliquam elementum imperdiet turpis. In id metus. Mauris eu nisl. Nam pharetra nisi nec enim. Nulla aliquam, tellus sed laoreet blandit, eros urna vehicula lectus, et vulputate mauris arcu ut arcu. Praesent eros metus, accumsan a, malesuada et, commodo vel, nulla. Aliquam sagittis auctor sapien. Morbi a nibh. Nullam non metus. Quisque tellus lorem, pellentesque sit amet, blandit ac, nonummy eget, augue.
Donec eu metus sed lorem auctor vehicula. Fusce dolor. Nulla iaculis congue leo. Mauris risus velit, pulvinar ut, dignissim non, sagittis in, leo. Phasellus aliquet mi vel metus. Maecenas vestibulum lorem at velit. Morbi consequat metus a tellus. Nullam quis dui. Sed enim odio, bibendum at, ultricies et, ullamcorper sit amet, neque. Curabitur porttitor dolor. Vivamus vulputate. Donec sit amet augue eu risus rutrum vestibulum. Etiam pede. In hac habitasse platea dictumst. Vivamus non erat. Vivamus congue vehicula ante.
</div>
</body>
</html>
Avatar billede olebole Juniormester
18. april 2012 - 13:14 #14
Så har jeg ikke noget bud. I følge Google (søgemaskinen) er der rigtig mange, der har haft samme problem (i øvrigt også med Safari), og noget kunne tyde på, Chrome stadig ikke understøtter denne del af standarden  :o|

Det bliver mere og mere uforståeligt, hvorfor den er blevet så populær
Avatar billede Mik2000 Professor
18. juni 2012 - 21:31 #15
Øv øv øv
Det er så træls at de ikke kan implementerer alle muligheder i alle browsere

Men du løste det halvt, så halv point til dig hvis du skriver et svar :)
Avatar billede olebole Juniormester
18. juni 2012 - 21:45 #16
Ellers tak, jeg samler ikke point. Læg selv et svar og accepter det, så tråden lukkes  =)
Avatar billede Mik2000 Professor
18. juni 2012 - 21:55 #17
kk tak for hjælpen :)
Avatar billede htx98i17 Professor
03. august 2012 - 09:34 #18
Hvis jeg var troende, ville jeg takke min gud for denne tråd.
Avatar billede olebole Juniormester
03. august 2012 - 14:45 #19
@htx98i17: den forstod jeg så ikke lige  =)
Avatar billede htx98i17 Professor
03. august 2012 - 16:00 #20
Hehe, jeg er bare glad for at jeg fandt ud af #1
Avatar billede htx98i17 Professor
03. august 2012 - 16:01 #21
Jeg er bare glad for at jeg lærte det i #1. Det var lige hvad jeg søgte.
Avatar billede olebole Juniormester
03. august 2012 - 16:11 #22
Ahhhh ... fedt  =)
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester