html - Tom side 2 ved udskrift - Udvikleren.dk - Programmering, webdesign og grafik

Tags: html css

Bruger #14122 @ 27.08.08 15:50

Hej.

Jeg har et lille problem med en side jeg er ved at lave.

Jeg har et print CSS, så siden ser pæn ud ved udskrift. Men jeg kan ikke lige forstå hvorfor der kommer en blank side med ud, når man printer.

Det er selvfølig noget jeg ikke kan leve med, hvis jeg skal ;-) men det kunne jo være nogen her har en god.

Her er html koden:

Kode

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta name="Generator" content="Stone's WebWriter 4">
<meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1">
<meta name="Author" content="TEMCO A/S - Gitte M. Petersen">

<title>DECO STYLE</title>

<link href="css/alle.css" rel="stylesheet" type="text/css">
<link href="css/alleprint.css" rel="stylesheet" type="text/css" media="print">
</head>

<body>
<div id="overskrift"><img border="0" src="images/overskrift.gif" alt="DECO STYLE"></div>
<div id="blomst"><img border="0" src="images/blomst.jpg" alt="En orange blomst"></div>

<div id="menu">
<hr>

<table border="0"  align="center" width="100%">
<tr><td align="center" width="33%">Forside</td><td align="center" width="34%"><a href="decostyle.htm">Blomsterkummer</a></td><td align="center" width="33%">
<a href="bestil.htm">Kontakt/Bestilling</a></td></tr></table>
<hr></div>

<div id="trappe"><img border="0" src="images/ds-trappe3.jpg" width="280px" height="395px" alt="DECO STYLE kummer i forhallen"></div>
<div id="decostyletekst">

<p>Her står en lidt længere tekst</p> </div>

</body>
</html>

Og her er print CSS'en:

Kode

html, body {
           height: 100%;
	   margin: 0px;
	   border: 0px;
	   padding: 0px;
	   color: white;
	   background-color: #002149;
	   font-family: arial;
}
			

a  { text-decoration: none;
      color:white; }

a:visited { color: white;}

#overskrift {
            position:absolute;
	    left:160px;
	    top:25px;
	    width: 75%;
	    height:75%;
	    z-index:2; 
}
                                       
#menu {	
       position:absolute;
       left:82px;
       top:80px;
       width:80%;
       height:100%;
       z-index:2;   
} 

#blomst {	
    position:absolute;
	  left:480px;
	  top:33px;
	  width:50%;
	  height:100%;
	  z-index:1;   
} 		

#decostyletekst {
   text-align:justify;
   position:absolute;
   left:285px;
    top:150px;
    width:72%;
    height:100%;
    z-index:1;
}
			
#trappe {
          position:absolute;
          left:0px;
	  top:150px;
	  width:75%;
	  height:75%;
	  z-index:0;
}

Det hele kan ses her:

http://www.danbest.dk/deco

Håber der dukker nogle gode ideer op.
Hilsen Gitte.

7 svar postet i denne tråd vises herunder
1 indlæg har modtaget i alt 3 karma

Sorter efter stemmer Sorter efter dato

Bruger #13985 @ 28.08.08 12:17

140

I øvrigt er jeg ikke glad for procenter. De får alting til at hoppe rundt, når man ændrer på vinduesstørrelsen. Med pixels ved man hvor tingene står. Folk med større skærme end min må bare leve med at siden befinder sig i venstre hjørne. ;-)

En meget forkert holdning at have, særligt hvis du også arbejder professionelt med design

Nu er er det begrænset hvor meget CSS jeg kan og hvor meget jeg kan hjælpe, men jeg ved af egen erfaring at det kan lade sig gøre at få elementerne til at være statiske, hvis det gøres korrekt. Hvis de hopper rundt, er det et problem i dit design.
Ang. det med udskrivning, bør du overveje helt at undlade designet og kun printe den rene tekst; så undgår du spildpladsen og printeren finder selv ud af at lave de fornødne linjeskift mm.

Evt. hav en overordnet DIV over hele siden i 100%, derved skulle du kunne holde dine elementer inden for browserens bredde.

Indlæg senest redigeret d. 28.08.2008 12:18 af Bruger #13985

Bruger #13985 @ 27.08.08 16:17

140

Det ser ud til at du har meget tomrum ude til højre og forneden. Hvis browser og udskrift har de samme mål, så er det derfor.
Du skal muligvis ud og benytte procenter istedet for pixels i dine beregninger, det skulle kunne klare problemet.

EDIT: For lige at uddybe mig, så kør dit vindue ned i mindre størrelse, så kan du se hvad jeg mener. Du har scroll-bars i begge retninger, men uden indhold.
Du skal huske at folk ikke altid kører i samme størrelse og opløsning, derfor brug procenter aka en side er 100%, indhold udregnes deraf.

Indlæg senest redigeret d. 27.08.2008 20:32 af Bruger #13985

Bruger #14122 @ 28.08.08 09:54

Aha.

Hvis jeg forstår dig ret, skal jeg altså ind og ændre på placering af div'erne så f.eks. left og top bliver i procenter og ikke pixels.

Men hvor kommer egentlig alt det tomme plads fra?

Jeg gik da ud fra at siden ikke var bredere end det grafik der ligger længst til højre + det antal pixels der er i left.

(Og nej jeg sidder ikke ved en mega skæm med en høj opløsning. 19" 1024x768 og for det ikke skal være løgn Windows 98SE. )

Hilsen Gitte.

Bruger #13985 @ 28.08.08 11:46

140

Hehe...
At du bruger en så gammel Windows og derfor også gammel IE, kan også være et problem!

Hvad jeg kan se af din CSS, sætter du en hel fast størrelse. Det jeg mener er, at det muligvis ser korrekt ud på din skærm og opløsning, men kører man den ned eller op kan det se forkert ud. Det er "good practice" at bruge procenter (og i øvrigt huske at teste i alle mulige størelse), da du på den måde altid kan vise din side præcis som du vil have den, i alle størrelser.
Grunden til at man laver et seperat stylesheet til udskrivning, er at papiret næsten altid er smallere end en normal side. Jeg kan forestille mig at du HER skal sætte en fast størrelse eller muligvis fjerne alt grafik og stylesheets, så teksten kommer rent ud.

Det var mit råd

Bruger #14122 @ 28.08.08 11:55

Jeg har nu ændret i print css'en så alt er i procenter i stedet for pixels. Men problemet er der stadig.

Ny css kode:

Kode

html, body {
           height: 100%;
	   margin: 0%;
	   border: 0%;
	   padding: 0%;
	   color: white;
	   background-color: #002149;
	   font-family: arial;
}
			

a  { text-decoration: none;
      color:white; }

a:visited { color: white;}


#overskrift {
      position:absolute;
	    left:25%;
	    top:4%;
	    width: 75%;
	    height:75%;
	    z-index:2; 
}
                                       
#menu {	
       position:absolute;
       left:15%;
       top:9%;
       width:80%;
       height:100%;
       z-index:2;   
} 

#blomst {	
    position:absolute;
	  left:75%;
	  top:5%;
	  width:50%;
	  height:100%;
	  z-index:1;   
} 		

#decostyletekst {
   text-align:justify;
   position:absolute;
   left:45%;
    top:15%;
    width:72%;
    height:100%;
    z-index:1;
}
			
#trappe {
          position:absolute;
          left:0%;
	  top:15%;
	  width:75%;
	  height:75%;
	  z-index:0;
}

Jeg bruger Explore 6.0 så selv om det ikke er den nyeste udgave, er den dog ikke så gamle som win98.

Det virker heller ikke på winXP. (anden maskine)

I øvrigt er jeg ikke glad for procenter. De får alting til at hoppe rundt, når man ændrer på vinduesstørrelsen. Med pixels ved man hvor tingene står. Folk med større skærme end min må bare leve med at siden befinder sig i venstre hjørne. ;-)

Hilsen Gitte.

Indlæg senest redigeret d. 28.08.2008 12:05 af Bruger #14122

Bruger #14122 @ 28.08.08 13:33

En overordnet div, selvfølgelig!! Det kører bare nu. I hvert fald på udskriften.

Kode

#alt{
height: 50%;
width: 75%;}

Jeg bliver vist nødt til at overvinde mig selv og se nærmere på det der %

Alt skal med ud på udskriften, da det er en præsentationsside af blomsterkummer som vi sælger. Men man kan ikke forvente design mirakler når ledelsen ikke vil betale for det rigtige værktøj.

Point til dig Ronnie, og tak for hjælpen.

Bruger #13985 @ 28.08.08 14:24

140

... Men man kan ikke forvente design mirakler når ledelsen ikke vil betale for det rigtige værktøj...

Nej kender det alt for godt. Glad for at jeg kunne være behjælpelig!
Held og lykke med den videre udvikling.

Tom side 2 ved udskrift

Karma barometer (30 dage)

Modtaget

Givet

Favorit hos
Forum tråde
Artikler