I'm trying to create multiple albums on my site but only the first artist

Question

I'm trying to create multiple albums on my site but only the first artist

Navigation

#1 by (0 votes)

1

Below is my code:

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
html, body {
    width: 100%;
    height: 100%;
}
.lbox {
    visibility: hidden;
    opacity: 0;
}
ul {
    width: 800px auto ;
    list-style: none;
    display: flex;
    margin: 100px auto;
}
.min {
    width: 150px;
    padding: 10px;
}
.lbox:target {
    opacity: 1;
    visibility: visible;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    position: fixed;
    text-align: center;
    background-color: rgba(10,10,10,0.7);
}
.box-img {
    width: 1000px;
    margin: 150px auto;
}
.btn {
    color: #fff;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    text-decoration: none;
    position: absolute;
    width: 50px;
    height: 50px;
    font-size: 40px;
    text-align: center;
}
#prev {
    left: 5%;
    top: 45%;
}
#next {
    right: 5%;
    top: 45%;
}
#close {
    top: 0;
    right: 2px;
}
.box-img img {
    opacity: 0;
}

.lbox:target .box-img img {
    opacity: 1;
    transition: opacity 250ms linear;    

}

<h2>Quarto 1<h2>
<ul>
    <li><a href="#img1"><img src="3cama.html" alt="" class="min"></a></li>
    <li><a href="#img2"><img src="quartdo.html" alt="" class="min"></a></li>
    <li><a href="#img3"><img src="quartoun.html" alt="" class="min"></a></li>
    <li><a href="#img4"><img src="quartsou.html" alt="" class="min"></a></li>
  <li><a href="#img5"><img src="quartuno.html" alt="" class="min"></a></li>
  <li><a href="#img6"><img src="quarto.html" alt="" class="min"></a></li>
  <li><a href="#img7"><img src="quartum.html" alt="" class="media"></a></li>
  <li><a href="#img8"><img src="varan.html" alt="" class="min"></a></li>
</ul>
   <div class="lbox" id="img1">
    <div class="box-img">
        <a href="#img8" class="btn" id="prev">&#171;</a>
        <a href="#" class="btn" id="close">X</a>
        <img src="3cama.html" alt="">
        <a href="#img2" class="btn" id="next">&#187;</a>
    </div>
</div>
<div class="lbox" id="img2">
    <div class="box-img">
        <a href="#img1" class="btn" id="prev">&#171;</a>
        <a href="#" class="btn" id="close">X</a>
        <img src="quartdo.html" alt="">
        <a href="#img3" class="btn" id="next">&#187;</a>
    </div>
</div>
<div class="lbox" id="img3">
    <div class="box-img">
        <a href="#img2" class="btn" id="prev">&#171;</a>
        <a href="#" class="btn" id="close">X</a>
        <img src="quartoun.html" alt="">
        <a href="#img4" class="btn" id="next">&#187;</a>
    </div>
</div>
<div class="lbox" id="img4">
    <div class="box-img">
        <a href="#img3" class="btn" id="prev">&#171;</a>
        <a href="#" class="btn" id="close">X</a>
        <img src="quartsou.html" alt="">
           <a href="#img5" class="btn" id="next">&#187;</a>
    </div>
  <div class="lbox" id="img5">
    <div class="box-img">
        <a href="#img4" class="btn" id="prev">&#171;</a>
        <a href="#" class="btn" id="close">X</a>
        <img src="quartuno.html" alt="">
           <a href="#img6" class="btn" id="next">&#187;</a>
    </div>
    </div>
  <div class="lbox" id="img6">
    <div class="box-img">
        <a href="#img5" class="btn" id="prev">&#171;</a>
        <a href="#" class="btn" id="close">X</a>
        <img src="quarto.html" alt="">
           <a href="#img7" class="btn" id="next">&#187;</a>
    </div>
  <div class="lbox" id="img8">
    <div class="box-img">
        <a href="#img7" class="btn" id="prev">&#171;</a>
        <a href="#" class="btn" id="close">X</a>
        <img src="varan.html" alt="">
           <a href="#img1" class="btn" id="next">&#187;</a>
    </div>
</div>

Then I just repeated everything by changing the photos and their numbers.

html5

asked by anonymous 10.11.2018 / 17:52

1 answer

Error while running Asp Net Core Application Data import error in R [closed]

score 0 · Answer 1

Your problem is that you left the div id=img4 tag open. Just close this div that solves the problem

See how it looks, Display as a whole page because your code is not very responsive

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

html,
body {
    width: 100%;
    height: 100%;
}

.lbox {
    visibility: hidden;
    opacity: 0;
}

ul {
    width: 800px auto;
    list-style: none;
    display: flex;
    margin: 100px auto;
}

.min {
    width: 150px;
    padding: 10px;
}

.lbox:target {
    opacity: 1;
    visibility: visible;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    position: fixed;
    text-align: center;
    background-color: rgba(10, 10, 10, 0.7);
}

.box-img {
    width: 1000px;
    margin: 150px auto;
}

.btn {
    color: #fff;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    text-decoration: none;
    position: absolute;
    width: 50px;
    height: 50px;
    font-size: 40px;
    text-align: center;
}

#prev {
    left: 5%;
    top: 45%;
}

#next {
    right: 5%;
    top: 45%;
}

#close {
    top: 0;
    right: 2px;
}

.box-img img {
    opacity: 0;
}

.lbox:target .box-img img {
    opacity: 1;
    transition: opacity 250ms linear;

}

<h2>Quarto 1<h2>
        <ul>
            <li><a href="#img1"><img src="https://placecage.com/51/50"alt="" class="min"></a></li>
            <li><a href="#img2"><img src="https://placecage.com/52/50"alt="" class="min"></a></li>
            <li><a href="#img3"><img src="https://placecage.com/53/50"alt="" class="min"></a></li>
            <li><a href="#img4"><img src="https://placecage.com/54/50"alt="" class="min"></a></li>
            <li><a href="#img5"><img src="https://placecage.com/55/50"alt="" class="min"></a></li>
            <li><a href="#img6"><img src="https://placecage.com/56/50"alt="" class="min"></a></li>
            <li><a href="#img7"><img src="https://placecage.com/57/50"alt="" class="min"></a></li>
            <li><a href="#img8"><img src="https://placecage.com/58/50"alt="" class="min"></a></li>
        </ul>
        <div class="lbox" id="img1">
            <div class="box-img">
                <a href="#img8" class="btn" id="prev">&#171;</a>
                <a href="#" class="btn" id="close">X</a>
                <img src="https://placecage.com/51/50"alt="">
                <a href="#img2" class="btn" id="next">&#187;</a>
            </div>
        </div>
        <div class="lbox" id="img2">
            <div class="box-img">
                <a href="#img1" class="btn" id="prev">&#171;</a>
                <a href="#" class="btn" id="close">X</a>
                <img src="https://placecage.com/52/50"alt="">
                <a href="#img3" class="btn" id="next">&#187;</a>
            </div>
        </div>
        <div class="lbox" id="img3">
            <div class="box-img">
                <a href="#img2" class="btn" id="prev">&#171;</a>
                <a href="#" class="btn" id="close">X</a>
                <img src="https://placecage.com/53/50"alt="">
                <a href="#img4" class="btn" id="next">&#187;</a>
            </div>
        </div>
        <div class="lbox" id="img4">
            <div class="box-img">
                <a href="#img3" class="btn" id="prev">&#171;</a>
                <a href="#" class="btn" id="close">X</a>
                <img src="https://placecage.com/54/50"alt="">
                <a href="#img5" class="btn" id="next">&#187;</a>
            </div>
        </div>
        <div class="lbox" id="img5">
            <div class="box-img">
                <a href="#img4" class="btn" id="prev">&#171;</a>
                <a href="#" class="btn" id="close">X</a>
                <img src="https://placecage.com/55/50"alt="">
                <a href="#img6" class="btn" id="next">&#187;</a>
            </div>
        </div>
        <div class="lbox" id="img6">
            <div class="box-img">
                <a href="#img5" class="btn" id="prev">&#171;</a>
                <a href="#" class="btn" id="close">X</a>
                <img src="https://placecage.com/56/50"alt="">
                <a href="#img7" class="btn" id="next">&#187;</a>
            </div>
        </div>
        <div class="lbox" id="img7">
            <div class="box-img">
                <a href="#img6" class="btn" id="prev">&#171;</a>
                <a href="#" class="btn" id="close">X</a>
                <img src="https://placecage.com/57/50"alt="">
                <a href="#img8" class="btn" id="next">&#187;</a>
            </div>
        </div>
        <div class="lbox" id="img8">
            <div class="box-img">
                <a href="#img7" class="btn" id="prev">&#171;</a>
                <a href="#" class="btn" id="close">X</a>
                <img src="https://placecage.com/58/50"alt="">
                <a href="#img1" class="btn" id="next">&#187;</a>
            </div>
        </div>