Member Avatar for scarcella

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
  • 150 Views
  • 6 Months Discussion Span
  • Latest Post Latest Post by lps
Member Avatar for schoolboy2010

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

Member Avatar for lps

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

.youtube{}

try be more specific like

.youtube iframe{}
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.