|
|||
Header und Footer auf jede Seite drucken
Hi Leute,
lese schon länger bei euch im Forum mit und konnte mir jetzt endlich ein Herz fassen mich anzumelden und meine Fragen auf die Community loszulassen. Ich habe folgendes Problem: Ich entwerfe gerade eine HTML Seite mit einem Header und einem Footer (*.jpg). Dazwischen natürich verschiedenster Content. Nun soll beim drucken der Seite der Header und Footer auf jeder Seite angezeigt werden. Das habe ich soweit schon mal geschafft mit: Code:
@media print [...] div.divHeader { position: fixed; top: 0; background:transparent; } Mein Problem ist nun, dass der Content, egal ob Tabelle, Text oder was auch immer von den Headern überblendet wird. Letztendlich soll es möglich sein, dass der Inhalt der Seite nur ZWISCHEN Header und Footer angezeigt wird, nicht darunter. Ich hoffe einer von euch hat hier eine Idee für mich. Wenn Ihr noch mehr Informationen brauchen solltet, gebt mir doch Bescheid. Grüße, Alfred E. Neumann |
Sponsored Links |
|
|||
Höhe eingestellt
Das hatte ich schon probiert, bzw. habs gerade noch einmal aktiviert.
Vielleicht habe ich ja auch hier einen Fehler gemacht. Soll ich es direkt beim Einfügen des Bildes definieren, etwa so: Code:
<div class="divFooter"><img src="FancyFooter.jpg" alt="Fancy Footer" height="160px" ></div> Code:
div.divFooter { height: 160px; position: fixed; bottom: 0; background:transparent; } EDIT: Ohh, ich hatte den 2. Teil überlesen... Aber wie soll das gehen, wenn ich z.B. einen sehr langen Text habe, dass das auf JEDER Seite so angewendet wird? |
|
|||
Hallo,
HTML / CSS-Seiten sind schlicht nicht dafür ausgelegt, auf jeder Seite einen Header und / oder einen Footer zu drucken. Deshalb gibt es dafür auch keine Lösung. Für solche Wünsche sind Textverarbeitungen gedacht. Eventuell bekommst du das mit JavaScript hin, da kenne ich mich aber nicht aus. Gruss MrMurphy |
|
|||
Lösung
Also Leute,
ich hab jetzt eine Lösung gefunden, welche für mich zufriedenstellend funktioniert. Habe das ganze jetzt mittels <thead>, <tbody> und <tfoot> gelöst. Aktuell hab ich noch ein paar kleinere Schwierigkeiten. Jedoch glaube ich, diese noch lösen zu können. Danke für eure Unterstützung Grüße, Alfred E. Neumann P.S.: Falls jemand auf ein ähnliches Problem stoßen sollte hier mal mein Testcode: Code:
<!DOCTYPE html> <html> <head> <title>TableLayout</title> <link href="Test.css" rel="stylesheet" type="text/css"> </head> <body> <table> <thead> <tr> <th> <div class="divHeader"><img src="HEADER.jpg" alt="fancy Header"></div> </th> </tr> </thead> <tbody> <tr> <td> <h3>Einleitung</h3> Here Some Text for You baby </td> </tr> <tr> <td> <h3>Absatz 1</h3> Lorem ipsum dolor sit amet, mit verlaub ich kotze im Strahl, das war ein Test consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. </td> </tr> <tr> <td> <h3>Absatz 2</h3> Lorem ipsum dolor sit amet, das ist kein Test consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. </td> </tr> <tr> <td> <h3>Absatz 3</h3> Lorem ipsum dolor sit amet, niemand hat vor eine Mauer zu bauen consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. </td> </tr> <tr> <td> <h3>Absatz 4</h3> Lorem ipsum dolor sit amet, P = NP. Beweis siehe Absatz 2. consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. </td> </tr> <tr> <td> <h3>Absatz 5</h3> Lorem ipsum dolor sit amet, dadel daelconsetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. </td> </tr> <tr> <td> <h3>Absatz 6</h3> Lorem ipsum dolor sit amet, das wissen wir alle consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. </td> </tr> <tr> <td> <h3>Tabelle</h3> <table> <tr> <td> Jill </td> <td> Smith </td> <td> A </td> <td> QWOP </td> <td> greatandlong value that won't fit on the page </td> <td> TADAA!! </td> </tr> <tr> <td> Jill </td> <td> Smith </td> <td> A </td> <td> QWOP </td> <td> greatandlong value that won't fit on the page </td> <td> TADAA!! </td> </tr> <tr> <td> Jill </td> <td> Smith </td> <td> A </td> <td> QWOP </td> <td> greatandlong value that won't fit on the page </td> <td> TADAA!! </td> </tr> </table> </td> </tr> </tbody> <tfoot> <tr> <td> <div class="divFooter"><img src="FOTTER.jpg" alt="fancy Footer" align="middle"></div> </td> </tr> </tfoot> </table> </body> </html> |
Stichwörter |
css, druck, footer, header, media query, print |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Endless width für Header und Footer | japanworm | CSS | 13 | 06.04.2013 16:25 |
Header & Footer relativ, Content absolut | Znerol | CSS | 7 | 28.01.2011 09:06 |
header in CSS definieren und individueles Hintergrundbild pro Seite | raba43 | CSS | 6 | 01.09.2009 12:17 |
Header - Leftmenue, Kontent 100% - footer CSS und keine Scrollbars! | Mavarik | CSS | 8 | 26.07.2008 18:11 |
validiertes CSS 2 spalten layout mit header und footer macht probleme | ASB | CSS | 4 | 31.07.2007 08:37 |