HTML5 Tutorial # 29 - Making A Video Player

+1 HyJax LTD · October 22, 2014
So I have followed the tutorial but the box around my player goes all the way to the edge of the window instead of the 700 px wide border for the player.

Here is my HTML then the CSS files.  What am I doing wrong?


<!doctype html>
<html lang="en">
 <head>
  <link rel="stylesheet" href="main.css" />
  <script src="sunflower.js"></script>
 </head>
 <body> 
 <section id="skin">
   <video id="myMovie" width="640" height="360">
    <source src="Images/Sunflower_crash.mp4">
   </video>
  <nav>
   <div id="buttons">
    <button type="button" id="playButton">Play</button>
   </div id="defaultBar">
    <div id="progressBar">
    </div>
   <div style="clear:both">
   </div>
   
  </nav>
 </section>
 </body>
</html>


CSS
body{
 text-align:center;
 
}
header, section, footer, aside, nav, article, hgroup {
 display:block;
}
#skin{
 width:700;
 margin:10px none;
 padding:5px;
 background:red;
 border:4px solid black;
 border-radius:10px;
 
}
#nav{
 margin:5 px 0px;
 
}
#buttons{
 float:left;
 width:70px;
 height:20px;
 
}


OFF TOPIC: This PC may need a fresh mirror, too.  Its been acting weird during the Java tutorials.

Post a Reply

Replies

Oldest  Newest  Rating
0 HyJax LTD · October 22, 2014
NEVER MIND!!!!

Silly mistakes... didn't forget a semicolon.

I forgot to tell the width what unit of 700 to make the window.

SOLVED.
0 HyJax LTD · October 22, 2014
This is what I end up with. Notice it goes to the edge of the browser window.

Did I forget a semicolon?

/images/forum/upload/2014-10-22/be8263869beed1283de7a2303f0d19ca.png
  • 1

HTML / CSS / Web Design

107,115 followers
About

Discuss, share, ask, learn and teach HTML5 and CSS3.

Links
Moderators