9 svar · 778 visningar · startad av KoTTeN
Hej!
Ska ta fram en mall för utskrifter till en sida. Kan man med hjälp av CSS ordna sidhuvud samt sidfot och sen lägga text emellan som sedan "flyter" över till nästa sida utan att störa sidfot och sidhuvudet? Hur anger man bredden så det passar ett A4?
Om du söker här på forumet så finns det kod som visar på sidbrytning vid utskrift. Kan vara användbart. Sidfot och sidhuvud har jag för mig att det inte går.
Förstår inte riktigt vad du menar med flyter... Bredden anger du i relativa mått. Ex % em..
body{width:80%}
Om du låter bli att ange bredden så blir det lagom brett för pappersformatet man skriver ut på.
Ang sidhuvud och sidfot har jag en länk till dig (men inte nån direkt lösning som funkar :(): http://css-discuss.incutio.com/?page=PrintingHeaders
Detta måste vara första gången jag ser zcorpan svara utan en fungerande lösning! :h :p
Är det alltså så att man får ta till andra format om man vill styra utskriftslayouten med sidhuvud etc, t.ex. pdf?
(Nej, jag orkade inte läsa den länkade sidan)
Tack för tipsen och länkarna!
Nu ska det i första hand användas internt och här har IE åkt ut för länge sedan. :)
Om Firefox används kan man använda en tabell: <thead> och <tfoot> upprepas på varje sida. Det kanske är att missbruka tabeller för layout, men det hindrar oss inte från att experimentera... §e
<table>
<thead>
<tr>
<td>sidhuvud</td>
</tr>
</thead>
<tfoot>
<tr>
<td>sidfot</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>
<h1>Lorem ipsum</h1>
<p>Lorem ipsum dolor sit amet, ....flera sidor text...</p>
</td>
</tr>
</tbody>
</table>
Nu kommer förstås frågan om man inte kan återskapa samma sak med CSS:
body { display:table; }
.header { display:table-header-group; }
.footer { display:table-footer-group; }
.article { display:table-row-group; }
<body>
<div class="header">sidhuvud</div>
<div class="footer">sidfot</div>
<div class="article">
<h1>Lorem ipsum</h1>
<p>Lorem ipsum dolor sit amet, ....flera sidor text...</p>
</div>
</body>
Se på fan! Det funkar! :D
Okej, då vet jag. Tack för svaren. :)