HTML5 – die besten Beiträge

Wie bekomme ich es hin, das die Kästen beim verkleinern des Fensters über die gesamte Länge geht?

Ich habe bisher das:

und verkleinert sieht es so aus:

Aussehen soll es aber so:

Hier mein Code:

<!DOCTYPE html>
<html>
   <head>
      <title></title>
      <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
      <style>
         header {
         text-align: center;
         font-size: 3em;
         padding: 5px;
         color: #fff;
         background-color: #FFBF00;
         }
         .wrapper { display:flex }
         @media screen and (max-width:620px) {
         .wrapper {display:block }
         }
         nav {
         width:15%;
         text-align: center;
         font-size: 2em;
         padding-right: 60px;
         color: #fff;
         background-color: #819FF7;
         margin-right: 10px;
         margin-bottom: 150px;
         }
         a {color: #fff }
         li {list-style: none }
         article {
         width:70%;
         color: #BDBDBD;
         }
         aside {
         color: #fff;
         width: 15%
         text-align: center;
         font-size: 1em;
         padding: 10px;
         padding-right: 60px;
         background-color: #01DFD7;
         margin-bottom: 150px;
         }
         footer {
         text-align: center;
         font-size: 1em;
         padding: 10px;
         padding-right: 60px;
         background-color: #D8D8D8;
         color: #A4A4A4;
         }
      </style>
   </head>
   <body>
      <header><h2>Header</h2></header>
      <div class="wrapper">
           <nav>
            <ul>
               <li><a href="" target="_blank">Link 1</a></li>
               <li><a href="" target="_blank">Link 2</a></li>
               <li><a href="" target="_blank">Link 3</a></li>
               <li><a href="" target="_blank">Link 4</a></li>
            </ul>
         </nav>
         <article>
            <h3>Lorem Ipsum</h3>
               <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr,
               sed diam nonumy eirmod tempor invidunt ut labore et dolore
               magna aliquyam erat, sed diam voluptua. At vero eos et
               accusam et justo duo dolores et ea rebum. Stet clita kasd
               gubergren, no sea takimata sanctus est Lorem ipsum dolor sit
               amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr,
               sed diam nonumy eirmod tempor invidunt ut labore et dolore
            magna aliquyam.</p>
         </article>
         <aside>
            <h2>About</h2>
            <p>Lorem ipsum dolor<br>
               sit ametr,<br>
               consecteteuer<br>
               adipiscing elit.
            </p>
         </aside>
      </div>
      <footer>
         <p>&copy; </p>
      </footer>
   </body>
</html>
Bild zum Beitrag
HTML, CSS, HTML5

TikTok Upload-Bot Programmieren schlägt Fehl?

Ich arbeite aktuell an einem Upload-Bot für TikTok Studio (https://www.tiktok.com/tiktokstudio/upload), um mehrere Videos automatisiert über Selenium hochzuladen. Der Bot ist bereits sehr weit entwickelt und funktioniert in fast allen Punkten – jedoch scheitert er beim finalen Klick auf den „Beitrag“-Button, obwohl dieser optisch aktiv und rot sichtbar ist.

Was bisher funktioniert:

  • Login erfolgt automatisch via gespeicherten Cookies (cookies.pkl)
  • Upload-Seite wird geöffnet, Upload-Bereich korrekt erkannt
  • MP4-Dateien werden nacheinander per <input type="file"> hochgeladen
  • Ladebalken verschwindet nach Verarbeitung → TikTok signalisiert, dass das Video bereit zum Posten ist

Das Problem:

Sobald der Upload abgeschlossen ist, wird der “Beitrag”-Button sichtbar und optisch aktiv (rot).

Doch Selenium kann ihn nicht klicken. Es erscheint ein Fehler wie:❌ Beitrag-Button konnte nicht geklickt werden: Message:

Stacktrace:

...

ElementNotInteractableException

Ich habe bereits versucht:

• element_to_be_clickable

• Scrollen mit scrollIntoView

• JS-Fallback via driver.execute_script("arguments[0].click()", button)

• Warten auf is_enabled(), is_displayed() usw.

Der Button bleibt im DOM vorhanden, sieht aktiv aus, aber scheint durch etwas blockiert oder noch nicht wirklich „klickbar“ für Selenium.

Hypothesen:

• Ein unsichtbares Overlay blockiert den Button

• Der „sichtbare“ Button ist nur Fake, und der echte kommt später

• TikTok braucht intern noch einen Validierungsprozess, der nicht abgeschlossen ist

Ziel:

Ich suche nach einer verlässlichen Möglichkeit, diesen Button zu klicken oder vorher sicherzustellen, dass wirklich alle Bedingungen erfüllt sind. Auch ein kompletter Workaround (z. B. JS-only-Lösung oder Puppeteer) wäre in Ordnung.

try:
  # Beitrag-Button suchen
  post_button = wait.until(EC.presence_of_element_located((By.XPATH, '//button[contains(text(),"Beitrag")]')))
  # Scrollen zum Button (sichtbar machen)
  driver.execute_script("arguments[0].scrollIntoView(true);", post_button)
  time.sleep(1)
  if post_button.is_enabled():
    try:
      post_button.click()
      print("✅ Normal geklickt")
    except Exception:
      # Fallback mit JavaScript
      driver.execute_script("arguments[0].click();", post_button)
      print("✅ JS-Klick erfolgreich")
  else:
    print("❌ Button gefunden, aber nicht aktiv!")
except Exception as e:
  print("❌ Beitrag-Button konnte NICHT geklickt werden:", e)

Fragen an die Community:

  • Kennt jemand dieses Problem speziell bei TikTok Studio Uploads?
  • Gibt es einen bewährten Selenium-Trick, mit dem man TikTok-Uploads sicher abschließen kann?
  • Gibt es evtl. ein verstecktes Element, das vorher geschlossen werden muss?
  • Wäre Puppeteer (Headless Chrome via NodeJS) hier zuverlässiger?
Homepage, App, HTML, Webseite, CSS, JavaScript, HTML5, Code, Programmiersprache, Python, Webentwicklung, Selenium

Meistgelesene Beiträge zum Thema HTML5