SitePoint Sponsor

User Tag List

Results 1 to 3 of 3

Hybrid View

  1. #1
    SitePoint Enthusiast
    Join Date
    Aug 2012
    Posts
    51
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Horizontal Scolling List

    I've got this css from a wordpress YouTube plug-in I've turned into a horizontal scrolling list. My one issue, is now the title and date don't wrap, so it doesn't look as good as it could. I've tried to include all the css and code that make it happen on the page. Also, here is the page link, in case looking at it helps you understand what I mean:

    http://theturtleroom.com/educational...ces/ed-videos/

    Code:
    .youtubeFeeder {
    	margin: 10px;
    	text-align: center;
    }
    
    .youtubeFeederplaylist {
    	background: #F8F4E8;
    	padding: 10px;
    	border: 1px solid #38240E;
    	margin-bottom: 15px;
    }
    
    .youtubeFeederplaylist .youtubeVideo {
    	float: left;
    	margin-right:10px;
    }
    
    .youtubeFeederPlaylistList {
    	overflow: auto;
    	width: 560px
    	height: 100px;
    	white-space: nowrap;
    	margin: 0 !important;
    	padding: 10px !important;
    	list-style: none;
    }
    
    .youtubeTitle {
    	font-weight: bold;
    }
    
    .youtubeDateaftertitle {
    	font-weight: normal;
    }
    and here is a sample of the the list source code from the page (only includeded two items, cause its more than enough to get the point across)

    Code:
    <ul class="youtubeFeederPlaylistList" id="youtubeFeederPlaylist1">
    <li><a href="http://youtube.com/watch?v=2LEsGc0dVJc&autohide=2&autoplay=0&cc_load_policy=0&color=red&controls=1&disablekb=0&fs=1&iv_load_policy=1&loop=0&modestbranding=1&rel=0&showinfo=0&theme=dark"><img alt="BLANDING'S TURTLE (Emydoidea blandingii)" class="youtubeThumb" src="//i.ytimg.com/vi/2LEsGc0dVJc/default.jpg" /><span class="youtubeTitle">BLANDING’S TURTLE (Emydoidea blandingii)</span><span class="youtubeDateaftertitle">8/18/12</span></a></li>
    <li><a href="http://youtube.com/watch?v=SP6QbLdQBx0&autohide=2&autoplay=0&cc_load_policy=0&color=red&controls=1&disablekb=0&fs=1&iv_load_policy=1&loop=0&modestbranding=1&rel=0&showinfo=0&theme=dark"><img alt="Wood Turtle (Glyptemys insculpta): A Species in Need" class="youtubeThumb" src="//i.ytimg.com/vi/SP6QbLdQBx0/default.jpg" /><span class="youtubeTitle">Wood Turtle (Glyptemys insculpta): A Species in Need</span><span class="youtubeDateaftertitle">7/17/12</span></a></li>
    </ul>

  2. #2
    SitePoint Enthusiast
    Join Date
    Aug 2012
    Posts
    51
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Looks like I missed some of the css:
    Code:
    .youtubeFeederPlaylistList li {
    	list-style-type: none;
    	display: inline-block;
    	background: #F8F4E8;
    	width: 216px;
    	height: 100px;
    	border: 1px solid #9D7505;
    	margin: 0 10px !important;
    	padding:3px !important;
    	text-align: left !important;
    }

  3. #3
    SitePoint Enthusiast
    Join Date
    Aug 2012
    Posts
    51
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    spent all morning playing with it....got it to do close to what I wanted. This could even be deleted...


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
  •