Beiträge von Sailor

Das ist so schwierig nicht!
Zunächst musst du aber im HTML Formular jedem einzelnen deiner Inputs einen individuellen Namen geben, damit dieser Wert dann auf der PHP Seite auch ausgelesen werden kann!
Also statt ...

<input placeholder="Supporter-ID" type="number" tabindex="1" required autofocus>

muss da zB stehen...

<input name="supp-ID" placeholder="Supporter-ID" type="number" tabindex="1" required autofocus>

Und das sinngemäß für alle deine Inputs.

Mit dem Klicken auf den 'Submit' Button werden dann die eingegebenen Werte an die Seite gesendet, die du im öffnenden <form> Tag als 'action="..."' angegeben hast.
Bei dir steht da noch nichts drin, wenn du es befüllst denke daran, es muss eine PHP Seite sein. Also sowas wie 'action="werte_lesen.php"'.

Auf dieser Seite kannst du dann jeden einzelnen Wert auslesen... die befinden sich in dem $_POST Array und sind in diesem Array mit dem Namen, den du für die Inputs vergeben hast ansprechen.
Also diese Supporter-ID von oben, wäre jetzt in der Array-Variablen $_POST['supp-ID'] gespeichert - und so ist das mit allen Werten, die du im Formular hast. Wichtig ist der zugeteilte Name, sonst kannst du nichts damit anfangen.

Wie das dann weiter geht, hängt davon ab, wie du diese übergebenen Werte verarbeiten willst... sollen die gespeichert werden? Sollen da alle Daten, die mit diesem Formular erfragt werden in so einer Art Liste archiviert werden?
Die Ausgabe dann nur für den aktuellen Datensatz... oder für alle gespeicherten Datensätze?

Aber erst mal was zum üben für dich...

<?php  /*sagt dem Server, dass ab hier PHP Code kommt */
if(isset($_POST['supp-ID']))           /*Abfrage ob die POST Variable gesetzt ist */
   {$support_id = $_POST['supp-ID'];   /*Wenn 'JA' dann speichern des Wertes in der Variablen $support_id */
    echo $support_id;                  /*gibt den übergeben Wert auf dem Bildschirm aus */
   }
?>   /*sagt dem Server, dass der PHP Code zu Ende ist */

Ich denke, du solltest jedem Player eine eigene ID geben... zB id="player1" und id="player2".
Und dann versuchst du ein Array zu erzeugen, mit Elementen, die du im Code nicht definiert hast...
document.querySelectorAll('.js-player') sucht nach Elementen mit der Klasse class="js-player" ... und du musst, damit die Videoelemente in das Array Übernommen werden, den Elementen auch diese Klasse zuweisen.
... <video class="js-player" controls playsinline poster="poster.jpg" id="player1"> 
Aber wie gesagt.. ich stocher da ein bisschen in Dunkeln, denn dieser JS Player ist mir gänzlich unbekannt und ich kann nur auf Dinge hinweisen, die mir im Code auffallen.

Ich kenne diesen Player nicht, aber mir fallen beim Überfliegen deines Post 2 Dinge auf!
1. du nutzt die id="player" in beiden Video Tags - das ist unzulässig, ID's müssen einmalig sein und dürfen nicht mehrfach verwendet werden.
2. Du nutzt 'document.querySelectorAll('.js-player')' ... aber den verwendeten Selector '.js-player' finde ich in deinem Code nicht???

In deinem Fall liegt es daran, dass dein id="middle" mit 'float: none;' verhindert, dass sich id="right" so verhält, wie du es beabsichtigst... es wird eben erst hinter 'middle' angezeigt.
float none wirkt in diesem Fall wie 'clear: both;'

Ansonsten ist dein Layout (sorry) grottig!!!
Viel zu viele id's und vor allem viel zu viele absolute Größenvorgaben (px).
Du solltest dir den Vorschlag von basti1012 mal zu Herzen nehmen und dich mit Flexbox beschäftigen - das macht vieles einfacher.

Ja... im Code sieht es genau so aus, wie ich es vermutet habe!
Da ist ein <div id="qa"> ... </div> in dem alles andere (Text und Bild) enthalten ist.
Dieses <div> hat im CSS eine Breite von 500px vorgegeben - aber mit der ebenfalls vorhanden ID kann man das änden!
Teste bitte mal folgenden zusätzlichen CSS Code:

#qa {
width: 100%;
}

damit sollte (hoffentlich) die 500px Begrenzung um die übrigen Elemente entfernt werden und dann können sich die übrigen Elemente so verhalten, wie es in deren CSS vorgegeben ist!

Ich denke, dass du wohl auf de richtigen Weg bist, wenn es unterschiedliche Elemente sind, die separat mit CSS angesprochen werden können, dann bekommst du das bestimmt hin.
Schade, dass ich dir da nicht wirklich weiter helfen kann... aber ich kann nur HTML und CSS. Von Anki habe ich keine Ahnung :(!

Hmmm... ich vermute mal, dass das Bild, wenn du es einfügst innerhalb des <div></div> steht.. also so:

<div class="card">
   <div>
      {{Front}}
      <img src="dein_bild.jpg>
    </div>
</div>

es müsste aber so sein..

<div class="card">
   <div>
      {{Front}}
   </div>
   <img src="dein_bild.jpg>
</div>

Sonst bekommt ja das Bild wieder die Breitenvorgabe von <div> und wird auch wieder linksbündig mit dem Text eingefügt.
Kannst du das irgendwie überprüfen... Rechtsklick auf die Seite und 'Quellcode anzeigen' auswählen.
Leider habe ich von diesem 'Anki' überhaupt keine Ahnung und kann dir das nur aus der HTML / CSS Sicht erklären.

Das
<div>
margin-left:auto;
margin-right: auto;
width: 500px;
</div>
gehört definitiv nicht in das CSS. Lösche das bitte!
Die Formatierungen haben immer (zB) das Format
div {
....
}

Kannst du denn jetzt mit den Formaten auf <div> zugreifen?
Teste doch mal, ob du durch zB Änderung der Schriftfarbe (color: red;) beim div eine rote Schrift erzeugen kannst?

Das liest sich doch vielversprechend!
Versuche es doch einfach mal... setze die Formate für .card wieder auf den Ursprung zurück - also ohne 'width' und 'margin'.
Dann notierst du deinen Text zwischen den <div>... hier dein Text...</div>
Nun formatierst du dieses <div> mit...

div {
margin: 0 auto;
width: 500px;
}

Damit sollte jetzt nur dieser Textteil zentriert und mit der 500px Breite innerhalb von .card formatiert werden.
Zusätzlich jetzt noch für das Bild die Formate:

img {
display: block;
max-width: 1300px;
margin: 0 auto;
}

Und dann schauen, ob es funktioniert?

Ja - deine Beschreibung macht das Problem schon klarer und ich kann mir zusammen reimen, was da passiert.
Es sieht so aus, als hättest du mit der Festlegung der 500px Breite einen Container geschaffen, in dem alle Inhalte (Text / Bilder) eingefügt werden und die sich dann natürlich an die Begrenzungen dieses Containers halten (müssen).
Besteht mit diesem Programm, das du da nutzt, die Möglichkeit innerhalb dieses äußeren Containers (der mit der jetzigen Breite 500px) weitere Container einzufügen zB für den Text einzufügen? Und ist es dann möglich, diesen eingefügten Containern ein eigenes Format zu geben.
Wenn das so ist, dann könntest du deinem äußeren Container (.card) die gesamte Bildschirmbreite.. also 100% geben. Dem Text-Container die Formate, die jetzt .card hat und das Bild könntest du dann auch nach belieben formatieren, denn das kannst du ja mit CSS Formatierungen beeinflussen.

Hast du diese Seite irgendwo online... oder hast Zugriff auf den Quellcode der Seite, dann würde ein Link zur Seite oder der Quellcode vielleicht helfen, um das Problem näher einzugrenzen.

So ganz verstehe ich dein Problem nicht!
Wie soll das denn aussehen? Du hast einen Textblock mit einer Breite von 500px und hast diesen Textblock zentriert auf der Seite...
und nun... wo soll das Bild hin? Unter den Textblock... auch zentriert... wie groß sind die Bilder und wie groß sollen sie auf der Seite dargestellt werden?
Als ersten Versuch könntest du für die Bilder dann folgendes versuchen:

img {
  display: block;
  width: 100%;
  max-width: 1300px;
  margin: 0px auto;
}

Und wenn das Bild immer nur so breit dargestellt werden soll, wie es tatsächlich ist, dann lass die 'width: 100%;' weg.

Ich habe mal den Code etwas modifiziert und wo nötig korrigiert. Waren zu viele Einzelpunkte, um die hier einzeln aufzuführen - überwiegend fehlerhafte CSS Formatierungen.
Hier mal der überarbeitete Code... so wie ich denke, dass es passt.
HTML

<!doctype html>
<html lang="de">
<head>
   <meta charset="utf-8">
   <title>SimuUndQuex | Start</title>
   <link rel="stylesheet" href="stylesheet.css">
   <link rel="shortcut icon" href="/Bilder/server-icon.ico" type="image/x-icon">
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
   <link rel="stylesheet" href="../styles/main.css">
</head>
<body>
   <div id="menü-div">
      <nav>
         <ul>
            <li><a href="index.php"><i class="fa fa-home"></i> Start</a></li>
            <li><a href="news.php"><i class="fa fa-envelope-open-o"></i> News</a></li>
            <li><a href="clans.php"><i class="fa fa-group"></i> Clans</a></li>
            <li><a href="games.php"><i class="fa fa-gamepad"></i> Games</a></li>
             <li id="sonderbutton"><a href="bewerben.php"><i  class="fa fa-edit"></i> Bewerben</a></li>
         </ul>
      </nav>
   </div>
   <div id="content">
      <div class="seitentext">
         <div class="text">
            <h2>Kanal-Beschreibung</h2>
               <p>Herzlich Willkommen auf meinem YouTube-Kanal!
               <br>
               <br>Mein Name ist Ben und ich habe diesen Kanal,
               <br>um euch Teamspeak-Tutorials zu präsentieren oder auch
               <br>Gameplays zu zeigen.
               <br>Ich besitze ein eigenes Server-Team!
               <br>Server-Details:
               <br>
               <br>Teamspeak3: SimuUndQuex.de
               <br>
               <br>Wenn dir dieser Kanal gefällt,
               <br>kannst du ja mal ein Abo da lassen!
               <br>Ich hoffe, dass du mich länger verfolgen wirst
               <br>und Spaß auf meinem Kanal hast.
               </p>
         </div>
         <div class="div-channel-button">
             <button type="button" id="zum-kanal"  onclick="location.href='ts3server://simuundquex.de'"><i class="fa  fa-microphone"></i> Besuche mich auf YouTube!</button>
         </div>
      </div>
      <div class="seitenbild">


         <!-- Hier fehlt das Bild -->


      </div>
   </div>
<div id="content-video">
    <div class="seitentext">
        <div class="text">
           <h2>Teamspeak-Vortstellung</h2>
           <p>Hey Leute!
           <br>Ich stelle euch heute den Teamspeak von meinem/unserem Server vor!
           <br>Ich hoffe, dass ich dir mit diesem Video ein kleinen Einblick geben konnte.
           <br>
            <br>Auf unserem Teamspeak, könnt ihr für euern YouTube-Kanal  einen eigenen Channel bekommen. Wenn ihr Musik hören
           <br>wollt, müsst ihr einfach nur in unseren Musik-Channel gehen! Bei Fragen oder Problemen, kann dir unser
           <br>Support weiterhelfen, der täglich von 16-20 Uhr geöffnet ist.
           </p>
        </div>
    <div id="div-channel-button">
         <button type="button" id="zum-video"  onclick="location.href='ts3server://simuundquex.de'"><i class="fa  fa-plus-square"></i> Zum Video!</button>
    </div>
</div>
    <div class="seitenbild">
        <div id="video-div">
            <iframe id="video"  src="https://https://www.youtube-nocookie.com/embed/U_JOBqMO5Dg?rel=0"  allow="autoplay; encrypted-media" allowfullscreen></iframe>
        </div>
    </div>
</div>
</body>

und das CSS

* {
    box-sizing: border-box;
}
body {
    margin: 0;
    padding: 0;
    font-family: verdana;
    padding-bottom: 20px;
    background-image: url("../Bilder/hintergrund/hintergrund-bild-webseite.jpg");
    color: white;
}
nav{
     width: 100%;
     max-width: 1024px;
     margin: 0 auto;
     border-bottom: 3px solid #21b2a6;
     background: #2e3842;
     color: white;
}
ul a {
    display: block;
}
ul {
    width: 80%;
    margin: 0 auto;
    padding: 0;
    list-style: none;
}
ul li {
    background: #2e3842;
    display: inline-block;
}
ul li :hover {
    background: #21b2a6;
}
ul li a {
    color: #fff;
    text-decoration: none;
    display:block;
    padding:15px;
}
#sonderbutton {
    background: #2e3842;
    list-style: none;
    display: inline-block;
}
@media screen and (max-width: 705px) {
    #sonderbutton::after {
    display: none;
  }
}
#menü-div {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
}
ul li h3 {
    font-size: 16px;
    margin-right: 20px;
}
#seiten-beschreibung {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: auto;
    margin-bottom: 10px;
    border: #21b2a6 1px solid;
    width: 1044px;
    background-color: #2e3842;
    color: white;
}
.clan-liste {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1024px;
    background-color: transparent;
}
#menü-div li ul li {
    background-color:#2e3842;
}
#menü-div li ul li a {
    color:#FFFFFF;
}
#menü-div li ul li:hover {
    background-color:#232323;
}
nav ul li ul {
    display: none;
}
nav ul li:hover ul {
    display: block; position: absolute;
}
nav ul li ul li a {
    background-color:#2e3842; border-bottom: 3px solid #21b2a6;
}
nav ul li ul li a:hover {
    background-color: #21b2a6;
}
nav ul li ul li {
    position: relative;
}
nav ul li ul li ul {
    display: none;
}
nav ul li ul li:hover ul {
    display: block;position: absolute;
    left: 100%;
    top: 0;
}
#content {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 1024px;
    background-color: #2e3842;
    margin: 0 auto 12px auto;
    height: 600px;
}
#content-video {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 1024px;
    background-color: #2e3842;
    margin: 0 auto 12px auto;
    height: 450px;
    background-color: red;
}
.seitentext {
    background-color: white;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: space-between;
    width: 100%;
    max-width: 300px;
    height: 100%;
}
.seitenbild {
    background-color: #2e3842;
    text-align: center;
    vertical-align: bottom;
    width: 100%;
    height: 100%;
    background: orange;
}
.youtube {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1024px;
    background-color: #2e3842;
    margin: auto;
    margin-bottom: 20px;
    border: #000000 1px solid;
}
#zum-kanal {
    background-color: transparent;
    border: none;
    color: firebrick;
    padding: 15px 32px;
    text-decoration: none;
    font-size: 16px;
    cursor: pointer;
    border: 3px solid firebrick;
    -o-transition: color .2s ease-out, background .2s ease-in;
    -ms-transition: color .2s ease-out, background .2s ease-in;
    -moz-transition: color .2s ease-out, background .2s ease-in;
    -webkit-transition: color .2s ease-out, background .2s ease-in;
    transition:color .2s ease-out, background .2s ease-in;
    border-radius: 10px;
    margin: 4px auto;
}
#zum-kanal:hover {
    color: white;
    background-color: firebrick;
    border: 3px solid firebrick;
}
#zum-video {
    background-color: transparent;
    border: none;
    color: #21b2a6;
    padding: 15px 32px;
    text-decoration: none;
    font-size: 16px;
    cursor: pointer;
    border: 3px solid #21b2a6;
    -o-transition: color .2s ease-out, background .2s ease-in;
    -ms-transition: color .2s ease-out, background .2s ease-in;
    -moz-transition: color .2s ease-out, background .2s ease-in;
    -webkit-transition: color .2s ease-out, background .2s ease-in;
    transition:color .2s ease-out, background .2s ease-in;
    margin: 0;
    border-radius: 10px;
    margin: 4px auto;
    width: 278px;
}
#zum-video:hover {
    color: white;
    background-color: #21b2a6;
    border: 3px solid #21b2a6;
}
.div-channel-button {
    text-align: center;
    width: 100%;
    max-width: 300px;
}
.seitentext .text {
    margin-left: 8px;
    padding-right: 8px;
    color: black;
    font-size: 14px;
}
#video {
    margin: 0 auto;
    display: block;
}
#video-div {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    height: 100%;
    margin: 0 auto;
    border: 3px solid #21b2a6;
    border-radius: 10px;
    padding: 8px;
    background: yellow;
}
iframe#video {
   width: 560px;
   height: 315px;
   border: 0;
}

Vielleicht kannst du damit ja was anfangen und kommst deinen Vorstellungen zu Layout etwas näher.

Das ist nicht mehr der ursprüngliche Code, den du im Anfangspost eingefügt hast! Um dir da weiter zu helfen, bräuchten wir den aktuellen Code - oder besser einen Link zur Seite.

Das ist der selbe, fehlerhafte CSS Code, den du beim ersten mal gepostet hast.... der hilft nicht weiter.
Was du machen musst, um diesen Link zum PDF in jeder Box (mit der Höhe xy_px) an der selben Stelle (zB ganz unten) zu positionieren,
ist dass du den Code für diesen Link (Button) ganz oben als erstes in die Box schreibst und dann mit CSS diesen Button mit 'position: absolute;' aus dem Textfluss herauslöst und dann mit 'margin: xyz_px 0 0 0;' ganz nach unten verschiebst. Mit den Werten beim margin musst du etwas experimentieren damit es passt.
Bei Boxen mit einer anderen Höhe musst du natürlich die Werte entsprechend der anderen Höhe einstellen.
Was mir auch gerade auffällt, du nutzt im CSS durchgehen ID (#), um die Elemente anzusprechen. Wenn du mehrere Boxen hast, dann geht das nicht!!!!
Eine ID darf nur ein einiges mal auf der Seite genutzt werden!!!
Ersetze deine ID (id="blabla") durch Klassen (class="blabla") und im CSS das # durch einen Punkt (.).
Klassen kannst du dann beliebig oft verwenden und dann auch für unterschiedlich hohe Boxen jeweils ein andere Klasse vergeben. (.box_klein , .box_mittel , .box_gross)

In deinem Code stimmt so einiges nicht mit dem überein, was du beschreibst!

Zitat

Ich habe auf meiner Webiste einzelne Boxen erstellt, in denen unterhalb eines Bildes und 3 Textzeilen...

neee... hast du nicht! Deine Box 200px * 205px groß und da passt gerade mal das Bild rein... der ganze Rest ist außerhalb der Box.
Setze hier mal 'overflow: hidden;' dann siehst du es. Erkennt man auch leicht an der Rahmenlinie, die nur das Bild umschließt.
Die Frage nach einer festen Positionierung deines Links innerhalb dieser Box kann also gar nicht beantwortet werden... der Link ist außerhalb.
Desweiteren hast du deinen Link zum PDF fehlerhaft geschrieben. Da steht in deinem Code...
<a href="Links zum PDF Dokument"_blank">PDF Anleitung</a>
richtig wäre aber ...
<a href="Links zum PDF Dokument" target="_blank">PDF Anleitung</a>
Im CSS sind auch Fehler
zB
- size: -> gibt es nicht, wenn schon dann 'font-size'
- background-color: none; -> geht nicht, wenn schon, dann 'background-color: transparent;'
Mach das mal richtig und melde dich wieder. Beschreibe dann auch etwas näher, was du unter...

Zitat

Allerdings möchte ich den Button immer an der selben Position im unteren Bereich der Box fixieren.

verstehst und wo die Besonderheit bei

Zitat

Allerdings soll bei der zweiten Rubrik eine andere Box-Height verwendet werden.

sein soll und welches Problem da auftritt???

Dann verstehe ich deine Frage gar nicht mehr... genau das, was du schreibst, hast du doch!

sieht zwar in der Simulation möglicherweise etwas anders aus als bei dir im Original - aber das Layout sollte identisch sein.
Button und ggf Text links... rechts daneben (zentriert im div) das Video.
Hab nur zur besseren Orientierung Rahmen gesetzt... das siehst du auch, wo und wie die Elemente positioniert bzw zentriert sind.
Soll das anders sein? Dann mach doch mal eine Bild von deiner Wunschvorstellung. Gedanken lesen kann ich noch nicht.

Bitte spezifiziere deine Frage! Das Video ist zentriert in dem div id="seitenbild"
Da sich aber id="seitenbild" den Platz in der Zeile mit dem div id="div-channel-button" teilt, erscheint das Video nach rechts verrückt.
In diesem Bereich ist dein Layout mehr als unglücklich... ziehe mal das Browserfenster kleiner, dann wirst du sehen - null responsive und die Elemente überlappen!

Nebenbei: wenn du YouTube Videos einbettest, dann solltest du (nicht nur wegen der DSGVO) den 'erweiterten Datenschutzmodus' aktivieren. Lässt sich bei Youtube einstellen und ist dann im Einfügecode an der URL 'https://www.youtube-nocookie.com/embed....' zu erkennen.

Könnte man auch mit einer Definitionsliste hinbekommen.
https://wiki.selfhtml.org/wiki/HTML/Textstrukturierung/dl

Sorry, aber mit deinen Fragen und deinen (mini)Screenshots kann ich - und wahrscheinlich auch sonst niemand - etwas anfangen!
Investiere ein paar Minuten und gib uns die Informationen, die wir brauchen (Quellcode und genaue Frage) dann ist die Sache wahrscheinlich in ein paar Minuten beantwortet... oder möchtest du lieber weiter stundenlang 'rumfummeln'?

Dann teste mal das ...

#rank-icons {
  margin: 0 auto;
}