Beiträge von Emess

Emess · 13. Mai 2024

Für alle die sich eine Lösung erhofft haben und sich selbst nicht trauen hier zu fragen.

Hier mein Ergebnis nach Stunden und Tage der Recherche

CSS

.bild-section {
  background-image: url(../images/bg-chart.png);
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 100px;
}

.card {
  margin: 10px;
  width: 250px;
  text-align: center;
  position: relative;
  overflow: hidden;
  border-radius: 5px;
  transition: transform 0.3s ease;
}

.card:hover {
  transform: scale(1.1);
}

.card-content {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.card img {
  width: 100%;
  height: auto;
  border-radius: 5px 5px 0 0;
}

.card-text {
  background-color: wheat;
  color: goldenrod;
  padding: 10px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
}

.card-text p {
  margin: 0;
}

.card a {
  text-decoration: none;
  color: goldenrod;
}

Alles anzeigen

HTML

 <section class="bild-section">
      <div class="card">
        <a href="#">
          <div class="card-content">
            <img src="./images/bp.jpg" alt="Bild 1" />
            <div class="card-text">
              <p>Bild 1</p>
            </div>
          </div>
        </a>
      </div>
      <div class="card">
        <a href="#">
          <div class="card-content">
            <img src="./images/bp.jpg" alt="Bild 2" />
            <div class="card-text">
              <p>Bild 2</p>
            </div>
          </div>
        </a>
      </div>
      <div class="card">
        <a href="#">
          <div class="card-content">
            <img src="./images/bp.jpg" alt="Bild 3" />
            <div class="card-text">
              <p>Bild 3</p>
            </div>
          </div>
        </a>
      </div>
    </section>

Alles anzeigen

Würde gerne auf gelöst stellen. Kontte aber nicht feststellen, dass sowas hier erwünscht ist

Emess · 10. Mai 2024

Kein wunder

es heißt auch miflo.de

Das sind wohl Alterserscheinungen

Emess · 9. Mai 2024

Ich hab das komplett neu gemacht jetzt wird es auch mittig ausgerichtet,

Nur habe ich wohl trotzdem einen Fehler gemacht da die Unterschrift sich scheinbar nicht als teil von cards sieht

Falls es jemanden doch interessieren sollte kann man es unter

milfo.de

ansehen.

Ansonsten wurstel mich mich einfach weiter durch die Tiefen des Internet

Emess · 9. Mai 2024

Dann kann ich dem Forum ja nur noch einen guten weiteren Schlaf wünschen. Gute Ruhe und lasst es weiterhin ganz ruhig angehen.

Nix für ungut. Aber so wird wohl auch dieses Forum sterben.

Ich für mich fange dann einfach nochmal ganz von Vorne an.

Emess · 9. Mai 2024

Was verstehst du nicht?

Vielleicht hilft ein Bild. Falls du sonst noch was brauchst lass es mich wissen. Manchmal kann ich mich schriftlich schlecht ausdrücken. Scrs.jpeg

Emess · 8. Mai 2024

Hab gerade mal beim rumspielen ein Problem. Hab da einen snippet gefunden der mir gefiel und in eine Flexbox gesetzt.

Die Card habe ich mittels justify-content: center; ausrichten können Doch bekomme ich das vertikal nicht hin. Ich komme nicht zu einem Ergebnis.

Ich befürchte der gesamte Code ist eher suboptimal.

Vielleicht erbarmt sich einer meiner?

HTML

<!DOCTYPE html>
<html lang="de">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />

    <link rel="stylesheet" type="text/css" href="css/styleschart.css" />

    <title>Test</title>
  </head>
  <body>
    <section id="test">
      <div class="blog-wrapper">
        <div class="blog-card">
          <div class="card-img">
            <img src="img/html.jpg" />
            <h1>HTML & CSS</h1>
          </div>

          <div class="card-text">
            <p>
              Um nicht geistig ganz einrosteten bleibe ich so gut es geht mit
              allen Techniken für Webdesign auf dem Damm. CMS mache ich nicht,
              da man mit reinem HTML und CSS immer flexibler ist.
            </p>
          </div>
        </div>
        <div class="blog-card">
          <div class="card-img">
            <img src="img/fischen.jpg" />
            <h1>Fischen</h1>
          </div>
          <div class="card-text">
            <p>
              Das liebe ich besonders. Mit meiner ständigen Begleiterin raus ans
              Wasser und die Natur genießen. Mit etwas Glück gibt es auch was in
              die Pfanne oder auf den Grill. Früher ging das übers gesamte Jahr.
              Doch heute ist das eher was für die warme Jahreszeit.
            </p>
          </div>
        </div>
        <div class="blog-card">
          <div class="card-img">
            <img src="img/legs.jpg" />
            <h1>Kulinarisches</h1>
          </div>
          <div class="card-text">
            <p>
              Das ist eine weitere Passion von mir. Es freut mich immer, wenn
              ich hochwertige Lebensmittel zu lecker Gerichten verwandeln kann.
              Wenn dann noch die Teller ausgeleckt werden. Dann bin ich
              glücklich.
            </p>
          </div>
        </div>
      </div>
    </section>
  </body>
</html>

Alles anzeigen

Code

* {
  margin: 0;
  padding: 0;
}

html,
body {
  height: 100%;
  background-color: blue;
}


#test {
  min-height: 100vh;
  background-color: darkolivegreen;
  /* background-image: url(../images/bg-chart.png); */
}

#test > p {
  font-family: Arial, Helvetica, sans-serif;
  font-weight: bold;
  color: fff;
  width: 70%;
}
#test > h1 {
  font-family: Arial, Helvetica, sans-serif;
  color: black;
}

.flex-container {
  width: 80%;
  padding: 5px;
  margin-bottom: 3rem;
  display: flex;
  flex-direction: row; /* Default  */
  gap: 1em 2em;
  justify-content: center;
  align-items: center;
}

.blog-wrapper {
  padding: 15px;
  display: flex;
  flex-direction: row;
  justify-content: center;

  flex-wrap: wrap;
  .blog-card {
    @include transition(0.3s);
    max-width: 300px;
    margin: 15px;
    background: #fff;
    border: gray;
    text-align: center;
    cursor: pointer;
    &:hover {
      box-shadow: 0 3px 10px 0 rgba(0, 0, 0, 0.1);
      .card-img {
        img {
          opacity: 0.8;
        }
      }
    }
    .card-img {
      position: relative;
      text-align: center;
      background: gray;
      img {
        @include transition(0.3s);
        max-height: 180px;
        width: 100%;
        border-bottom: 4px solid gray;
      }
      &:before {
        content: "";
        position: absolute;
        bottom: -8px;
        left: 50%;
        margin-left: -10px;
        width: 0;
        height: 0;
        /* border-top: solid 10px lawngreen;
                border-left: solid 10px transparent;
                border-right: solid 10px transparent; */
      }
      h1 {
        position: absolute;
        margin: 0;
        font-size: 2em;
        bottom: 15px;
        width: 100%;
        color: #fff;
        font-family: Arial, Helvetica, sans-serif;
      }
    }
    .card-details {
      margin-top: 30px;
      font-family: Arial, Helvetica, sans-serif;
      color: #3c3c3c;
      span {
        padding: 0 30px;
        i {
          margin-right: 5px;
        }
      }
    }
    .card-text {
      padding: 30px 15px;
      font-family: Arial, Helvetica, sans-serif;
      line-height: 22px;
    }
  }
}

@media (max-width: 950px) {
  .flex-item-right,
  .flex-item-left {
    flex: 100%;
    justify-content: center;
    font-size: 1em;
  }

  .flex-container {
    /* flex-wrap: wrap; */
    margin-bottom: 25px;
    flex-direction: column;
  }
}

Alles anzeigen

Emess · 4. April 2024

Vielen Dank mit deinem Ansatz hab ich es doch noch schnell hinbekommen.

Flexbox halt also auch seine Grenzen. Doch wo man es einsetzen kann kommt man schnell zum Ziel.

Jedenfalls noch mal Danke. So können wir wenigst unserem Willi ein gedenken,

https://angelfreunde-fischbachtal.de/memo.html

Emess · 4. April 2024

Ich möchte gerne auf unserer Website einen guten Freund ehren. doch leider gelingt es mir nicht den Text das Bild umfließen zu lassen

Hier der Code:

HTML

<!DOCTYPE html>
<html lang="de">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Traueranzeige</title>
    <style>
      .container {
        display: grid;
        grid-template-columns: auto 2fr;
        gap: 5px;
        width: 600px;
        height: auto;
        border: 5px solid #000;
        overflow: hidden;
      }

      .image {
        width: 100px;
        margin: 15px;
        grid-row: span 2;
      }

      .text {
        margin-top: 0px;
      }

      .text > h2 {
        font-family: Arial, Helvetica, sans-serif;
        font-size: medium;
        text-align: center;
        margin-bottom: 2px;
      }
      .text > h3 {
        font-family: Arial, Helvetica, sans-serif;
        font-size: 0.7em;
        text-align: center;
        margin-bottom: 5px;
      }
      .text > p {
        font-family: Arial, Helvetica, sans-serif;
        font-size: small;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <img class="image" src="willi_fit.jpg" alt="Trauerbild" />
      <div class="text">
        <h2>Willi Ettl</h2>
        <h3>geb. 19.03.1948 gest. 23.03.2024</h3>
        <p>
          Im Alter von 76 Jahren ist unser guter Freund und langjähriges
          Mitglied, Willi Ettl, trotz bekannter Krankheit doch sehr unerwartet
          von uns gegangen. In über 30 Jahren, davon lange Zeit als
          Vereinsrechner hat er Geschichte bei den Angelfreunden-Fischbachtal
          geschrieben. Wir wünschen der Familie und den Angehörigen die nötige
          Kraft in dieser schweren Zeit. Wir werden Willi Ettl als Mensch stets
          in bester Erinnerung behalten und seinem Engagement für den Verein ein
          ehrendes Andenken bewahren. <p>Lieber Willi, danke für alles.</p> <p>Im Namen
          aller Mitglieder</p> 
          <p>Die Angelfreunde Fischbachtal.</p>
        </p>
      </div>
    </div>
  </body>
</html>

Alles anzeigen

so sieht es aus.

williettl.jpeg

Wie bekomme ich den text dazu das gesamte div einzunehmen. Also der Test soll unterhalb des Bildes auch linksbündig.

Mit Flexbox was ich bevorzugen würde bin ich mehrfach kläglich gescheitert. Das muss doch irgendwie gehen?

Emess · 11. Februar 2024

Der scheint gut zu funktionieren. dann gutes gelingen mit den Buttons.

Ich habe mir welche als html code genutzt und per und mit css gestylt

Emess · 11. Februar 2024

optimiertes Script

JavaScript

let currentSlide = 0;

  function showSlide(index) {
    const slider = document.querySelector('.slider');
    const slides = document.querySelectorAll('.slide');
    const totalSlides = slides.length;

    if (index >= totalSlides) {
      currentSlide = 0;
    } else if (index < 0) {
      currentSlide = totalSlides - 1;
    } else {
      currentSlide = index;
    }

    const translateValue = -currentSlide * 100 + '%';
    slider.style.transform = 'translateX(' + translateValue + ')';
  }

  function prevSlide() {
    showSlide(currentSlide - 1);
  }

  function nextSlide() {
    showSlide(currentSlide + 1);
  }

Alles anzeigen

das glättet den Übergang

Emess · 11. Februar 2024

So habe die Sache mit dem Slider gelöst. Das schein ja eine echte harte Nuss zu sein.

Falls mal jemand nicht wissen sollte wie das geht. Dann möchte ich hier ein Beispiel geben

1. Etwas html

HTML

<div class="slider-container">
    <div class="slider">
                <div class="slide"><img src="images/slider/walach1.jpg" alt="Image 2"></div>
                <div class="slide"><img src="images/slider/walach2.jpg" alt="Image 2"></div>
                <div class="slide"><img src="images/slider/walach3.jpg" alt="Image 3"></div>
                <div class="slide"><img src="images/slider/walach4.jpg" alt="Image 4"></div>
                <div class="slide"><img src="images/slider/walach5.jpg" alt="Image 5"></div>
                <div class="slide"><img src="images/slider/walach6.jpg" alt="Image 6"></div>
                <div class="slide"><img src="images/slider/walach7.jpg" alt="Image 7"></div>
                <div class="slide"><img src="images/slider/walach8.jpg" alt="Image 8"></div>
                <div class="slide"><img src="images/slider/walach9.jpg" alt="Image 9"></div>
    </div>
    <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
<a class="next" onclick="plusSlides(1)">&#10095;</a>
</div>

Alles anzeigen

Etwas css

CSS

.slider-container {
  position: relative;
  max-width: 800px;
  margin: auto;
  overflow: hidden;
}

.slider {
  display: flex;
  transition: transform 0.5s ease-in-out;
}

.slide {
  min-width: 100%;
  box-sizing: border-box;
}

.slide img {
  width: 100%;
  height: auto;
}

.prev, .next {
  position: absolute;
  top: 50%;
  width: auto;
  padding: 16px;
  margin-top: -22px;
  font-size: 24px;
  color: white;
  cursor: pointer;
  user-select: none;
  transition: 0.6s ease;
  background-color: rgba(0, 0, 0, 0.8);
}

.prev {
  left: 0;
}

.next {
  right: 0;
}

.prev:hover, .next:hover {
  background-color: rgba(0, 0, 0, 0.6);
}

Alles anzeigen

und in coperation Javascript

JavaScript

let slideIndex = 1;
let slides;

function showSlides(index) {
  slides = document.querySelector('.slider');

  if (slides) {
    const totalSlides = slides.children.length;

    // Überprüfen, ob der Index außerhalb des Bereichs liegt
    if (index > totalSlides) {
      slideIndex = 1; // Wenn ja, zurück zum Anfang
    } else if (index < 1) {
      slideIndex = totalSlides; // Wenn am Anfang, zum letzten Bild springen
    } else {
      slideIndex = index;
    }

    for (let i = 0; i < totalSlides; i++) {
      slides.children[i].style.display = 'none';
      slides.children[i].style.opacity = 0; // Setzen Sie die Opazität auf 0 für alle Slides
    }

    slides.children[slideIndex - 1].style.display = 'block';
    fade(slides.children[slideIndex - 1], 1, 1, 500); // Fade-In-Effekt mit einer Dauer von 1000 Millisekunden
  } else {
    console.log("Slider not found");
  }
}

function plusSlides(n) {
  showSlides(slideIndex += n);
}

// Funktion für den Fade-In-Effekt
function fade(element, startOpacity, endOpacity, duration) {
  let startTime = null;

  function animate(timestamp) {
    if (!startTime) startTime = timestamp;
    const progress = timestamp - startTime;
    const opacity = easeInOutCubic(progress, startOpacity, endOpacity - startOpacity, duration);

    element.style.opacity = opacity;

    if (progress < duration) {
      requestAnimationFrame(animate);
    }
  }

  requestAnimationFrame(animate);
}

// Easing-Funktion für einen weichen Start und ein weiches Ende
function easeInOutCubic(t, b, c, d) {
  t /= d / 2;
  if (t < 1) return c / 2 * t * t * t + b;
  t -= 2;
  return c / 2 * (t * t * t + 2) + b;
}

Alles anzeigen

das jedenfalls klappt ganz gut. Ich hatte angenommen das man sowas hin und wieder gebrauchen kann. Aber zu wenig, für Anfänger dokumentiert ist

Emess · 9. Februar 2024

So habe alle Foren durchforstest und konnte den Slider reparieren Ist jetzt responsive. Bestimmt muss ich auch noch einige Media querries estellen müssen.

Doch von meinen 9 Bildern werden nur 5 angezeigt. Der fehler ist wohl, dass die bilder in neun divs liegen.

Wenn ich das in ein ul mit 9 li packe. Löst das dann das Problem?

Und wie änder ich meine css am liebsten mit Flexbox ? Und hat das Auwirkungen auf JS?

CSS

<section id="galerie">

        <div class="wrapper">
            <div class="slider-wrap">

                 <div id="slider" class="slider">
                <div class="slide"></div>
                <div class="slide"></div>
                <div class="slide"></div>
                <div class="slide"></div>
                <div class="slide"></div>
                <div class="slide"></div>
                <div class="slide"></div>
                <div class="slide"></div>
                <div class="slide"></div>
              </div>


              <!-- <div id="slider" class="slider">
                <div class="slide"><img src="images/slider/walach1.jpg" alt="Image 1"></div>
                <div class="slide"><img src="images/slider/walach2.jpg" alt="Image 2"></div>
                <div class="slide"><img src="images/slider/walach3.jpg" alt="Image 3"></div>
                <div class="slide"><img src="images/slider/walach4.jpg" alt="Image 4"></div>
                <div class="slide"><img src="images/slider/walach5.jpg" alt="Image 5"></div>
                <div class="slide"><img src="images/slider/walach6.jpg" alt="Image 6"></div>
                <div class="slide"><img src="images/slider/walach7.jpg" alt="Image 7"></div>
                <div class="slide"><img src="images/slider/walach8.jpg" alt="Image 8"></div>
                <div class="slide"><img src="images/slider/walach9.jpg" alt="Image 9"></div>
              </div> -->
            </div>
            <div class="btn-wrap">
              <i id="prev" class="material-icons btn">&#171;</i>
              <i id="next" class="material-icons btn">&#187;</i>
            </div>
          </div>

    </section>

Alles anzeigen

Code

#galerie{
  display: flex;
  height: 100vh;
  align-items: center;
  justify-content: center;
  background-color: aquamarine;
}
.wrapper{

  position: relative;
  max-width: 800px;
  width: 90%;
  height: 56.25vw;
  max-height: 600px;
  box-shadow: 0 0 15px rgba(0,0,0,.35);
}

.slider-wrap{
  height: 100%;
  width: 100%;
  overflow: hidden;

}

.slider{
  position: relative;
  left: 0;
  height: 100%;
  width: 500%;
  transition: 300ms ease-in-out;
}

.slide
{
  float: left;
  height: 100%;
  width: 20%;
  background-size: cover;
}

.slide:nth-child(1) { background-image: url(../images/slider/walach1.jpg); }
.slide:nth-child(2) { background-image: url(../images/slider/walach2.jpg); }
.slide:nth-child(3) { background-image: url(../images/slider/walach3.jpg); }
.slide:nth-child(4) { background-image: url(../images/slider/walach4.jpg); }
.slide:nth-child(5) { background-image: url(../images/slider/walach5.jpg); } 
.slide:nth-child(6) { background-image: url(../images/slider/walach6.jpg); }
.slide:nth-child(7) { background-image: url(../images/slider/walach7.jpg); }
.slide:nth-child(8) { background-image: url(../images/slider/walach8.jpg); }
.slide:nth-child(9) { background-image: url(../images/slider/walach9.jpg); } 

.btn
{
  position: absolute;
  top: 250px;
  width: 40px;
  height: 55px;
  font-size: 40px;
  font-weight: 700;
  color: #FFF;
  background: #2C2C2C;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  transition: background 150ms ease-in-out;
}

.btn:first-child { left: -.5em;  }
.btn:last-child  { right: -.5em;}

.btn:hover  { background: #131313; }
.btn:active
{
  transform: scale(.97);
  background: #000;
}

@media(max-width: 950px)
{
  .slide {background-position: center;}
  
  .btn { top: -.7em; }
  .btn:first-child { left: calc(50% - 1em); }
  .btn:last-child { left: calc(50% + 1em); }
}

Alles anzeigen

JavaScript

var prev = document.getElementById('prev');
var next = document.getElementById('next');
var slider = document.getElementById('slider');
var total = 0, step = 100;

prev.addEventListener('click', slide);
next.addEventListener('click', slide);

function slide()
{
  if(this.getAttribute('id') == 'prev')
  {
    if(total == 0)
    {
      total = -400;
      slider.style.left = total + '%';
    }
    else
    {
      total += step;
      slider.style.left = total + '%';
    }
  }
  else
  {
    if(total == -400)
    {
      total = 0;
      slider.style.left = total;
    }
    else
    {
      total -= step;
      slider.style.left = total + '%';
    }
  }
}

Alles anzeigen

Vielleicht hat ja jemand einen Link mit einem Beispiel für alte Männer oder Anfänger.

Oder kann sogar selbst ein Beispiel geben

Emess · 8. Februar 2024

Baste da ja nun schon seit Wochen rum und vieles ist geschehen und gelernt worden. Aber wenn ich den Browser zusammenschiebe, offenbaren sich meine eklatanten Bemühungen.

Dass ich für die Mobile Ansicht Media Querry bemühen muss erwarte ich. Aber beim zusammenschieben des Browsers, sieht man wies sich der Content in dem Falle die Bilder nicht responsive verhält Von der Slider-Navigation ganz zu schweigen. Wo fängt man da jetzt am besten an. Ich zeige euch mal den code und den Link wo man das Problem visull begutachten kann.

CSS

* {
  box-sizing: border-box;
}
.slider-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;

  margin: 1rem;
  position: relative;
  overflow: hidden;
}

.slides-container {
  height: calc(100vh - 2rem);
  width: 75%;
  display: flex;
  justify-self: center;
  align-items: center;
  overflow: scroll;
  scroll-behavior: smooth;
  list-style: none;
  margin: 0;
  padding: 0;
}
 .slides-container {
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none;  /* Internet Explorer 10+ */ 
} 
/* WebKit */
.slides-container::-webkit-scrollbar { 
  width: 0;
  height: 0;
} 
.slide-arrow {
  position: absolute;
  display: flex;
  top: 0;
  bottom: 0;
  margin: auto;
  height: 4rem;
  background-color: white;
  border: none;
  width: 2rem;
  font-size: 3rem;
  padding: 0;
  cursor: pointer;
  opacity: 0.5;
  transition: opacity 100ms;
}

.slide-arrow:hover,
.slide-arrow:focus {
  opacity: 1;
}

#slide-arrow-prev {
  left: 0px;
  padding-left: 0.25rem;
  border-radius: 0 2rem 2rem 0;
}

#slide-arrow-next {
  right: 0;
  padding-left: 0.75rem;
  border-radius: 2rem 0 0 2rem;
}

.slide {
  width: 80%;
  height: 80%;
  flex: 1 0 100%;
  display: flex;

  justify-content:center;
  align-items: center;
  background-color: #300d77;
}

.slide > img {
  width: 90%;
  height: 90%;

}

Alles anzeigen

HTML

<section id="galerie">

        <div class="slider-wrapper">
  <button class="slide-arrow" id="slide-arrow-prev">
    &#8249;
  </button>
  <button class="slide-arrow" id="slide-arrow-next">
    &#8250;
  </button>

  <div class="slides-container"  id="slides-container">
    <div class="slide"><img src="images/slider/resized/walach1.jpg" alt="Image 1"></div>
    <div class="slide"><img src="images/slider/resized/walach2.jpg" alt="Image 2"></div>
    <div class="slide"><img src="images/slider/resized/walach3.jpg" alt="Image 3"></div>
    <div class="slide"><img src="images/slider/resized/walach4.jpg" alt="Image 4"></div>
    <div class="slide"><img src="images/slider/resized/walach5.jpg" alt="Image 5"></div>
    <div class="slide"><img src="images/slider/resized/walach6.jpg" alt="Image 6"></div>
    <div class="slide"><img src="images/slider/resized/walach7.jpg" alt="Image 7"></div>
    <div class="slide"><img src="images/slider/resized/walach8.jpg" alt="Image 8"></div>
    <div class="slide"><img src="images/slider/resized/walach9.jpg" alt="Image 9"></div>
  </div>

        </div>
        
    </section>

Alles anzeigen

hier der ist es online

Dann mal gute Nacht

Emess · 29. Januar 2024

Zitat von m.scatello

Siehe z.B. https://www.w3schools.com/w3cs…yw3css_slideshow_animated

Danke!

Das wäre dann das 3. Konstrukt.

Ich weiß ja dass es viele Wege gibt. Den Weg nach Rom ist schon gut beschrieben, aber wo genau geht es zu Kolosseum. Das kann mir in Rom wohl jeder Römer genau erklären, doch leider ist mein römisch etwas eingerostet.

Nix für Ungut

Emess · 29. Januar 2024

Ich kann da machen was ich will? Der Slider ist am Footer festgetackert. Und wenn ich den Pics width 90% gebe, rutscht der slider ais der Mitte.

Emess · 28. Januar 2024

wow das ist ja absolut wenig code. Aber wohl etwas zu wenig.

Der Slider scrollt mit. Ist es angebracht ihn mit einem negativen z-index auf dem Container fest zu tackern oder kommt das vom Script?

Habs noch mal zur Ansicht hochgeladen

Emess · 27. Januar 2024

Hab hier einen einfachen Slider. Allerdings, wenn die neun Bilder ducrhgeklickt wurden bleiben nur Pfeile links/recht übrig dann kann ich wieder zurückklicken. Auch am Anfang muss man ein paarmal klicken bis der Slider sich besinnt.

Ich habe das script im verdacht

function keyPress(e) {

e = e || window.event;

event ist wohl wie das gesamte script veraltet

das Script

Code

const items = document.querySelectorAll('img');
const itemCount = items.length;
const nextItem = document.querySelector('.next');
const previousItem = document.querySelector('.previous');
let count = 0;

function showNextItem() {
  items[count].classList.remove('active');

  if(count < itemCount - 1) {
    count++;
  } else {
    count = 0;
  }

  items[count].classList.add('active');
  console.log(count);
}

function showPreviousItem() {
  items[count].classList.remove('active');

  if(count > 0) {
    count--;
  } else {
    count = itemCount - 1;
  }

  items[count].classList.add('active');
  console.log(count);
}

function keyPress(e) {
  e = e || window.event;
  
  if (e.keyCode == '37') {
    showPreviousItem();
  } else if (e.keyCode == '39') {
    showNextItem();
  }
}

nextItem.addEventListener('click', showNextItem);
previousItem.addEventListener('click', showPreviousItem);
document.addEventListener('keydown', keyPress);

Alles anzeigen

Ich kann mir da selbst nicht weiterhelfen

Anzusehen auf miflo.de

Emess · 22. Januar 2024

Ich bin hier ja Neuling. Ich möchte euch hier mal meinen Standpunkt erklären.

1. Es gibt immer mehrere Wege nach Rom

2. Niemand muss die gleiche Meinung haben wie ich.

3. Beleidigungen und persönliche Angriffe verbieten sich für mich

Ich mach das will ich alt bin und gerne PC-Mäßig fit bleiben will.

Wenn da mal ein Freibier oder ne Einladung zum Essen rauskommt ist das Nett, aber nicht das Motiv

Deshalb suche ich mir Foren wo man Nett aufgeschlossen und vom Interessierten bzw. Anfänger bis zum Profi weiter geholfen wird.

Deshalb bin ich hier und hoffe dass es hier weiterhin Nett zugeht und das Forum lebendig bleibt.

Emess · 21. Januar 2024

flex-basis: 0;

macht die ersten 3 sectionen gleich breit

und das

flex-basis: calc(100% - 4rem);

flex-shrink: 0;

soll die 4. section nach unten geschoben werde? Wo steht das

Selbst kann ich das nirgends rauslesen

CSS/Tutorials/Flexbox/Flex-Items – SELFHTML-Wiki

Emess · 21. Januar 2024

Um euch mal alle wegen des fertigen codes auf den Boden zu bringen.

Ich bin eigentlich ein Freund von fertigem Code. Ich kann mir dann tagelang ansehen und studieren. Ist ja nicht so, dass ich den direkt reinkopiere und weitervekaufe. Ich wiil was ich gelernt habe bzw fertig bekommen habe mir zu eigen machen. Um das auch mal selbstständig zu können.

Im Übrigen hat mir dieses Code auch ne Vorstellung für mein Problem mit diesem Thread eventuell mit weniger HIlfe zurecht komme.

Also für micht gibt es da ein Für und ein wider!

Doch das gibt mir immer noch Rätsel auf

Zitat

Aber woher weis die letzte section dass sie unter den 3 vorigen sections anordnen soll?

Beiträge von Emess

Cards in Flexbox ausrichte.

Cards in Flexbox ausrichte.

Cards in Flexbox ausrichte.

Cards in Flexbox ausrichte.

Cards in Flexbox ausrichte.

Cards in Flexbox ausrichte.

Text soll sich im div wo möglich die volle Breite nehmen

Text soll sich im div wo möglich die volle Breite nehmen

Slider geht jetzt zwar habe aber das css zerschossen

Slider geht jetzt zwar habe aber das css zerschossen

Slider geht jetzt zwar habe aber das css zerschossen

Slider geht jetzt zwar habe aber das css zerschossen

Slider geht jetzt zwar habe aber das css zerschossen

Slider Galerie macht keine Rücksprung

Slider Galerie macht keine Rücksprung

Slider Galerie macht keine Rücksprung

Slider Galerie macht keine Rücksprung

Das Forum mit Leben füllen

Guten Rat zu einem Footer

Guten Rat zu einem Footer