TalkPHP - View Single Post

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>