How would you do this?

codefreek · 10-20-2008, 12:20 AM

hey everyone, i am kinda lost on how to this. I will be outputting some video on to the site and wanna do a list of 5 thumbnails that.

Starts here < and goes to the right > for 5 videos and then
</br> down. and start a new list the same way and continue this.

As well be able to have a name over the thumbnail and put a vote bar under and also the date name of who submit it.

I don't want anyone to fix this for me, just point me to a tutorial or
anything that might help out and that's it

Thank you in advance!

tony · 10-20-2008, 04:50 AM

So every video would have a horizontal showcasing of thumbnails, every thumbnail with a title and rating?
if that's the case it's then they way i'll go about it would be of making a list and every list item would have an image tag, a form with the radio inputs for the rating, and a strong tag for the title. make the list items blocks and float them to the left.

something like this:

Code:

ul#showcase{
	list-style:none;
	margin:0;
	padding:0;
}
ul#showcase li{
	display: block;
	float:left;
	background: red;
	margin:5px;
	padding:10px;
}
ul#showcase li img{
	display:block;
	width:100px;
	height:100px;
	margin: auto;
}
ul#showcase li form{
	display:block;
	margin:10px 0;
}
.clear{
	display:block;
	clear:both;
	height:0;
}

HTML Code:

<ul id="showcase">
	<li>
		<strong>pic title</strong>
		<img alt="pic1" />
		<form method="post">
			<input type="radio" name="vote" value="1" />
			<input type="radio" name="vote" value="2" />
			<input type="radio" name="vote" value="3" />
			<input type="radio" name="vote" value="4" />
			<input type="radio" name="vote" value="5" />
		</form>
	</li>
	
	<li>
		<strong>pic title</strong>
		<img alt="pic2" />
		<form method="post">
			<input type="radio" name="vote" value="1" />
			<input type="radio" name="vote" value="2" />
			<input type="radio" name="vote" value="3" />
			<input type="radio" name="vote" value="4" />
			<input type="radio" name="vote" value="5" />
		</form>
	</li>

	<li>
		<strong>pic title</strong>
		<img alt="pic3" />
		<form method="post">
			<input type="radio" name="vote" value="1" />
			<input type="radio" name="vote" value="2" />
			<input type="radio" name="vote" value="3" />
			<input type="radio" name="vote" value="4" />
			<input type="radio" name="vote" value="5" />
		</form>
	</li>

	<li>
		<strong>pic title</strong>
		<img alt="pic4" />
		<form method="post">
			<input type="radio" name="vote" value="1" />
			<input type="radio" name="vote" value="2" />
			<input type="radio" name="vote" value="3" />
			<input type="radio" name="vote" value="4" />
			<input type="radio" name="vote" value="5" />
		</form>
	</li>

	<li>
		<strong>pic title</strong>
		<img alt="pic5" />
		<form method="post">
			<input type="radio" name="vote" value="1" />
			<input type="radio" name="vote" value="2" />
			<input type="radio" name="vote" value="3" />
			<input type="radio" name="vote" value="4" />
			<input type="radio" name="vote" value="5" />
		</form>
	</li>