zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Header und Footer auf jede Seite drucken

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 19.12.2014, 14:36
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 19.12.2014
Beiträge: 3
Alfred E. Neumann befindet sich auf einem aufstrebenden Ast
Unglücklich 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;
	}
Footer analog hierzu.

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
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 19.12.2014, 15:20
Neuling
neuer user
 
Registriert seit: 25.11.2014
Beiträge: 18
Nitamud befindet sich auf einem aufstrebenden Ast
Standard

Weiß dem Header/Footer mal die benötigte Höhe zu

Und dem Inhalt dann ggf. noch die entsprechenden paddings.

Geändert von Nitamud (19.12.2014 um 15:23 Uhr)
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 19.12.2014, 15:30
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 19.12.2014
Beiträge: 3
Alfred E. Neumann befindet sich auf einem aufstrebenden Ast
Standard 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>
Oder in der CSS, etwa so:
Code:
div.divFooter {
	height: 160px;
        position: fixed;
        bottom: 0;
	background:transparent;
        }
Ist das so richtig?


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?
Mit Zitat antworten
  #4 (permalink)  
Alt 19.12.2014, 15:52
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 10.01.2010
Beiträge: 1.123
MrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer Mensch
Standard

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
Mit Zitat antworten
  #5 (permalink)  
Alt 19.12.2014, 20:14
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 19.12.2014
Beiträge: 3
Alfred E. Neumann befindet sich auf einem aufstrebenden Ast
Standard 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>
Mit Zitat antworten
Antwort

Stichwörter
css, druck, footer, header, media query, print

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ä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


Alle Zeitangaben in WEZ +2. Es ist jetzt 11:18 Uhr.