• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

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

lompecard

Neues Mitglied
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">&#x2039;</label>
<label for="img-2" class="next">&#x203a;</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">&#x2039;</label>
<label for="img-3" class="next">&#x203a;</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">&#x2039;</label>
<label for="img-4" class="next">&#x203a;</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">&#x2039;</label>
<label for="img-1" class="next">&#x203a;</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; }
 
Werbung:
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.
 
Zuletzt bearbeitet:
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">&#x2039;</label>
<img src="images/dia0.jpg" />
<label for="img-2" class="next">&#x203a;</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.
 

Anhänge

  • slidelabel1.JPG
    slidelabel1.JPG
    66,4 KB · Aufrufe: 2
  • slidelabel2.JPG
    slidelabel2.JPG
    63,4 KB · Aufrufe: 2
Werbung:
Zurück
Oben