• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Bilder in Tabelle übereinanderlegen

H

Harald

Guest
hallo, ich habe folgende Problem. Ich möchte in einer Tabelle 2 Tachos haben. Ein Tacho besteht aus 2 Bildern (1. Skala und 2. Zeiger).

Sourcecode:

<table>
<tr>
<th>
<div>
<div id="img_dahinter" style="z-index:1;position:relative;visibility:visible;float:left;">
<img src="bilder/gauge.png" width="100%" height="100%">
</div>
<div id="img_davor" style="z-index:2;position:absolute;visibility:visible;float:left;">
<img id="" src="bilder/zeiger.png" width="100%" height="100%" class="image">
</div>
</div>
</th>
<th>
<div>
<div id="img_dahinter2" style="z-index:1;position:relative;visibility:visible;float:right;">
<img src="bilder/gauge.png" width="100%" height="100%">
</div>
<div id="img_davor2" style="z-index:2;position:absolute;visibility:visible;float:right;">
<img id="" src="bilder/zeiger.png" width="100%" height="100%" class="image">
</div>
</div>
</th>
</tr>
</table>

So funktiniert es schon ganz gut. Nur wenn die Tachos auf kleineren Bildschirmen (Smartphones) angezeigt werden sollen, werden die Tachos prozentuell kleiner nur die Zeiger nicht. Dies liegt daran, das die Zeiger auf absolut gesetzt sind. Wenn ich diese aber jetzt auch auf relativ sind werden diese nicht mehr über das skala Bild gelegt.

Ich habe dann:
Skala Skala

Zeiger Zeiger
 
Werbung:
Hallo,

mangels Zugriff auf die Bilder ist nur eine allgemeine Antwort möglich.

Abgesehen davon, das du die Tabelle zum Layouten mißbrauchst solltest du einen Container (z. B. figure oder div) erstellen, die Skala als Hintergrundgrafik einfügen und den Zeiger als img-Element.

Gruss

MrMurphy
 
Tabellen sind absolut ungeeignet für die Darstellung responsiver Seiten und sollten nicht zu Layoutzwecken missbraucht werden. Als Blockelement für Images verwendet man <figure> anstelle von <div>.

Wenn du nicht willst, dass die Bilder skalieren, nimm die 100% raus, und falls du das im Hintergerund liegende als background-image definierst, lässt sich auch ein position.absolute vermeiden.
 
Werbung:
Hallo, hier der Tacho und der Zeiger. Die Skalierung passt so nur soll sich der Zeiger auch mit dem Tacho skalieren.
Könnte mir jemand zeigen wies richtig geht?
 

Anhänge

  • gauge.png
    gauge.png
    43,6 KB · Aufrufe: 62
  • zeiger.png
    zeiger.png
    5,5 KB · Aufrufe: 60
Hallo,

gut dass die Bilder gleich groß sind und der Zeiger einen durchsichtigen Hintergrund hat:

Das folgende Beispiel sollte funktionieren:

Code: 
<!DOCTYPE html>
<html lang="de">
<head>
   <meta charset="utf-8">
   <title>Bilder übereinander 01</title>
   <meta name="description" content="HTML5, CSS3">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <!-- Um alte IE HTML5-tauglich zu machen -->
   <!--[if lt IE 9]>
      <script src="http://html5shiv-printshiv.googlecode.com/svn/trunk/html5shiv-printshiv.js"></script>
   <![endif]-->
   <!-- Internes CSS ("type="text/css" ist unter HTML5 nicht erforderlich) -->
   <style>
   @media all {
      /* Neue HTML5-Elemente für ältere Browser als Block-Elemente übergeben */
      header, nav, main, aside, footer, section, article, figure, figcaption, audio, video {
         display: block;
      }
      * {
         box-sizing: border-box;
      }
      html {
         font-size: 120%;
      }
      body {
         width: 50%;
         padding: 0;
         margin: 0 auto;
      }
      div {
         display: inline-block;
         background-image: url(https://www.html.de/attachments/gauge-png.4198/);
         background-size: contain;
         max-width: 100%;
         border: 1px solid silver;
      }
      img {
         display: block;
         max-width: 100%;
      }
   </style>
</head>
<body>
   <div>
      <img src="https://www.html.de/attachments/zeiger-png.4199/" alt="Zeiger">
   </div>
</body>
</html>

Gruss

MrMurphy
 
Super! Danke!
 
Zuletzt bearbeitet von einem Moderator:
Werbung:
Wenn ich jetzt die Tachos nebeneinander haben möchte und wenn es sich auf einem kleineren Bildschirm Platztechnisch nicht ausgeht -> untereinander. Wie kann ich das machen?
Außerdem wird mir am Smartphone nur ein Rechteck angezeigt in dem "Zeiger" steht.
 
Hallo,

ich habe mal eine Lösung erstellt, bei der zwei Grafiken nebeneinander dargestellt werden, bei schmalerem Fenster zunächst kleiner werden und bei noch schmalerem Fenster übereinander dargestellt werden.

Code: 
<!DOCTYPE html>
<html lang="de">
<head>
   <meta charset="utf-8">
   <title>Bilder übereinander 01</title>
   <meta name="description" content="HTML5, CSS3">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <!-- Um alte IE HTML5-tauglich zu machen -->
   <!--[if lt IE 9]>
      <script src="http://html5shiv-printshiv.googlecode.com/svn/trunk/html5shiv-printshiv.js"></script>
   <![endif]-->
   <!-- Internes CSS ("type="text/css" ist unter HTML5 nicht erforderlich) -->
   <style>
   /* Clearfix - Micro-Clearfix-Hack */
   @media all {
      section:before,
      section:after,
      .clearfix:before,
      .clearfix:after {
         content: " "; /*Leerstelle ist wichtig*/
         display: table;
      }
      section:after,
      .clearfix:after {
         clear: both;
      }
   }
   @media all {
      /* Neue HTML5-Elemente für ältere Browser als Block-Elemente übergeben */
      header, nav, main, aside, footer, section, article, figure, figcaption, audio, video {
         display: block;
      }
      * {
         box-sizing: border-box;
      }
      html {
         font-size: 120%;
      }
      body {
         padding: 0;
      }
      section {
         border: 3px solid red;
      }
      div {
         background-image: url(https://www.html.de/attachments/gauge-png.4198/);
         background-size: contain;
         background-repeat: no-repeat;
         width: 50%;
         max-width: 270px;
         float: left;
         border: 1px solid silver;
      }
      img {
         display: block;
         max-width: 100%;
      }
   }
   @media only screen and (max-width: 480px) {
      div {
      width: 100%;
      float: none;
      }
   }
   </style>
</head>
<body>
   <section>
      <div>
         <img src="https://www.html.de/attachments/zeiger-png.4199/" alt="Zeiger">
      </div>
      <div>
         <img src="https://www.html.de/attachments/zeiger-png.4199/" alt="Zeiger">
      </div>
   </section>
</body>
</html>

Außerdem wird mir am Smartphone nur ein Rechteck angezeigt in dem "Zeiger" steht.
Zum Vergrößern anklicken....

Dann werden die Bilder wahrscheinlich aus irgendeinem Grund blokiert. Das kann verschiedene Ursachen haben.

Ich habe ja die beiden Bilder hier aus dem Forum verlinkt. Die können ohne Anmeldung eventuell blockiert sein. Da ich nur Beispiele erstelle gehe ich eigentlich davon aus, dass du die Pfade zu den Bilder anpassen kannst. Ich kann ja nur mit dem arbeiten, was du zur Verfügung stellst.

Gruss

MrMurphy
 
Zuletzt bearbeitet:
Danke hat geklappt.
ich habe jetzt noch ein canvas das ich ebenflass hinzufügen möchte:
<canvas id="cvs" width="180" height="263" !style="border: 1px solid #ccc"></canvas>
Nun sollen sich die Maße des canvas, wenn das Bildschirmfenster kleiner wird proportional verkleinern (genau so wie beim Tacho).

Und 2. würde ich gerne wissen, ob man dann beim Tacho unten zwischen dem Beginn und dem Ende der Skala einen Text einfügen kann (um z.b. den Wert anzuzeigen) und wie ich den Abstand des Tachos zum Header ändern kann.
 
Zuletzt bearbeitet von einem Moderator:
Werbung:
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben