Hallo, ich programmiere meine erste Website, ich habe die kleinen Bilder so programmiert, dass sie wenn die Maus drüberfährt umrandet sind mit dem a hover Effekt, jedoch ruckelt während des Überfahrens mit der Maus der Text und der Button unter den Bildern. Ich weiß nicht wie ich dieses Problem lösen kann, bitte um Hilfe.

Hier der CSS Code:

.item-1 {
 display: flex;
 flex-direction:column;
 align-items: center;
 }
.button-container {
 display: flex;
 flex-direction: column;
 align-items: center;
 text-align: center;
 margin-top:20px;
}
.ButtonÜ {
 margin-left: 0.8em;
}
.Button-selbst {
 border-radius: 2em;
 margin-left: 7em;
}
Hier der HTML-Code:<div class="grid-container">
              <div class="item-1">
              <div id="large-image-container">
              <img id="large-image" src="Hauptfoto.jpg" alt="Produkt Bild">
              <video id="large-video" src="Produktvideo.mp4" controls style="display: none;"></video>
             </div>
              <p class="hover-text">Mit der Maus über die Bilder fahren, um sie groß zu sehen</p>
             <div class="small-images">
              <img src="Hauptfoto.jpg" alt="Produkt Bild" height="70px" class="small-image">
              <img src="puppy.jpg" alt="Produkt Bild" height="70px"class="small-image" >
              <img src="Firmenlogo.png" alt="Produkt Bild" height="70px"class="small-image" >
              <img src="Tüte1.jpg" alt="Produkt Bild" height="70px"class="small-image" >
              <img src="Tüten.jpg" alt="Produkt Bild" height="70px" class="small-image">
              <video src="Produktvideo.mp4" alt="Produkt Video" height="70px" class="small-image"></video>
             </div>
            
             <div class="button-container">
             <h2 Class="ButtonÜ">Hier gehts zum Amazonprodukt</h2>
             <h4><a class="buy-button" href="https://www.amazon.de/AiTodos%C2%AE-Hundekotbeutel-Geeignet-Verlassen-Kotbeutel/dp/B0C153LN1L/ref=sr_1_8?__mk_de_DE=%C3%85M%C3%85%C5%BD%C3%95%C3%91&crid=16F3QGBL4K2TF&dib=eyJ2IjoiMSJ9.5IWYhobR83DaKJkAF98YKWdjFMJz1u7CSAybZXDsQ3jM_KUOG13eRqRGNjKu_icSSkzCSzAfBvCaVhH_xlFH4pUT-T7dVIaa6IUiK3QI8LEDOlYE3nd63oJNom1ZK0XAGKw53AcpQovRP_1gzyx0lUGqNxCwJBcY5AYJOEwARh3eT7vq00xNM-KIi4bt3ixJa9Ro2XFpqI72Xwkk1aVJr9nzx1q070IOkDHOvtvDmgMfRIAZCsGAyBlACtNTiDvkkTew9MLsGody8UVr9jgDnu6cRyBMeMTCNTf1m2R6AsA.XoeHjec2lkbKpme1mvzhPnDK58dfYBB4I2gJpY3qotM&dib_tag=se&keywords=Hundekotbeutel&qid=1728390057&sprefix=hundekotbeutel%2Caps%2C345&sr=8-8&th=1" target="_blank">Produkt kaufen</a></h4>
            </div>
           </div>
document.addEventListener('DOMContentLoaded', function() {
  const largeImage = document.getElementById('large-image');
  const largeVideo = document.getElementById('large-video');
  const smallImages = document.querySelectorAll('.small-image');


  // Set the initial large image to the first small image
  if (smallImages.length > 0) {
    largeImage.src = smallImages[0].src;
  }


  smallImages.forEach(function(img) {
    img.addEventListener('mouseover', function() {
      if (img.tagName === 'IMG') {
        largeImage.style.display = 'block';
        largeVideo.style.display = 'none';
        largeImage.src = img.src;
      } else if (img.tagName === 'VIDEO') {
        largeImage.style.display = 'none';
        largeVideo.style.display = 'block';
        largeVideo.src = img.src;
      }
    });
  });


  const scrollableText = document.getElementById('scrollable-text');
  const item2 = document.querySelector('.item-2');


  scrollableText.addEventListener('scroll', function() {
    if (scrollableText.scrollTop + scrollableText.clientHeight >= scrollableText.scrollHeight) {
      item2.style.position = 'static';
      item2.style.maxHeight = 'none';
    } else {
      item2.style.position = 'relative';
      item2.style.maxHeight = '100vh';
    }
  });
});



Das gehört auch dazu 

Nutze Visual Studion. Bin Anfänger und das ist meine erste Website:

Hallo, ich programmiere meine erste Webiste, ich habe den Code in CSS, html usw. angepasst, so, dass die Website im Vollbildmodus oder im verkleinertem Browser Bildschirm den Text so anzeigen soll das der Text auf der rechten Browserhälfte angezeigt wird

, der Code ist fertig bis auf eine Sache die ich nicht verstehe. Der eine Code in CSS scheint nicht richtig zu sein und eine geschweifte Klammer leuchtet rot, aber da ich Anfänger bin, weiß ich nicht was ich an dem Code ändern soll damit er funktioiniert. Der Code istim Bild zu sehen

Bitte um Hilfe? Das Bild auf der Website die ich zum ertsten Mal programmiere verschiebt sich als beim Verkleinern des Browserfensters nach oben, was tun?

Das Bild soll an der richtigen stelle bleiben wie kann ich das anstellen, dass es das tut egal, ob der Browserbildschirm nun im Vollbild ist oder etwas verkleinert?

Auf dem dritten Bild erkennt man den verkleinerten Bildschirm. Das 4 Bild ist ein Teilscreenshoot des Browser im Vollbildmodus, man erkennt genau, dass sich das Bild beim verkleinetem Fenster nach oben zieht. Vieleicht erkennt jemand im html oder CSS Teil den Fehler. Bin echt für jede Hilfe dankbar. Ich bin Anfänger und suche ziemlich verzweifelt nach einer Lösung

hallo wie oben beschriebn habe ich dieses Problem. Das Bannerbild im Header ist sehr schön und passend positioniert wenn ich den Browser nicht im Vollbildmodus habe, aber sobald ich den Browser vergrößere wird das Abnnerbiod oben etwas kürzer und verzeiht sich auch etwas. Wie kann ich es einprogrammieren, dass das Bild auf dem verkleinerten Browser wie im Vollbildbrowser gleich bleibt? Hier kann man meine aktuellen CSS Befehle dazu sehen. Anfänger das istmeine rste rchtige Website die ich versuche zu programmieren.

Ich bitte um Rat

.welcome {

background-image: url(Hund2.jpg);

 background-repeat: no-repeat;

 background-position: center center;

 background-size: auto;

 margin: 0 auto;

 background-size:cover;

 min-height: 500px;

 height:500px;

 padding-top: 1cm;

 padding-bottom: 1cm;

 }