Grid und Pos geht nicht ...

tomycat
Newbie
Dabei seit: 27.04.2023
Beiträge: 3
23.05.2025, 13:09
Silder 1 soll sich von Grid Spalte 2 bis 5 und Spalte 5 einnehmen, was muss ich ändern?
Silder 2 soll sich von Grid Spalte 2 bis 4 und Spalte 6 einnehmen, was muss ich ändern?

https://handicap-fan.com/test.html

der Code
HTML-Code:
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Zwei Menüs in Zeile 1 & 2</title>
<style>
  /* Grundlegende Styles */
  body {
    margin: 0;
    background-color: black;
    font-family: Arial, sans-serif;
    font-size: 1.6rem;
    color: white;
  }
.flex-container {
  display: grid;
  grid-template-rows: 10px 30px 10px 50px 50px 100px;
  grid-template-columns: 5% 28% 3% 28% 3% 28% 5%;
  /* Bereiche für Zuweisung */
grid-template-areas:
  ". . . . ."
  ". .  menu1 . ."
  ". . . . ."
  ". menu2 slider1 slider2 ."
   ". . . . .";
  ". . .. ."
  ". . . . .";
}

  /* Gemeinsame Styles für alle ULs */
ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
 
  height: 100%; /* passt sich der Containerhöhe an */
}

/* Styling für LI-Elemente */
li {
  position: relative;
  display: flex; /* vertikal ausgerichtet */
  align-items: center;
  height: 100%;
}

/* Links stylen */
a {
  display: flex;
  align-items: center;
  padding: 8px 12px;
  border: 2px solid white;
  border-radius: 4px;
  color: white;
  height: 100%;
  box-sizing: border-box;
  text-decoration: none;
}

/* Hover Effekt */
a:hover {
  background-color: #333;
}

/* Dropdown verstecken, nur bei Hover sichtbar */
.has-dropdown:hover > .dropdown {
  display: flex;
}

/* Dropdown-Listen */
.dropdown {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  flex-direction: column;
  background: #222;
  min-width: 150px;
  list-style: none;
  padding: 0;
  margin: 0;
  border: 1px solid #555;
  z-index: 10;
}

.dropdown li {
  width: 100%;
}

.dropdown a {
  padding: 8px 12px;
  border: none;
  border-radius: 0;
  width: 100%;
  box-sizing: border-box;
}

/* Menü 1 in Zeile 1, Spalte 3 */
.menu1 {
   grid-column: 4 / 7;
   grid-row: 2;
  //grid-area: menu1;
background-color: black; /* Schwarzer Hintergrund */
  padding: 1px;
  padding-left: 190px; /* Abstand von 10px auf der linken Seite */
}

/* Menü 2 in Zeile 2, Spalte 2 */
.menu2 {
  grid-area: menu2;
  background-color: #444;
  padding: 1px;
  grid-column: 1 / -1;
  padding-left: 20px; /* Abstand von 10px auf der linken Seite */
}
.menu2 a {
  border: none;
}
.menu2 a {
  font-size: 2rem; /* Hier kannst du die gewünschte Schriftgröße einstellen */
}
  .menu1 a {
  font-size: 1rem; /* Hier kannst du die gewünschte Schriftgröße einstellen */
}
  /* Für den Home-Button oben links */
.menu1 ul li:first-child a {
  border-top-left-radius: 15px; /* oben links abrunden */
  border-bottom-left-radius: 15px; /* unten links abrunden */
}
 
  .menu1 ul li:last-child a {
  border-top-right-radius: 15px; /* oben links abrunden */
  border-bottom-right-radius: 15px; /* unten links abrunden */
}
/* Optional: Entferne Margin zwischen den Listenelementen */
.menu1 li {
  margin-right: 4px; /* oder einen kleineren Wert, z.B. 2px */
}
/* Slider Styles */
.slider {
 
  grid-area: slider1;
  width: 100%;
  overflow: hidden;
  position: relative;
  height: 400px; /* Beispielhöhe */
  background-color: black;
}

.slides {
  display: flex;
  width: 200%; /* Zwei Bilder, also doppelte Breite */
  transition: transform 0.5s ease-in-out;
}

.slides img {
  width: 50%; /* Jedes Bild nimmt die Hälfte der Box ein */
  height: auto;
  object-fit: cover; /* für gutes Zuschneiden */
}

.sliderb {
  grid-area: slider2;
  width: 100%;
  overflow: hidden;
  position: relative;
  height: 400px; /* Beispielhöhe */
  background-color: black;
}

.slidesb {
  display: flex;
  width: 200%; /* Zwei Bilder, also doppelte Breite */
  transition: transform 0.5s ease-in-out;
}

.slidesb img {
  width: 50%; /* Jedes Bild nimmt die Hälfte der Box ein */
  height: auto;
  object-fit: cover; /* für gutes Zuschneiden */
}
</style>
</head>
<body>

<div class="flex-container">
  <!-- Zeile 1: Menü -->
  <nav class="menu1">
    <ul>
      <li><a href="#"> <!-- Gelber Schlüssel SVG mit dunklem Hintergrund -->
  <svg width="20" height="20" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" style="vertical-align: middle; margin-right: 5px;">
  <!-- Schlüssel-Icon -->
  <circle cx="8" cy="12" r="3" fill="#ffeb3b"/>
  <rect x="10" y="12" width="8" height="2" fill="#ffeb3b"/>
  <path d="M20 15v4a2 2 0 0 1-2 2h-4" stroke="#ffeb3b" stroke-width="2" fill="none"/>
</svg>

  registar / login
  </a></li>
      <li class="has-dropdown">
        <a href="#">
        <svg width="20" height="12.0" viewBox="0 0 5 3" xmlns="http://www.w3.org/2000/svg" style="vertical-align: middle; margin-right: 5px;">
      <rect width="5" height="1" fill="#000000"/>
      <rect y="1" width="5" height="1" fill="#dd0000"/>
      <rect y="2" width="5" height="1" fill="#ffce00"/>
    </svg>
    Land
    </a>
        <ul class="dropdown">
          <li><a href="#">German</a></li>
          <li><a href="#">Australia</a></li>
          <li><a href="#">Switzerland</a></li>
          <li><a href="#">Japan</a></li>
        </ul>
      </li>
      <li><a href="#"><!-- Gelber Schlüssel SVG mit dunklem Hintergrund -->
    <svg width="20" height="20" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" style="vertical-align: middle; margin-right: 5px;">
  <rect x="6" y="11" width="12" height="10" fill="#4caf50" rx="2" ry="2"/>
  <path d="M8 11V7a4 4 0 0 1 8 0v4" stroke="#fff" stroke-width="2" fill="none"/>
  <circle cx="12" cy="16" r="1" fill="#fff"/>
</svg>


DSGVO</a></li>
      <li><a href="#"><!-- Gelber Schlüssel SVG mit dunklem Hintergrund -->
   <svg width="20" height="20" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" style="vertical-align: middle; margin-right: 5px;">
  <circle cx="12" cy="12" r="10" fill="#2196f3"/>
  <text x="12" y="16" font-size="12" fill="#fff" font-family="Arial" text-anchor="middle" dominant-baseline="middle">i</text>
</svg>

Impressum</a></li>
    </ul>
  </nav>

  <!-- Zeile 2: Menü mit Klaus -->
  <nav class="menu2">
    <ul>
      <li><a href="#">Startseite</a></li>
    
      <li class="has-dropdown">
        <a href="#">a</a>
          <ul class="dropdown">
           <li><a href="#">1</a></li>
           <li><a href="#">2z</a></li>
           <li><a href="#">3</a></li>
         </ul>
      </li>
      
      <li class="has-dropdown">
        <a href="#">b</a>
           <ul class="dropdown">
         <li><a href="#">1</a></li>
           <li><a href="#">2z</a></li>
           <li><a href="#">3</a></li>
         </ul>
      </li>
      
      <li class="has-dropdown">
        <a href="#">c</a>
           <ul class="dropdown">
    
         </ul>
      </li>
      
      <li><a href="#">XXXXXXXXX</a></li>
      
      <li style="display: flex; align-items: center; padding: 0 10px;">
    <input type="text" placeholder="suche" style="padding: 5px 8px; font-size: 1rem; border-radius: 4px; border: 1px solid #ccc;"/>
    <button style="margin-left: 5px; padding: 5px 10px; font-size: 1rem; border: none; border-radius: 4px; background-color: #444; color: white; cursor: pointer;">starten</button>
  </li>
    </ul>
  </nav>
  <div style="grid-area: slider1;">
  <!-- Erster Slider -->

 
    <div style="grid-area: slider;">
    <!-- Hier den Slider einfügen -->
  <div class="slider">
    <div class="slides">
      <img src="Bild1.jpg" alt="Bild 1" />
      <img src="Bild2.jpg" alt="Bild 2" />
    </div>
  </div>
  </div>
  </div>
    <div style="grid-area: slider2;">
  <!-- Erster Slider -->
  <div style="grid-area: slider;">
  <div class="sliderb">
    <div class="slidesb">
      <img src="Bild3.jpg" alt="Bild 3" />
      <img src="Bild4.jpg" alt="Bild 4" />
    </div>
  </div>
</div>
</div>

 
 
</div>
<script>
let currentIndex1 = 0;
const slides1 = document.querySelector('.slides');

function showNextSlide1() {
  currentIndex1 = (currentIndex1 + 1) % 2; // 2 Bilder
  slides1.style.transform = `translateX(-${currentIndex1 * 50}%)`;
}

setInterval(showNextSlide1, 3000);

// Für den zweiten Slider (slidesb)
let currentIndexb = 0;
const slidesb = document.querySelector('.slidesb');

function showNextSlideb() {
  currentIndexb = (currentIndexb + 1) % 2; // 2 Bilder
  slidesb.style.transform = `translateX(-${currentIndexb * 50}%)`;
}

setInterval(showNextSlideb, 3000);
</script>
</body>
</html>
Stichworte: -
Vorherige template Weiter
Wird geladen... Bitte warte.

Grid und Pos geht nicht ...

Grid und Pos geht nicht ...
