SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Evangelist
    Join Date
    Apr 2007
    Posts
    398
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Help with a simple video player layout please

    Hi,

    I'm trying to create a video player for my website. I've created it fine in IE, but in FF looks a bit all over the place:

    HTML Code:
    
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>
    <title>Test</title>
    
    <style type="text/css">
    	body {background:#CCC; font:normal normal 12px Verdana, Arial, Helvetica, sans-serif;}
    	#container {width:642px; padding:10px; border:#000 1px solid; background:#fff; color:#333; margin:0 auto;}
    	#video-holder {width:320px; height:248px; display:block; border:#000 1px solid; float:left;}
    	ul {float:right;}
    	li {width:265px;list-style-type:none; border:#888 1px solid; padding:4px; margin:0 0 4px 0; background:#eee;}
    	li {width:265px;list-style-type:none; border:#888 1px solid; padding:4px; margin:0 0 4px 0; background:#eee;}
    	li:hover {background:#0066CC};
    </style>
    
    
    </head>
    
    <body>
    <div id="container">
    		
    <!-- Video Holder --> 
            <div id='video-holder' rel='http://www.youtube.com/v/0Bmhjf0rKe8&amp;hl=en&amp;fs=1' title='The First Video'></div>
            
            <ul>
                <li rel='http://www.youtube.com/v/0Bmhjf0rKe8&amp;hl=en&amp;fs=1' title='The First Video'>video 1<br />Quick Title</li>
                <li rel='http://www.youtube.com/v/tgbNymZ7vqY&amp;hl=en&amp;fs=1' title='The Second Video'>video 2<br />Quick Title</li>
    
                <li rel='http://www.youtube.com/v/0Bmhjf0rKe8&amp;hl=en&amp;fs=1' title='The Third Video'>video 3<br />Quick Title</li>
                <li rel='http://www.youtube.com/v/tgbNymZ7vqY&amp;hl=en&amp;fs=1' title='The First Video'>video 4<br />Quick Title</li>
                <li rel='http://www.youtube.com/v/0Bmhjf0rKe8&amp;hl=en&amp;fs=1' title='The Second Video'>video 5<br />Quick Title</li>
                <li rel='http://www.youtube.com/v/tgbNymZ7vqY&amp;hl=en&amp;fs=1' title='The Third Video'>video 6<br />Quick Title</li>
            </ul>
    
    		
    </div>
    
    </div>
    </body>
    </html>
    Can anyone help please. I think i'm nearly there. Also in IE I use the li:hover method which works in FF but not IE. In this case is there a way around this as well?

    Thank you very much

  2. #2
    SitePoint Guru
    Join Date
    Nov 2008
    Posts
    622
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    you had closing </div> tag after </ul> but you dont have its opening tag <div> before <ul>

    also always use full doctype.

    try this

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Test</title>
    
    <style type="text/css">
    	body{background:#CCC; margin:0px; padding:0px;}
    	#container{width:642px; margin:0px auto; background-color:#FFffff; overflow:auto}
    	#video-holder {width:320px; height:248px; display:block; border:#000 1px solid; float:left;}
    	ul {margin-top:0px;}
    	li {width:265px;list-style-type:none; border:#888 1px solid; padding:4px; margin:0 0 4px 0; background:#eee;}
    	li {width:265px;list-style-type:none; border:#888 1px solid; padding:4px; margin:0 0 4px 0; background:#eee;}
    	li:hover {background:#0066CC}
    	#listing{float:left;}
    
    </style>
    
    
    </head>
    
    <body>
    <div id="container">
    
    <!-- Video Holder --> 
            <div id='video-holder' rel='http://www.youtube.com/v/0Bmhjf0rKe8&amp;hl=en&amp;fs=1' title='The First Video'></div>
    		
            <div id="listing">
            <ul>
           <li rel='http://www.youtube.com/v/0Bmhjf0rKe8&amp;hl=en&amp;fs=1' title='The First Video'>video 1<br />Quick Title</li>
         <li rel='http://www.youtube.com/v/tgbNymZ7vqY&amp;hl=en&amp;fs=1' title='The Second Video'>video 2<br />Quick Title</li>
        <li rel='http://www.youtube.com/v/0Bmhjf0rKe8&amp;hl=en&amp;fs=1' title='The Third Video'>video 3<br />Quick Title</li>
        <li rel='http://www.youtube.com/v/tgbNymZ7vqY&amp;hl=en&amp;fs=1' title='The First Video'>video 4<br />Quick Title</li>
        <li rel='http://www.youtube.com/v/0Bmhjf0rKe8&amp;hl=en&amp;fs=1' title='The Second Video'>video 5<br />Quick Title</li>
          <li rel='http://www.youtube.com/v/tgbNymZ7vqY&amp;hl=en&amp;fs=1' title='The Third Video'>video 6<br />Quick Title</li>
            </ul>
    </div>
    
    </div>
    
    </body>
    </html>
    vineet

  3. #3
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,108
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    Also in IE I use the li:hover method which works in FF but not IE. In this case is there a way around this as well?
    IE6 only recognises :hover on anchors (a tags), if you're happy with the current style there's no reason why you couldn't add links to the list items and style those instead - which would work fine in IE6.

    If you need to use hover on other elements - the simplest solution to get it working in IE6 would be to use a modified suckerfish script:
    http://htmldog.com/articles/suckerfish/dropdowns/

    There are other options too - here are two other good options.
    http://code.google.com/p/ie7-js/
    http://www.xs4all.nl/~peterned/csshover.html

  4. #4
    SitePoint Evangelist
    Join Date
    Apr 2007
    Posts
    398
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thank you guys

  5. #5
    SitePoint Enthusiast presotrader's Avatar
    Join Date
    Mar 2009
    Posts
    26
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I just run pages through
    validator.w3.org
    to spot those... just my 2c
    Manage PDF workflows with Hummingbird. Use a Nitro PDF coupon

  6. #6
    SitePoint Member
    Join Date
    Jan 2010
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Chris did you come up with all that code yourself or did you get a template from somewhere? I'm trying to create my own video player but don't really know where to start. Also I just ran my site through the validator presotrader posted and it says It has 26 errors lol.

    Eli

  7. #7
    SitePoint Member
    Join Date
    Jan 2010
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    So are there any templates out there for this?


    __________________________
    My new Enzyte website.

  8. #8
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    You could google for some templates, but I highly doubt he got his code from somewhere just because of the way the code is/looks
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •