Utskriftsvennlige sider og CSS

[johjoh]

Har et kjempestort problem som jeg håper å få hjelp til å løse !!!!

lager en site i Dreramweaver med templates og CSS. Siten må også være utskriftsvennlig og det er her problemet dukker opp.

Jeg har laget 2 stilark - ett for screen og ett for print.

følgende html koding er satt inn for å styre disse på siten :

}

//-->

</script>

<!-- TemplateBeginEditable name="head" --><!-- TemplateEndEditable -->

<link href="../myCSS.css" rel="stylesheet" type="text/css" media="print"/>

<link href="../bibliotek.css" rel="stylesheet" type="text/css" media="screen"/>

</head>

 

 

<div class='noPrint'>

<!--p>Text that I don't want printed.</p-->

 

div class "slår av menyknapper og logo/nav linje ved utskrift

 

 

og av sluttes med en

<!--p>Text that I don't want printed.</p--> </div>

før det editerbare feltet hvor all infotext er og som jeg ønsker printet ut.

 

CSS scriptene er som følger :

Bibliotek.css

/* CSS Document */

 

div#editerbarfelt {

position: absolute;

margin: absolute; left:195px; top:170px;

z-index: 115;

padding: 0px 0px 0px 0px 350px; top right bottom left

margin-top: 510px;

}

 

 

 

BODY {

font-family: Verdana, Arial, Helvetica, sans-serif;

font-size: 10px;

font-style: normal;

font-weight: normal;

font-variant: normal;

color: #333333;

}

h6 {

font-family: Arial, Helvetica, sans-serif;

font-size: 10px;

font-style: normal;

font-weight: normal;

font-variant: normal;

color: #333333;

}

h5 {

font-family: Arial, Helvetica, sans-serif;

font-size: 10px;

font-style: normal;

font-weight: bold;

color: #333333;

}

h4 {

font-family: Verdana, Arial, Helvetica, sans-serif;

font-size: 16px;

font-style: normal;

font-weight: normal;

font-variant: normal;

color: #333333;

}

h3 {

font-family: Arial, Helvetica, sans-serif;

font-size: 18px;

font-style: normal;

font-weight: bold;

font-variant: normal;

color: #333333;

}

h2 {

font-family: Arial, Helvetica, sans-serif;

font-size: 24px;

font-style: normal;

font-weight: bold;

font-variant: normal;

color: #333333;

}

h1 {

font-family: Arial, Helvetica, sans-serif;

font-size: 26px;

font-style: normal;

font-weight: bold;

color: #333333;

}

.kursiv {

font-family: Verdana, Arial, Helvetica, sans-serif;

font-size: 12px;

font-style: italic;

font-weight: normal;

font-variant: normal;

color: #333333;

}

.fet {

font-family: Verdana, Arial, Helvetica, sans-serif;

font-size: 12px;

font-style: normal;

font-weight: bold;

color: #333333;

}

.sortoverskriftH1 {

font-family: Arial, Helvetica, sans-serif;

font-size: 26px;

font-style: normal;

font-weight: bold;

font-variant: normal;

color: #000000;

}

.sortoverskriftH3 {

font-family: Arial, Helvetica, sans-serif;

font-size: 18px;

font-style: normal;

font-weight: bold;

font-variant: normal;

color: #000000;

}

.brødtekst {

font-family: Verdana, Arial, Helvetica, sans-serif;

font-size: 12px;

font-style: normal;

font-weight: normal;

font-variant: normal;

color: #000000;

}

.sortbrødtekst {

font-family: Verdana, Arial, Helvetica, sans-serif;

font-size: 12px;

font-style: normal;

font-weight: normal;

font-variant: normal;

color: #000000;

}

a:link {

font-family: Arial, Helvetica, sans-serif;

font-size: 12px;

font-style: normal;

font-weight: bolder;

color: #000000;

text-decoration: underline;

}

a:visited {

font-family: Arial, Helvetica, sans-serif;

font-size: 12px;

font-style: normal;

font-weight: bolder;

font-variant: normal;

color: #820000;

text-decoration: underline;

}

a:hover {

font-family: Arial, Helvetica, sans-serif;

font-size: 12px;

font-style: normal;

font-weight: bold;

color: #000000;

text-decoration: none;

line-height: normal;

}

 

my.css (print.css):

/* Generic Selectors */

 

div#meny {

position: display:none

margin; left:0px; top:0px;

z-index: ;

width:0px;

height:0px;

margin-top: 0px;

border-right: 1px solid #C6EC8C;

font-weight: normal;

left: 0px;

top:50px;

 

}

 

 

div#editerbarfelt {

position: absolute;

margin: absolute; left:10px; top:170px;

z-index: 115;

padding:0px 0px 0px 0px; top right bottom left

margin-top: 0px;

float: none !important;

color: black;

background: transparent none;

}

 

body {

font-family: "Times New Roman", Times, serif;

font-size:22px;

color: #cc3333;

background-color: #ffffff;

margin: 0 0 0 0; top right bottom left

}

 

p {

width: 100%;

}

 

li {

list-style-type: none;

line-height: 150%;

list-style-image: url(file:///C|/Documents%20and%20Settings/John%20Reidar/Lokale%20innstillinger/Temp/Midlertidig%20mappe%202%20for%20CSS_tutorial.zip/images/arrowSmall.gif);

}

 

 

h1 {

 

font-family: Georgia, "Times New Roman", Times, serif;

font-size: 18px;

font-weight: bold;

color: #00FF00;

}

 

h2 {

font-family: Georgia, "Times New Roman", Times, serif;

font-size: 16px;

font-weight: bold;

color: #000000;

border-bottom: 1px solid #C6EC8C;

}

 

 

/************************* Classes *************************/

.noPrint {

display: none;

}

 

 

/************************* Pseudo classes *************************/

 

:link {

color: #CC0000;

text-decoration: underline;

font-weight: bold;

}

li :link {

color: #CC9933;

text-decoration: none;

font-weight: bold;

}

 

:visited {

color: #003399;

text-decoration: underline;

font-weight: bold;

}

 

li :visited {

color: #00CC00;

text-decoration: none;

font-weight: bold;

}

 

:hover {

color: rgb(0, 96, 255);

padding-bottom: 5px;

font-weight: bold;

text-decoration: underline;

 

}

li :hover {

display: block;

color: rgb(0, 96, 255);

padding-bottom: 5px;

font-weight: bold;

border-bottom-width: 1px;

border-bottom-style: solid;

border-bottom-color: #C6EC8C;

}

 

:active {

color: rgb(255, 0, 102);

font-weight: bold;

}

 

 

 

Det aller meste fungerer og jeg får fjernet meny og logo på utskrift, men editfelt/ infotxt flytter seg ikke over til venstre og fyller hele arket. Det virker som om menyklappene stenger for editfeltet.

 

Flytter jeg på margene så editfeltet kommer riktig i utskriften vises ikke menyer i screenvisningen.

Jeg føler jeg er veldig nær løsningen men alikevel så uendelig fjernt fra den.... Har jobbet så mye med dette er er nå ved denne grensen hvor lysten til å kaste noe ut av vinduet er veeeldig nær!!!!

 

Har du noen gode forslag eller gjerne løsningen vil jeg bli umåtelig takknemmlig

 

 

johjoh

[_Paulsen_]

Prøv å sjekk denne linken her. Vet ikke om det er noe slik du er på jakt etter....

[johjoh]

ble ikke så mye klokere

 

men veldig bra og lærerik side takk

[FuLu]

Nå vet jeg ikke helt strukturen på html'en din. Har bare noen antydninger utfra css'en.

 

Det er mulig en slik klasse noprint er grei, men jeg ville ikke brukt det. Så lenge du har grei struktur i html'en hvor du har gitt forskjellige "områder" en id eller en klasse, så kan du fint formatere hvordan en print versjon skal se ut.

 

Men på en print ville jeg for all del ikke tatt med <textarea> eller <input type="text"> osv. De ville jeg satt display: none; på i en print versjon. Eventuelt om du har innkapslet slikt i en <div id="kommentarer">masse input textarea her..</div>, så kunne du bare satt #kommentarer { display: none; } i print.css f.eks.

 

Jeg pleier å ta kopi av 'screen' css'en til en 'print' css-fil. Deretter går jeg over alle reglene og setter display: none; på de jeg ikke vil ha med på print. Samtidig som jeg fjerner bakgrunnsbilder osv osv. Beste er kanskje å bare begynne på blankt ark og formatere deg frem slik du vil at en print skal se ut. Jeg tester hvordan resultatet blir ved å ta print preview.

[phun-ky]

fant en tutorial til dette i går faktisk.. *finne*

 

FANT! :

 

http://www.alistapart.com/articles/goingtoprint/

Endret 28. januar 2005 av phun-ky

[porcelaiN]

Bare et lite tips:

Legg heller en link til HTML og CSS filen isteden for å bare poste det rett her, eller iallefall bruke

 funksjonen