zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden css 3 -Formatierung/Ausrcihtungsproblem

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 16.11.2014, 17:24
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 16.11.2014
Beiträge: 2
pingpong befindet sich auf einem aufstrebenden Ast
Standard css 3 -Formatierung/Ausrcihtungsproblem

Hallo Forum,

ich versuche nun schon länger eine Seite (später a4 für pdf gen) zu erstellen.
Aber irgendwie zickt das css rum.
Was ich möchte ist eine saubere Ausrichtung der Elemente. Aber irgendwie ist das Ganze immer verschoben.
Entweder ist css3 (zb width in mm) noch nicht ganz ausgeeift oder das sind die Fehler zwischen Screen und Pdf?
w3 findet keine Fehler.
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=windows-1250">
  <meta name="generator" content="PSPad editor, www.pspad.com">
  <title></title>
	<style type="text/css">
	h1,h2,h3,h4,h5
	{
	margin:4px 4px 4px 4px;
	color:blue;
	}
	table.kopfzeile1,table.wochentage
	{
	  border-collapse: separate;
	  	border-spacing:4mm 0mm;
	  	width:277mm;
	}
 	td.wochenzettel
	{
			width:90mm;

			text-align:center;
	}  
		td.wochenzettelx
	{
		width:90mm;

			text-align:left;
	}  
		td.wochenzettely
	{
		width:85mm;

			text-align:right;
	}  
		td.inhalt_kopfzeile1_kw
	{
	width:30mm;
	font-weight:bold;
	text-align:left;
	height:65px;
	outline:1px solid black;
  }
		td.inhalt_kopfzeile2_tag
	{
	width:30mm;
	font-weight:bold;
	text-align:left;
	height:35px;
	outline:1px solid black;
}
	td.inhalt_tag
	{
	width:30mm;
	font-weight:bold;
	text-align:left;
	height:35px;
	outline:1px solid black;

	
	}
	td.inhalt_kopfzeile1_datum
	{
	outline:1px solid black;
	width:74mm;
	font-weight:bold;
	text-align:left;
	min-height:65px;
	} 
		td.inhalt_kopfzeile1_ma
	{
	outline:1px solid black;
  width:75mm;
	font-weight:bold;
	text-align:left;
	height:65px;
	} 
		td.inhalt_kopfzeile1_bemerkungen
	{
		outline:1px solid black;
	font-weight:bold;
	text-align:left;
	min-height:65px;
  width:94mm;
	} 
		td.inhalt_kopfzeile2_zeit
	{
	outline:1px solid black;
 	width:25mm;
	font-weight:bold;
	text-align:left;
	min-height:35px;
	} 
		td.inhalt_kopfzeile2_kunde
	{
	outline:1px solid black;
	width:41mm;
	font-weight:bold;
	text-align:left;
	min-height:35px;
	}
	td.inhalt_zeit
	{
	width:8mm;
	text-align:left;
	min-height:25px;
  outline:1px solid green;
	}  
	td.inhalt_zeitkaestchen
	{
	width:13mm;
	outline:1px solid black;
	text-align:left;
	min-height:25px;
	}  
		td.inhalt_kopfzeile2_gemacht
	{
	outline:1px solid black;
 	width:75mm;
	font-weight:bold;
	text-align:left;
	min-height:35px;
	} 
		td.inhalt_kopfzeile2_material
	{
	outline:1px solid black;
	width:33mm;
	font-weight:bold;
	text-align:left;
	min-height:33px;
	} 
		td.inhalt_kopfzeile2_autogramm
	{
		outline:1px solid black;
	font-weight:bold;
	text-align:left;
	min-height:53mm;
  width:53mm;
	} 
	img.kopfbild
	{
	width:2cm;                                                                       	border:0px;
		}
		td.linie_gemacht
		{
		width:75mm;
			background:url(images/linie.png);
		background-repeat: repeat-x;
		background-position: center  bottom;                                       
		}
			td.linie_material
		{
		width:33mm;
		background:url(images/linie.png);
		background-repeat: repeat-x;
		background-position: center  bottom;                                        
    }
			td.linie_kunde
		{
		width:41mm;
		background:url(images/linie.png);                                          
		background-repeat: repeat-x;
		background-position: center  bottom;
		}
			td.linie_autogramm
		{
		width:53mm;
			background:url(images/linie.png);
		background-repeat: repeat-x;
		background-position: center  bottom;
		}
			</style>
  </head>
  <body style="background-color:red";><?php  $tnextmonday = strtotime("next Monday");
$kw=date('W',$tnextmonday);
$ma="Herr Oliver Eikel <br/>(Informatikkaufmann";
$wochentage=array("Montag","Dienstag","Mittwoch","Donnersttag","Freitag","Samstag","Sonntag");
  
  $plussieben=date("d",$tnextmonday)+6;
//   echo "Woche vom ".date("d.m.Y", $tnextmonday)." - ".date($plussieben.".m.Y", $tnextmonday)." - Woche:".$kw;
  ?>
  
 <center>
 <table class="obersteZeile">
 <tr>
		<td class="wochenzettelx"><h1>Wochenzettel</h1></td>
		<td class="wochenzettel"><img src="images/qr_code_eikel.jpg" class="kopfbild"/></td>
		<td class="wochenzettely"><img src="images/logo.jpg" class="kopfbild"/>
	</table>
	</center>
<center>
<table class='kopfzeile1'>
<tr>
<td class='inhalt_kopfzeile1_kw'>Kw: <?php echo $kw;?></td>
<td class='inhalt_kopfzeile1_datum'><?php echo date('d.m.Y', $tnextmonday);?> - <?php echo date($plussieben.'.m.Y', $tnextmonday);?></td>
<td class='inhalt_kopfzeile1_ma'>Mitarbeiter: <?php echo $ma;?></td>
<td class='inhalt_kopfzeile1_bemerkungen'>Bemerkungen</td>
</tr>
</table>
</center>
	<br/>
	<center>
	<table class='kopfzeile1'>
	<tr>
	<td class='inhalt_kopfzeile2_tag'>Tag</td>
	<td class='inhalt_kopfzeile2_zeit'>Zeit</td>
	<td class='inhalt_kopfzeile2_kunde'>Kunde</td>
	<td class='inhalt_kopfzeile2_gemacht'>ausgef&uuml;hrte Arbeiten</td>
	<td class='inhalt_kopfzeile2_material'>Material</td>
	<td class='inhalt_kopfzeile2_autogramm'>Unterschrift Kunde</td>
	</tr>
	</table>
	</center>
	<br/>
	<center>
	<div class="wochentage">
	<table class='wochentage'>
	<tr>
	<td class='inhalt_tag' rowspan='3'>Montag</td>
	<td class='inhalt_zeit'>von</td>
	<td class='inhalt_zeitkaestchen'></td>
	<td class='linie_kunde'></td>
	<td class='linie_gemacht'></td>
			<td class='linie_material'></td>
				<td>&nbsp;</td>
	</tr>
		<tr>
			<td class="inhalt_zeit">bis</td>
			<td class='inhalt_zeitkaestchen'></td>
			<td class='linie_kunde'></td>
			<td class='linie_gemacht'></td>
			<td class='linie_material'></td>
				<td>&nbsp;</td>
		</tr>
		<tr>
			<td class="inhalt_zeit">Std.</td>
				<td class='inhalt_zeitkaestchen'></td>
				<td class='linie_kunde'></td>
			<td class='linie_gemacht'></td>
			<td class='linie_material'></td>
				<td class='linie_autogramm'></td>
		</tr>
		</table>
	</div>
	</center>
</body>
</html>
Das rote ist nur für die bessere Kontrastlesbarkeit und soll natürlich später wieder raus. Aber irgendwie komen da irgendwo noch einige ungewollte spaces rein.
Outline statt border habe ich wegen dem verschieben genommen. Border verschiebt ja und outline malt drauf.
Any idea?
Danke für Ansätze
Gruß
pingpong
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 17.11.2014, 07:10
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,

das Grundproblem ist, das du zwei vollkommen unterschiedliche Medien verwurschteln willst. Da kann nix Gescheites rauskommen.

Zitat:
ch versuche nun schon länger eine Seite (später a4 für pdf gen) zu erstellen.
Wenn du Informationen bereit stellen willst muss du dir vorher überlegen, ob dies als PDF oder HTML (oder mit Textverarbeitung oder mittels Tabellenkalkulation oder ...) geschehen soll und mit den dann vorhandenen Möglichkeiten arbeiten.

Das eine als Grundlage für das andere zu nehmen funktioniert nur teilweise und zudem unbefriedigend.

HTML ist grundsätzlich gar nicht dafür gedacht, auf materiellen Medien, die größenmäßig bestimmt sind, wie Papier oder Pappe ausgegeben zu werden. Die Informationsübermittlung steht im Vordergrund.

Druckausgaben sind eher zweitrangig und werden entsprechend stiefmütterlich behandelt. Für Druckausgaben wird deshalb in der Regel ein zusätzliches Layout erstellt. Wobei es im Gegensatz zur PDF-Erstellung oder Textverarbeitung dabei nur relativ wenige Eingriffsmöglichkeiten gibt.

Um PDF-Dateien zu erzeugen sind Textverarbeitungen allemal eher geeignet als HTML-Dateien.

Zitat:
Was ich möchte ist eine saubere Ausrichtung der Elemente.
So wie du das meinst ist HTML überhaupt nicht geeignet und gedacht. Das soll sich schließlich den unterschiedlichsten Ausgabegeräten anpassen. Wobei die Ausgabe nicht mal sichtbar erfolgen muss.

Gruss

MrMurphy
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 17.11.2014, 09:27
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 16.11.2014
Beiträge: 2
pingpong befindet sich auf einem aufstrebenden Ast
Standard

Hallo,
danke für dei schnelle Antwort. Kennst Du dompdf? Das macht genau das. pdf generieren aus html und css.

Aber das ist ein anderes Thema und gehört hier nicht hin.
vergess einfach das pdf.

Eine simple html-Ausgabe und diese sauber ausgerichtet. Das ist das Ziel.
Irgednwo muss ein Bock drinne sein. Weil die Zellen sind gleich groß,meine ich.
Gruß
pingpong
Mit Zitat antworten
Antwort

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
Redesign für Steiner Cycling Team pkipper Site- und Layoutcheck 11 09.02.2011 13:25
Einbindung von frei erhältlichen Scripten - CSS Problem DonL CSS 1 22.01.2011 17:09
MYspace mehr als nur CSS oder ? Vinceone CSS 0 12.07.2007 03:21
Eric Meyer's CSS Petty Ressourcen 0 21.11.2005 09:18
Mozilla ignoriert externes css DarkWanderer CSS 9 22.09.2005 12:39


Alle Zeitangaben in WEZ +2. Es ist jetzt 07:01 Uhr.