HTML: Wie Pixelangabe in Prozent umrechnen?

Hey, ich suche derzeit nach einer Möglichkeit wie ich eine HTML-Tabelle, die derzeit noch in Pixelwerten angelegt ist, in Prozentangaben umrechnen kann. Ich hatte dabei an so etwas gedacht: width="1320px/1920*100%"

Jedoch gibt mir das Pixelwerte aus. Gibt es eine solche Möglichkeit?

Vielen Dnak

4 Antworten

Babelfish

Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer

HTML

05.09.2015, 08:39

Du kannst dein Anliegen auch noch zum dritten mal vorbringen, die Antwort wird aber immer die gleiche sein: Vergiss dein Tabellenlayout und beschäftige dich mit Responsive Design und modernem Layout inkl. CSS und HTML5.

Wenn du dann die Grundlagen verstanden hast, kannst du es dir dann auch einfacher machen und ein bestehenden Framework wie bspw. Bootstrap nutzen.

http://getbootstrap.com/

Das bietet dir innerhalb kurzer Zeit tolle Ergebnisse und nimmt einem viel Arbeit ab.

Woher ich das weiß:Berufserfahrung – Entwickle Webseiten seit über 25 Jahren.

Aeneas63

03.09.2015, 09:57

In html Tabellen sind für "width" nur Pixel oder %-Werte erlaubt. HTML kann nicht rechnen. Wozu auch?

Empfehle Dir: http://wiki.selfhtml.org als Nachschlagewerk

Abgesehen davon macht so etwas seit Jahren niemand mehr mit Tabellen. ;)

dogser9

02.09.2015, 18:45

960 / 1920 * 100 = 50%

960 px sind dann 50%

200 / 1920 * 100 = 10.416%

200 px ca 10%

Nik98Nik

Fragesteller

02.09.2015, 18:50

Jaa, das is schon klar ^^Die Frage is nur, wie ich das in HTML dirket rechnen lassen kann

fluffiknuffi

03.09.2015, 12:39

@Nik98Nik

In HTML gar nicht aber vielleicht ist die calc-Funktion von CSS, was du suchst: https://developer.mozilla.org/de/docs/Web/CSS/calc

Sonst halt mit JavaScript.

Steffile

02.09.2015, 19:07

Geht es um die gesamte Tabelle, oder um die Spalten?

Nik98Nik

Fragesteller

02.09.2015, 19:08

Um die gesamte Tabelle. Hier ist mein HTML-Dokument: https://drive.google.com/file/d/0B7VC7esILLiUS2NWRjhvU09SZTQ/view?usp=sharing

Steffile

03.09.2015, 08:53

@Nik98Nik

Oh boy...! Ich nehme an, du willst das ganze responsiv haben?

Ich wuerde ehrlich gesagt eine Tabelle mit 100% Breite nehmen und dann mit colspan (wie du schon machst) und rowspan arbeiten.

Oder noh besser, ganz auf divs umsteigen.

Ähnliche Fragen

Tabelle HTML/CSS größer machen?

Ich wollte meine Tabelle etwas größer haben. Jetzt geht sie komplett von Links nach Rechts über den Bildschirm (width: 100%). D.h. nach Links/Rechts ist sie mir groß genug, aber nach unten müsste mir die Tabelle noch etwas größer sein. Was muss ich dafür eingeben in das format.css?

...zur Frage

Wie kann ich mit Javascript eine Zeile einer (HTML)Tabelle auslesen?

<table width="840px" height="100px" border="solid">
<tr>
<td width="270px" align="center" id="eineID">
50
</td>
<td>
<script type="text/javascript">
//auslesen der 50
</script>
</td>
</tr>
</table>

...zur Frage

Navbar in Css und Html drehen?

Ich möchte die Navigationsleiste drehen, damit sie wie auf diesem Bild aussieht. Der Titel „SafenSound“ sollte in der oberen linken Ecke sein, die „Künstler“ sollten in der oberen rechten Ecke um 90 Grad gedreht sein, die „Info“ sollte in der unteren linken Ecke um -90 Grad gedreht sein und die „Tickets“ sollten wieder normal in der unteren rechten Ecke sein. Und ich möchte auch, dass die Navigationsleiste fixiert wird, damit die Navigationsleiste beim Scrollen immer noch da ist

Derzeit sieht mein CSS so aus:

.StartseiteNav{

position:fixed;

}

.ArtistsNav{

position:fixed;

display:block;

width: 60px;

transform: rotate(90deg);

}

.InfoNav{

position:fixed;

display:block;

width: 60px;

transform: rotate(-90deg);

}

.TicketsNav{

position:fixed;

}

...zur Frage

Zahlenrad in HTML erstellen?

Hallo,

ich würd gern solche Zahlenräder wie hier:

https://www.grundschulkoenig.de/fileadmin/_processed_/6/8/csm_zahlenraeder_zr20_1_2258043463.jpg

so einfach wie möglich irgendwie in HTML erstellen, dass man die Zahlen danach noch ändern kann und das nicht einfach als komplette Grafik inklusive Zahlen woanders erstellt und dann einfügt? Die einzige Möglichkeit, die ich jetzt wüsste, wäre das Rad an sich als Grafik in den Hintergrund einer Tabelle zu legen, die davor liegt, und in der man an passender Stelle dann die Zahlen einträgt. Aber erstens ist das glaub ich eher ne amateurhafte Variante und zweitens hab ich die Befürchtung, dass sich da möglicherweise ungewollt auch viel verschieben kann.

Gibt es da irgendeine bessere Möglichkeit? Mit CSS etc. kenn ich mich leider nicht groß aus und dafür, wofür ich es brauche, ist das glaub ich auch nur bedingt verwendbar. Höchstens es hätte jemand ne ähnliche Vorlage und ich könnte mal ausprobieren, ob das dort geht.

Wäre dankbar für ne Hilfe :)

...zur Frage

Wie kann ich eine dynamische HTML-Tabelle persistent erweitern?

Hey liebe GuteFrageNet-Community,

ich bastle gerade an einer Website, in der man eine Tabelle per Knopfdruck erweitern kann. Dies funktioniert soweit auch sehr gut, aber es wird nicht gespeichert, bzw. nur im Cache bei demjenigen, der den Knopfdruck ausgeführt und etwas hineingeschrieben hat.

Gibt es eine Möglichkeit, diese Tabelle zu "speichern" und es zu übernehmen?

Und noch eine weitere kleine Frage: In der Tabelle kann man wie oben schon beschrieben, etwas hineinschreiben. Wie kann man die Schriftfarbe dynamisch ändern? Also klar, mit type="color". Aber wie genau?

Hier der HTML und Javascript-Code:

<form method='post' name='first'>
  <table id='tab' border=5 id="box">
    <colgroup>
      <col width="40%">
      <col height="50%">
    </colgroup>
    <tbody>
      <th>Datum <br> Uhrzeit</th>
      <th>Map</th>
      <th>Ergebnis</th>
      <th>Spieler</th>
    </tbody>
    <tr>
      <td>
        <input id="changetext" type='text' type="color" name='Date' placeholder='Datum/Uhrzeit'>
      </td>
      <td>
        <input id="changetext" type='text' name='Map' placeholder='Map'>
      </td>
      <td>
        <input id="changetext" type='text' name='Result' placeholder='Ergebnis'>
      </td>
      <td>
        <input id="changetext" type='text' name='Player' placeholder='Spieler'>
      </td>
    </tr>
  </table>
  <br>
  <input type='button' value='neue Zeile' onClick='clone_this()'>
  <input id="changetext" type="color">
</form>
<script>
  var input = document.getElementById("changetext");
  var text = document.getElementById("text");

  input.addEventListener('change', function () {
    text.style.color = this.value;
  });
</script>

...zur Frage

Welches Programm zum programmieren?

Hallo zusammen,
ich wollte mich mal erkundigen, welches Programm ihr zum Code schreiben verwendet.
Derzeit nutze ich nur die Spielwiesen der Programme, mit welchen ich das coden lerne. Allerdings hätte ich ganz gerne auch schon einmal ein richtigen Code-Editior, mit welchem ich dann in der Zukunft arbeiten kann.
Ich suche einen gutes Tool, zum hauptsächlichen bearbeiten von HTML, CSS & JavaScript.
Wenn das Programm zeitgleich noch die Möglichkeit bietet, Python und Java zu programmieren, wäre das umso besser.
Ich freue mich auf eure Empfehlungen und wünsche allen einen schönen Sonntag!
Mfg
Luis

...zur Frage

HTML Code funktioniert nicht Bild wir mit Platzhalter ersetzt?

<!DOCTYPE html>
<html lang="de">
 <head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>LIHI Haircuts</title>
 </head>
 <body>
  <img src="/Bilder/Salon.jpg">
 </body>
</html>

Das ist der Code bis jetzt und angezeigt wird mir nur ein Platzhalter. Ich haben einen Ordner namens "Haircut Seite" auf dem Desktop angelegt. Darin befindet sich die ".html" Datei und ein weiter Ordner Namens "Bilder", dort sind dann die Bilder die ich für die Website nutzen möchte. Die Bilder sind auch alle .jpg Dateien. Weiß jemand weiter ?

...zur Frage

eigenen HTML-Website, die auf meinem privaten Server zu Hause gehostet ist fernzugriff?

"Hallo liebe Community! Ich grüße euch herzlich. Ich arbeite derzeit an meiner eigenen HTML-Website, die auf meinem privaten Server zu Hause gehostet ist. Nun möchte ich die Möglichkeit haben, diese Website von extern aus zu bearbeiten, ohne physisch auf meinen Server zugreifen zu müssen. Welche Schritte muss ich unternehmen, um eine sichere Fernzugriffsverbindung einzurichten, damit ich meine Website von überall aus bearbeiten kann? Ich bin dankbar für ausführliche Anleitungen und Tipps, wie ich dies realisieren kann. Wenn die snicht möglich ist würde auch ein zugriff von extern auf den servcer gehen wenn möglich erklären wie es gheht. möchte den server nicht bei einen provider hosten sondern bei mir. Vielen Dank im Voraus!"

...zur Frage

Warum kann ich meinen Tabellenrahmen mit CSS nicht entfernen?

Moin,

ich habe mir in HTML eine Tabelle zurechtgebastelt und mit CSS designed. Da das Projekt recht umfangreich und unübersichtlich ist, ist es schwierig, den Code hier zu zeigen. Jedenfalls funktioniert in CSS die Funktion border-collapse sowie background-color, aber bezüglich des Rahmens funktioniert ansonsten nichts. Ich kann die Farbe, den Style und die Width nicht anpassen. Ziel ist den Rahmen zu entfernen, das funktioniert aber weder mit border-width: 0px; noch mit border: 0;.

Ich habe absolut keine Vorstellung woran es liegen kann, das CSS teilweise funktioniert. Cache habe ich immer gelöscht.
Außerdem habe ich es über table als Selektor sowie über die id mit # versucht, bei beiden ist das Ergebnis gleich,

Hat jemand eine Idee, was der Fehler sein könnte?

LG und vielen Dank

Tim

...zur Frage

HTML/CSS Tabelle Spalten in Zeilen, Zeilen in Spalten?

Hallo zusammen,

ich brauche mal eure Hilfe weil ich im Internet nicht wirklich was dazu finde. Ich habe eine Datenbank, die ich als Tabelle ausgeben möchte. Jedoch soll der Tabellenkopf als Spalte und eine Spalte als Tabellenkopf angezeigt werden. Soweit ich weiß, kann man das Array, wo der Inhalt der DB gespeichert ist, nur zeilenweise, einzeln oder als Array ausgeben lassen, aber nicht spaltenweise. Ich meine Funktionen wie:

mysqli_fetch_object($inhalt),
mysqli_fetch_field($inhalt),
mysqli_fetch_assoc($inhalt),

Gibt es irgendwie eine andere Funktion oder vielleicht mit HTML oder CSS eine Möglichkeit, dass man die Tabelle anders anzeigen lassen kann? Bsp.:

Abteilung  | Kunde | Server | IP
-----------+-------+--------+-----
Produktion | a     | 1      | 20
           | b     | 2      | 30
-----------+-------+--------+-----
Qualität   | c     | 3      | 40
-----------+-------+--------+-----
Entwicklung| d     | 4      | 50
           | e     | 5      | 60

als

Abteilung| Produktion | Qualität | Entwicklung
---------+------------+----------+------------
Kunde    | a b        | c        | d e
---------+------------+----------+------------
Server   | 1 2        | 3        | 4 5
---------+------------+----------+------------
IP       | 20 30      | 40       | 50 60

Ich hoffe das ich einigermaßen den richtigen Gedankengang habe. Falls irgendwas unklar ist einfach fragen :)

Vielen Dank für eure Hilfe!

...zur Frage

HTML-Code einer Tabelle (Internetseite) in OneNote einfügen?

Ich möchte in OneNote eine Tabelle (die ständig aktualisiert wird) von einer Internetseite einfügen. Es gibt von der Internetseite auch einen dazugehörigen HTML-Code.

Diesen HTML-Code einfach in OneNote einzufügen bringt allerdings nichts.

Ich lese unter Hilfen was von
"Geben Sie im Eingabe-HTML-Code im Teil Presentation Ihrer Anforderung

<img data-render-src="name:part-name" />

an. Dabei ist part-name der eindeutige Bezeichner des Datenteils in Ihrer mehrteiligen Anforderung, der den HTML-Code enthält.

Hilft mir irgendwie nicht weiter. Das ist Neuland für mich, ich quäle mich seit Stunden durch, ohne gewünschtes Ergebnis.

Kann hier jmd. weiterhelfen?
Um diesen HTML-Code geht es, wo könnte mein Fehler liegen?

Gruß
GelberHut

...zur Frage

CSS Image wird nicht angezeigt?

CSS:
.top-banner {
  width: 100%;
  height: auto;
  background-size: contain;
  background: url("../img/start.jpg") no-repeat;
}

HTML:
 <div class="top-banner"></div>

Das Bild soll responsive angezeigt werden. Es liegt an dem height: auto;

gebe ich zum Beispiel eine feste height von 400px, wird es wieder angezeigt, ist aber natürlich nicht responsiv.

Gibt es da eine andere Möglichkeit, ein Image anzuzeigen, welches mitskaliert?

...zur Frage

HTML Komplette Zeile einer Tabelle als Link

Hallo Community,

mal wieder habe ich ein Problem und zwar sagt die Überschrift schon alles.

Ich habe das Menü meiner Website in Tabellenform angelegt. Nun steht quasi in jeder Tabellenzeile ein Link. Das Problem ist, man muss auf den Text klicken, welcher als Link markiert ist.

Nun möchte ich aber, dass es genügt wenn man nur in die jeweilige Zeile klickt der Link geöffnet wird. Da die Tabellenzeile via CSS wie ein Button aussieht, jedoch nur der Text im "Button" angeklickt werden kann.

Ich hoffe ich konnte ungefähr beschreiben was ich möchte.

Danke schon einmal im Voraus

Mfg Eyevi

...zur Frage

HTML / CSS: Wie kann ich einen Text horizontal zentrieren?

Wie kann ich einen Text in die Mitte bringen?

So wie ich es versucht habe, funktioniert es ab einer bestimmten Größe nicht mehr! Und gibt es eine Möglichkeit sicherzustellen, dass das Bild zuvor geladen hat?

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Titel</title>
    <style>
      body {
        background-image: url("bild.png");
        background-repeat: no-repeat;
        background-attachment: fixed;
        background-position: center center;
        overflow: hidden;
      }

      h1 {
        color: white;
        font-family: Geneva, Verdana, sans-serif;
        font-size: 200px;
        text-align: center;
        /*transition: padding-top 1s,padding-bottom 1s,font-size 1s;*/
        padding-top: 38vh;       
        padding-bottom: 70vh;
      }

      h1 {
        /*animation-name: titel;
        animation-duration: 6s;
        animation-delay: 6s;
        animation-fill-mode: forwards;*/
        animation: titel 6s 6s forwards
      }

      @keyframes titel {
        from {padding-top: 38vh; padding-bottom: 70vh;font-size: 200px;}
        to {padding-top: 0px; padding-bottom: 0px;font-size: 80px;}
      }

      p {
        color: aliceblue
      }
    </style>
    <script src="script.js"></script>
  </head>
  <body>
    <h1>TITEL</h1>
    <p>Test-Text</p>
  </body>
</html>

...zur Frage

Was möchtest Du wissen?

Deine Frage stellen