How to make html elements move independently to each other, but in relation to the div they are in

vunsh 0
Viewed 43

Here is my code for a spotify now playing bar I am making.

<div id = spotify-playing>
    <div class="spotify-stats">
<img id = "trackimage" class = "spotify-item playing-stats" height=80px width=80px src=<%=imagelink %>>
<p id = "trackname" class="spotify-item playing-stats"> <%= trackname %>  </p>
<p id = "trackartist" class="spotify-item playing-stats"> <%= trackartist %>  </p>
</div>
<img src="https://www.logo.wine/a/logo/Spotify/Spotify-Icon-Black-Logo.wine.svg" height = 30px width = 30px id = "spotify-logo" class="spotify-item">

</div>
</body>
<style>
.spotify-stats{
    color:rgba(255, 255, 255, 0.822);
}
#spotify-logo{
    position: relative;
    left: 45%;
    display: inline-block;
    bottom: 170%;
}
#trackimage{
    top:.3w;
    right:30px;
    box-shadow: 10px 10px 5px 3px #0e7031;
}
.spotify-item{
    display: inline-block;
    position: relative;
    text-align: left;
}
#trackartist{
    position:relative;
    display:block;
    left:120px;
    bottom: 3vw;
    font-size: .8vw;
    text-shadow: 2px 2px 4px #0e7031;
    font-style: italic;
}
#trackname{
    position:relative;
    right:16px;
    bottom: 1.8vw;
    font-size: 1vw;
    text-shadow: 2px 2px 4px #0e7031;
    font-style: italic;
}
#spotify-playing{
    border-radius: 25px;
    background: #1DB954;
    padding: 20px;
    width: 22vw;
    height: 5vw;
    margin-left:25%;
    text-align: center;
    font-family: 'Roboto', 'sans-serif';
}

When the values are updated for the image and texts, the elements shift: enter image description here enter image description here

How do I go about making the elements stay in the same place, but are relative to the div container they are in? (I want to move the container around but the items should stay in the same place relative to the container).

ejs css html
1 Answers

I put p tags in a new div and fixed some css styles. Now you can move your container wherever you want - elements should stay still. Check this code, it should work:

<div id = spotify-playing>
    <div class="spotify-stats">
        <img id = "trackimage" class = "spotify-item playing-stats" height=80px width=80px src=<%=imagelink %>
        <div id = "credits">
            <p id = "trackname" class="spotify-item playing-stats"> <%= trackname %>  </p>
            <p id = "trackartist" class="spotify-item playing-stats"> <%= trackartist %>  </p>
        </div>
    </div>
    <img src="https://www.logo.wine/a/logo/Spotify/Spotify-Icon-Black-Logo.wine.svg" height = 30px width = 30px id = "spotify-logo" class="spotify-item">
</div>
<style>
.spotify-stats{
    color:rgba(255, 255, 255, 0.822);
    display: flex;
}
#spotify-logo{
    position: absolute;
    top: 5%;
    right: 5%;
}
#trackimage{
    box-shadow: 10px 10px 5px 3px #0e7031;
}
.spotify-item{
    display: inline-block;
    position: relative;
    text-align: left;
}
#trackartist{
    font-size: .8vw;
    text-shadow: 2px 2px 4px #0e7031;
    font-style: italic;
    width: inherit;
}
#trackname{
    font-size: 1vw;
    text-shadow: 2px 2px 4px #0e7031;
    font-style: italic;
    width: inherit;
}
#spotify-playing{
    border-radius: 25px;
    background: #1DB954;
    padding: 20px;
    width: 22vw;
    height: 5vw;
    margin-left:25%;
    text-align: center;
    font-family: 'Roboto', 'sans-serif';
    display: flex;
    align-items: center;
    position: relative;
}
#credits {
    flex-direction: column;
    display: flex;
    align-items: end;
    padding-left: 10px;
    width: 100%;
    text-align: left;
}
</style>

P.S. You're adding too much id's, please stop. Use more classes instead.

Andrew Kruglik0
Related