Beiträge von silver

silver · 26. August 2019

Ich hab jetzt mal noch versucht den Code im Ganzen etwas zu vereinfachen und übersichtlicher zu machen.

Ob das aus programmiertechnischer Sicht so alles astrein ist weiß ich nicht.

Irgendwie funktioniert es aber.

Vielen Dank für Eure Hilfe

Code

<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.1.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function(){
                $('#inserttext').load('Alarm.txt');            
            });
        </script>

<style>
    body            {size:'210mm'; margin-top:0.5cm; margin-bottom:0.5cm; margin-left:1.0cm; margin-right:1.0cm; font-family: Arial; }
    td              {font-family: Arial; font-size: 16pt}
    td.header       {font-family: Arial; font-size: 18pt; background: #FFFFFF; color: #000000; padding-left:15px; padding-top:10px; padding-bottom:10px;padding-right:15px; }
    td.ueberschrift {font-family: Arial; font-size: 18pt; color: #000000; font-weight: bold; background-color: #E8E8E8; padding-left:15px; padding-right:5px; padding-top:5px; padding-bottom:5px;}
    td.ueberschrift2{font-family: Arial; font-size: 16pt; color: #000000; font-weight: bold; background-color: #E8E8E8; padding-left:15px; padding-right:15px; padding-top:1px; padding-bottom:1px; border-bottom: 1px solid black;border-Top: 1px solid black;}
    td.aao          {font-family: Arial; font-size: 16pt; background: #FFFFFF; color: #000000; padding-left:15px; padding-right:5px; padding-top:5px; padding-bottom:5px;}
    td.anfahrt      {font-family: Arial; font-size: 14pt; background: #E8E8E8; color: #000000; border-right: 1px solid black; width:470}
    td.extern       {font-family: Arial; font-size: 12pt; background: #FFFFFF; color: #000000; padding-left:10px; padding-right:5px; padding-top:5px; padding-bottom:5px;}
    td.extern_list  {font-family: Arial; font-size: 14pt; background: #FFFFFF; color: #000000; padding-left:10px; padding-right:5px; padding-top:5px; padding-bottom:5px;}
            div.anfahrtsbild img {height: 670px; width: 470px; object-fit: cover; object-position: center center;}        
            div.kartenbild img         {width: 600px; height: 550px; object-fit: cover; object-position: center center;}
</style>

<! Kopfzeile>
    <table border="1" cellspacing="0" cellpadding="0" width=915px>
        <td align="right" valign="top" class="header"><img src='Logo.jpg' width="900" border="0"></td>


<! Einsatzstichwort>
    <tr height="25">
    <td valign="top">
    <table width=100% height=100% cellspacing=0>
        <td align="left" class="ueberschrift">%EINSATZSTICHWORT% - %SACHVERHALT%</td>
    <td align="right" class="ueberschrift">%DATUM%</td>
    </table>

<! Anfahrt / Alarmierung>
        <tr height="25">
    <td valign="top">
    <table width=100% height=100% cellspacing=0>
    <td align="center" class="anfahrt" rowspan="9"><div class="anfahrtsbild"><img src="routenmap.png">

        <td  class="aao" ><b>Datum:</b></td><td>%DATUM% - %UHRZEIT%</td>
        </tr>
        <td class="aao" ><b>Adresse:</b></td><td>%ADRESSE%</td>
        </tr>       
        <td  class="aao" ><b>Objekt:</b></td><td>%OBJEKT%</td>
        </tr>       
        <td  class="aao" ><b>Meldender:</b></td><td>%ZUSATZFELD2%</td>
        </tr>           
        <td  class="aao" ><b>Info ILS:</b></td><td>%ZUSATZFELD1%</td>
        </tr>
        <td class="ueberschrift2" colspan="2">Alarmierte Fahrzeuge FF Hahnbach</td>
        </tr>
        <td valign="middle" height=150 class="aao" colspan="2">
        <br>%FHZ1%<br>%FHZ2%<br>%FHZ3%<br>%FHZ4%<br>%FHZ5%<br><br>Weitere Fahrzeuge nach R&uuml;cksprache!</td>
        </tr>
        <td align="left" valign="middle" class="ueberschrift2" colspan="2">Angeforderte Ger&auml;tschaften</td>
        </tr>           
        <td height=150 class="aao"  colspan="2">%ZUSATZFELD3%</td></tr>        
    </table>


<! Ziel / Externe Kräfte>
    <tr height="25">
        <td valign=top>
    <table  width="100%" height="100%" cellspacing="0">
        <td align="center" class="anfahrt" rowspan="3"><div class="kartenbild"><img src="map.png"></td>
        <td align="right" class="ueberschrift2">Weitere Kr&auml;fte</td>        
        </tr>
        <td  align="left" valign="top" class="extern" colspan="0">
             Einheiten laut Alarmfax der ILS Amberg! Nachalarmierung ggf. nicht enthalten.
        </tr>
        <td  align="left" valign="top" height=380 class="extern_list" colspan="0">
             <div id="inserttext"></td>
     </table>


<! Fußzeile>
    <tr height="25">
    <td valign="top">
    <table  width="100%" height="100%" cellspacing="0">
    <td align="center" valign="top" class="ueberschrift2"><b>Einsatzinformationen FF Hahnbach <br> Die Alarmdepeche darf nur zum internen Dienstgebrauch verwendet werden!</b></td>
    </table>

Alles anzeigen

silver · 26. August 2019

Hallo,

leider konnte ich das beim mir im Browser nicht entsprechend ändern. Nach sämtlichen Versuchen werden die Hintergründe leider doch nicht gedruckt.

Den Passus

Code

@media print {

habe ich jetzt gelöscht. Nicht dass man mal was vergisst beim anderen zu ändern.

silver · 22. August 2019

Jetzt zeigt es mir das ganze am Bildschirm schon mal richtig an.

Allerdings wird mir das Bild nicht gedruckt. Genauso wie die vordefinierten Balken, die ich grau angelegt hatte, werden auch weiß gedruckt.

Weißt Du zufällig wo hier noch der Hase begraben sein könnte?

silver · 22. August 2019

verstehe ich das richtig, dass die CSS dann als eigenständige Datei im gleichen Ordner wie das Bild abgelegt werden muss?

silver · 22. August 2019

da ich der absolute Laie bin was das angeht komme ich da leider nicht weiter

silver · 22. August 2019

das Kartenbild wird immer fix in der gleichen Größe vom Monitor als PNG generiert (so wie angefügt)

silver · 21. August 2019

um das Problem etwas näher zu beschreiben:

ich betreibe in meiner Feuerwehr einen so genannten Alarmmonitor. Dieser verfügt über die Möglichkeit eine Alarmdepeche zu drucken. Hierzu dient eine HTML-Datei als Basis (ist vom Entwickler so vorgegeben).

Ich habe auf meine laienhafte Art und Weise versucht das für uns anzupassen.

So soll (siehe Anhang) z.B. die Anfahrt in einem Feld der Tabelle eingefügt werden.

Das hierzu verwendete Bild ist auch im Format leider so vorgegeben. Wie Sempervivum richtig interpretiert hat, möchte ich dass das Bild in der Höhe die Zelle voll ausfüllt und ich würde akzeptieren, dass hierzu links und rechts was abgeschnitten wird.

Ich füge euch den HTML-Code und das Bild mal ein, vielleicht ist es dann verständlicher.

HTML

<html>
<head>

        <title>Text-Datei in HTML</title>
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.1.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function(){
                $('#inserttext').load('Alarm.txt');            
            });
        </script>

  <style>
  @media screen {
    body            {size:'210mm'; margin-top:0.5cm; margin-bottom:0.5cm; margin-left:1.0cm; margin-right:1.0cm; font-family: Arial; }
    h3              {font-size: 1pt; page-break-after:always;}
    td              {font-family: Arial; font-size: 16pt}
    td.header       {font-family: Arial; font-size: 18pt; background: #FFFFFF; color: #000000; padding-left:15px; padding-top:10px; padding-bottom:10px;padding-right:15px; }
    #fw_name        {font-size: 16pt; font-weight: bold; font-style: italic; }
    #topic          {font-size: 18pt; font-weight: bold; }
    td.white_normal {font-family: Arial; font-size: 18pt; background: #FFFFFF; color: #000000;}
    td.stichwort    {font-family: Arial; font-size: 18pt; color: #000000; font-weight: bold; vertical-align: top; background-color: #E8E8E8; padding-left:15px; padding-right:5px; padding-top:10px; padding-bottom:10px;}
    td.daten        {font-family: Arial; font-size: 16pt; background: #FFFFFF; color: #000000; padding-left:15px; padding-right:5px; padding-top:5px; padding-bottom:5px;}
    td.aao          {font-family: Arial; font-size: 16pt; background: #FFFFFF; color: #000000; padding-left:15px; padding-right:5px; padding-top:5px; padding-bottom:5px;}
    td.aao2         {font-family: Arial; font-size: 18pt; color: #000000; font-weight: bold; background-color: #E8E8E8; padding-left:15px; padding-right:5px; padding-top:10px; padding-bottom:10px; border-bottom: 1px solid black;border-Top: 1px solid black;}    
    td.aao3         {font-family: Arial; font-size: 18pt; color: #000000; font-weight: bold; background-color: #E8E8E8; padding-left:15px; padding-right:5px; padding-top:10px; padding-bottom:10px; border-bottom: 1px solid black;}
    td.karte        {font-family: Arial; font-size: 16pt; background: #E8E8E8; color: #000000; padding-left:5px; padding-right:0px; padding-top:5px; padding-bottom:5px;}
    td.anfahrt      {font-family: Arial; font-size: 14pt; background: #E8E8E8; color: #000000; border-right: 1px solid black;}
    td.zusatzfeld   {font-family: Arial; font-size: 16pt; background: #FFFFFF; color: #000000; padding-left:15px; padding-right:5px; padding-top:5px; padding-bottom:5px;}
    td.alarmzeit    {font-family: Arial; font-size: 12pt; background: #FFFFFF; color: #000000; padding-left:15px; padding-right:5px; padding-top:5px; padding-bottom:5px;}
    td.programminfo {font-family: Arial; font-size: 16pt; background: #FFFFFF; color: #AAAAAA; padding-left:15px; padding-right:5px; padding-top:5px; padding-bottom:5px;}
    td.fax          {font-family: Arial; font-size: 16pt; background: #FFFFFF;}
    td.extern       {font-family: Arial; font-size: 12pt; background: #FFFFFF; color: #000000; padding-left:10px; padding-right:5px; padding-top:5px; padding-bottom:5px;}
    td.extern_list  {font-family: Arial; font-size: 14pt; background: #FFFFFF; color: #000000; padding-left:10px; padding-right:5px; padding-top:5px; padding-bottom:5px;}
    div.faxbild     {width: 915px; height: 1170px; overflow: hidden;}
    div.anfahrtsbild {width: 470px; height: 650px; overflow: hidden;}
    div.kartebild   {width: 600px; height: 550px; overflow: hidden;}
  }
 @media print {
    body            {size:'210mm'; margin-top:0.5cm; margin-bottom:0.5cm; margin-left:1.0cm; margin-right:1.0cm; font-family: Arial; }
    h3              {font-size: 1pt; page-break-after:always;}
    td              {font-family: Arial; font-size: 16pt}
    td.header       {font-family: Arial; font-size: 18pt; background: #FFFFFF; color: #000000; padding-left:15px; padding-top:10px; padding-bottom:10px;padding-right:15px; }
    #fw_name        {font-size: 16pt; font-weight: bold; font-style: italic; }
    #topic          {font-size: 18pt; font-weight: bold; }
    td.white_normal {font-family: Arial; font-size: 18pt; background: #FFFFFF; color: #000000;}
    td.stichwort    {font-family: Arial; font-size: 18pt; color: #000000; font-weight: bold; vertical-align: top; background-color: #E8E8E8; padding-left:15px; padding-right:5px; padding-top:10px; padding-bottom:10px;}
    td.daten        {font-family: Arial; font-size: 16pt; background: #FFFFFF; color: #000000; padding-left:15px; padding-right:5px; padding-top:5px; padding-bottom:5px;}
    td.aao          {font-family: Arial; font-size: 16pt; background: #FFFFFF; color: #000000; padding-left:15px; padding-right:5px; padding-top:5px; padding-bottom:5px;}
    td.aao2         {font-family: Arial; font-size: 18pt; color: #000000; font-weight: bold; background-color: #E8E8E8; padding-left:15px; padding-right:5px; padding-top:10px; padding-bottom:10px; border-bottom: 1px solid black;border-Top: 1px solid black;}
    td.aao3         {font-family: Arial; font-size: 18pt; color: #000000; font-weight: bold; background-color: #E8E8E8; padding-left:15px; padding-right:5px; padding-top:10px; padding-bottom:10px; border-bottom: 1px solid black;}
    td.karte        {font-family: Arial; font-size: 14pt; background: #E8E8E8; color: #000000; padding-left:5px; padding-right:px; padding-top:5px; padding-bottom:5px;}
    td.anfahrt      {font-family: Arial; font-size: 14pt; background: #E8E8E8; color: #000000; border-right: 1px solid black;}
    td.zusatzfeld   {font-family: Arial; font-size: 16pt; background: #FFFFFF; color: #000000; padding-left:15px; padding-right:5px; padding-top:5px; padding-bottom:5px;}
    td.alarmzeit    {font-family: Arial; font-size: 12pt; background: #FFFFFF; color: #000000; padding-left:15px; padding-right:5px; padding-top:5px; padding-bottom:5px;}
    td.programminfo {font-family: Arial; font-size: 16pt; background: #FFFFFF; color: #AAAAAA; padding-left:15px; padding-right:5px; padding-top:5px; padding-bottom:5px;}
    td.fax          {font-family: Arial; font-size: 16pt; background: #FFFFFF;}
    td.extern       {font-family: Arial; font-size: 12pt; background: #FFFFFF; color: #000000; padding-left:10px; padding-right:5px; padding-top:5px; padding-bottom:5px;}
    td.extern_list  {font-family: Arial; font-size: 14pt; background: #FFFFFF; color: #000000; padding-left:10px; padding-right:5px; padding-top:5px; padding-bottom:5px;}
    div.faxbild     {width: 913px; height: 1170px; overflow: hidden;}
    div.anfahrtsbild {width: 470px; height: 650px; overflow: hidden;}
    div.kartebild   {width: 600px; height: 550px; overflow: hidden;}
  }
  </style>
</head>
<body>

<table border="1" cellspacing="0" cellpadding="0" width="915px">
   <tr height=50>
    <td valign="top">
      <table  width="100%" height="100%" cellspacing="0">

<tr height="25">
    <td valign="top">
      <table  width=100% height=100% cellspacing=0>
        <tr>
           <td align="left" class="stichwort">%EINSATZSTICHWORT% - %SACHVERHALT%</td>
           <td align="right" class="stichwort">%DATUM%</td>
        </tr>
      </table>
    </td>
  </tr>
  <tr>
    <td valign=top>
      <table  width="100%" height="100%" cellspacing="0">
        <tr height="25">
              <td align="center" class="anfahrt" rowspan="12"><div class="anfahrtsbild"><img src='routenmap.png' height=100%></div></td>





          </tr>
          <tr>
        <td  align="left" valign="top" class="aao" ><b>Datum:</b></td><td>%DATUM% - %UHRZEIT%</td>
          </tr>
          <tr>
        <td  align="left" valign="top" class="aao" ><b>Adresse:</b></td><td>%ADRESSE%</td>
          </tr>
          <tr>           
        <td  align="left" valign="top" class="aao" ><b>Objekt:</b></td><td>%OBJEKT%</td>
          </tr>
          <tr>           
        <td  align="left" valign="top" class="aao" ><b>Meldender:</b></td><td>%ZUSATZFELD2%</td>
          </tr>
          <tr>           
        <td  align="left" valign="top" class="aao" ><b>Info ILS:</b></td><td>%ZUSATZFELD1%</td>
          </tr>
          <tr>
           <td width="100"> <br></td>
          </tr>
        <tr>

           <td align="left" valign="middle" class="aao2" colspan="2">Alarmierte Fahrzeuge FF Hahnbach</td>
          </tr>
          <tr>
            <td  align="left" valign="top" class="aao" colspan="2">
             <br>%FHZ1%<br>%FHZ2%<br>%FHZ3%<br>%FHZ4%<br>%FHZ5%<br><br>Weitere Fahrzeuge nach R&uuml;cksprache mit dem Einsatzleiter!<br><br>%ZUSATZFELD3%</td>
        </tr>
      </table>

 
    </td>
  </tr>
  <tr height="25">
    <td valign="top">
      <table  width="100%" height="100%" cellspacing="0">
        <tr>
          <td align="center" valign="top" class="alarmzeit"><b>Einsatzinformationen FF Hahnbach - Die Alarmdepeche darf nur zum internen Dienstgebrauch verwendet werden!</b></td>
        </tr>

Alles anzeigen

silver · 21. August 2019

Hallo,

ich bin ziemlich unerfahren, was HMTL angeht, aber ich versuche gerade in einer Tabelle ein Bild einzufügen.

Das funktioniert mit folgendem Code auch einwandfrei.

Code

<td align="center" class="anfahrt" rowspan="12"><div class="anfahrtsbild"><img src='routenmap.png' height=100%></div></td>

Auch dass es in der Höhe an die vorgegebene Tabellen höhe angepasst wird klappt.

Da jedoch die Tabelle schmäler ist, als das "vergrößerte" Bild hätte ich gerne, dass das Bild mittig "gezoomt" wird.

Kann mir hier jemand helfen?

All meine Recherchen verliefen leider im Sande, weil es meist nur um die Anordnung des Bildes in der Tabelle geht, was ich mit align="center" ja bereits mittig habe, das hat aber nichts damit zu tun wie das Bild abgeschnitten wird.

Viele Grüße und schon jetzt vielen Dank

Beiträge von silver

Bild in Tabelle mittig vergrößern

Bild in Tabelle mittig vergrößern

Bild in Tabelle mittig vergrößern

Bild in Tabelle mittig vergrößern

Bild in Tabelle mittig vergrößern

Bild in Tabelle mittig vergrößern

Bild in Tabelle mittig vergrößern

Bild in Tabelle mittig vergrößern