0

Hey Guys, i am having trouble placing this image over a youtube video, I want the .youtube_hat to be displayed over the youtube video in the top corner. So could anyone please help me!!

The HTML

<div class="youtube_area">
        	<div class="youtube_hat"></div>
        	<div class="youtube">
            	<iframe title="YouTube video player" width="450" height="258" src="http://www.youtube.com/embed/B-1Xqnx-KCw?rel=0" frameborder="0" allowfullscreen></iframe>
            </div>
        </div>

The CSS

.youtube_hat {
	position: absolute;
	margin: -75px 0 0 -72px;
	width: 210px; height: 157px;
	background: url(../img/youtube_hat.png) no-repeat top left;	
	z-index: 1;
}
.youtube_area {
	position: absolute;
	top: 227px;	
	left: 592px;
}
.youtube {
	position: absolute;
	width: 450px; height: 258px;
	z-index: 5;
}

Thanks for your help,
Marais

3
Contributors
2
Replies
3
Views
6 Years
Discussion Span
Last Post by lps
0

Just a suggestion... but you could try float:right instead of position:absolute for the .youtube_hat css class.

0

In my opinion, try to style CSS more specifically. For example, instead of using

.youtube{}

try be more specific like

.youtube iframe{}
This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.