CODEWITHSUNDEEP
csspositioning
Barbara
Barbara

Reputation: 14756

Slide div below an absolute positioned div

http://jsfiddle.net/FUqhb/

I need to move the player so that it always stays below the cd cover. I can't change the html (I can add things but I can't change the order or delete stuff inside) and I can't set a fixed margin-top for the player. Other than that, any ideas?

I tried display:block but it doesn't work, probably because it's an absolute positioned div.

Upvotes: 1

Views: 501

Answers (2)

Jonathan Payne
Jonathan Payne

Reputation: 2223

jsFiddle: http://jsfiddle.net/FUqhb/11/

You can add a div with height:200px which will push the bar down.

<div class="audio_player">
     <div style="height:200px"></div>
     <embed type="application/x-shockwave-flash" src="http://assets.tumblr.com/swf/audio_player_black.swf?audio_file=somefile.mp3" height="27" width="207"/>
</div>

Upvotes: 1

Diodeus - James MacFarlane
Diodeus - James MacFarlane

Reputation: 114347

Turn off absolute positioning of the sleeve:

.turntable {
    width: 100%;
    height: 200px; /* cd height */
    position: relative;
}

.artwork,
.gloss,
.sleeve {

    width: 100%;
    height: 100%;
    background-size: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
}

.gloss {
    background: url('http://i.imgur.com/JrVdR.png');
    position:absolute;
    top:0;left:0
}

.sleeve {
    background: url('http://i.imgur.com/VjVh1.jpg') no-repeat;
    width: 200px; /* cd width */
}

Upvotes: 0

Related Questions