[GELOEST] .nav label Größe an übergeordneten div-container koppeln

Gelöschtes Mitglied 42273 · 13 Dezember 2022

Hallo,

Ich habe einen Image Slider mit Unterpunkten (habe ich der Übersichtlichkeit halber aus dem Code entfernt) und Pfeilen (nav label) links und rechts, die beim hovern erscheinen. Die Höhe von .nav label verzieht sich bei unterschiedlichen Bildschirmgrößen leider, so dass es über die Ränder des darüberliegenden div-containers fließt. Gerne würde ich die Höhe von .nav label an den div container koppeln, leider haben aber Verfahren wie flex-box oder % nicht funktioniert (Es wird vom Compiler schlicht nicht wahrgenommen).
Derzeit passe ich die Größe mittels media-querys an, aber das finde ich hierfür keine schöne Lösung. Bei Möglichkeit würde ich auch gerne auf Javascript verzichten.

Um Hilfe wäre ich sehr dankbar.

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<meta charset="UTF-8"/>
<link rel="stylesheet" href="test1.css" type="text/css"/>
</head>
<body>
<div class="content">

<ul class="slides">
<input type="radio" name="radio-btn" id="img-1" checked />
<li class="slide-container">
<div class="slide">
<img src="Aktuell/Bild1.jpg" />
</div>
<div class="nav">
<label for="img-4" class="prev">‹</label>
<label for="img-2" class="next">›</label>
</div>
</li>

<input type="radio" name="radio-btn" id="img-2" />
<li class="slide-container">
<div class="slide">
<img src="Aktuell/Bild2.png" />
</div>
<div class="nav">
<label for="img-1" class="prev">‹</label>
<label for="img-3" class="next">›</label>
</div>
</li>

<input type="radio" name="radio-btn" id="img-3" />
<li class="slide-container">
<div class="slide">
<img src="Aktuell/Bild3.png" />
</div>
<div class="nav">
<label for="img-2" class="prev">‹</label>
<label for="img-4" class="next">›</label>
</div>
</li>

<input type="radio" name="radio-btn" id="img-4" />
<li class="slide-container">

<div class="slide">
<img src="Aktuell/Bild4.png" />
</div>
<div class="nav">
<label for="img-3" class="prev">‹</label>
<label for="img-1" class="next">›</label>
</div>
</li>
</body>
</html>

li {list-style-type: none;}
#logo, li, img {transition: all 700ms; -moz-transition: all 700ms; -o-transition: all 700ms;}
.colors a {
font-weight: normal;
color: #9f9f9f;
}

* {
margin: center;
padding: 0;
box-sizing: border-box;
}

.content {
width: 100vw;
max-width: 100%;
margin: auto;
}

body {
background-color: #040404;
overflow-x: hidden;
}

/*Slider************************/

.slides {
padding: 0;

width: 53.55vw;
height: 58vh;

margin-top: 23vh;
margin-left: 23vw;

position: relative;
}

.slides * {
user-select: none;
-ms-user-select: none;
-moz-user-select: none;
-khtml-user-select: none;
-webkit-user-select: none;
-webkit-touch-callout: none;
}

.slides input { display: none; }

.slide-container { display: block;
}

.slide {
top: 0;
opacity: 0;

position: absolute;

transition: all .5s ease-in-out;
}

.slide img {
width: 53.55vw;
border: double 6px #9f9f9f;
}

.nav label {
width: 5vw;
height: 60.5vh;
position: absolute;

opacity: 0;
z-index: 9;
cursor: pointer;

transition: opacity .2s;

color: #efefef;
font-size: 10vw;
text-align: center;
line-height: 52vh;
font-family: constantia;
background-color: rgba(250, 0, 0, .2);
text-shadow: 0px 3px 15px rgba(255, 0, 0, .5);
}

.slide img:hover + .nav label { opacity: 0.5; }

.nav label:hover { opacity: 1; }

.nav .next { right: 0; }

input:checked + .slide-container .slide {
opacity: 1;

transform: scale(1);

transition: opacity s ease-in-out;
}

input:checked + .slide-container .nav label { display: block; }

Oliver77 · 13 Dezember 2022

Passt es vertikal nicht oder horizontal?
Vertikal werden die Pfeile klassischer Weise so angeordnet:

CSS:

.prev, .next {
position:absolute; 
top:50%;
transform:translateY(-50%); 
}

Aber da .nav übergeordnet ist bin ich mir nicht sicher , ob das so klappt.

Gelöschtes Mitglied 42273 · 13 Dezember 2022

Etwas ähnliches habe ich mir schon überlegt, nur leider verschwinden die Pfeile unter dem Bild, wenn ich das wie angegeben

<div class="slide">
<label for="img-4" class="prev">‹</label>
<img src="images/dia0.jpg" />
<label for="img-2" class="next">›</label>
</div>

schreibe. Eine Inspizierung ergab, dass die Elemente auf jeden Fall in besser Form vorhanden sind, allerdings kann ich sie weder sehen, noch das href nutzen.

Ich weis nun woran das liegt. Ich habe meinen Pfeilen einen Hover-Effekt zugeteilt. Dieser reagiert so aber leider nicht. Wenn ich diesen nun entferne, scheinen die Pfeile jedoch nicht wie zuvor zu funktionieren. Sie springen nur vom1. zum 3. Bild und umgekehrt, die anderen Anwahlen werden nicht getätigt. Auch verändert sich der Cursor beim drüberfahren nicht.

Wie hier in den Screenshots näher zu erkennen.

[GELOEST] .nav label Größe an übergeordneten div-container koppeln

Gelöschtes Mitglied 42273

Guest

Oliver77

Aktives Mitglied

Gelöschtes Mitglied 42273

Guest

Anhänge

Neueste Beiträge