TalkPHP

TalkPHP (http://www.talkphp.com/forums.php)
-   XHTML, HTML, CSS (http://www.talkphp.com/xhtml-html-css/)
-   -   How would you do this? (http://www.talkphp.com/xhtml-html-css/3498-how-would-you-do.html)

codefreek 10-20-2008 12:20 AM
How would you do this?
 
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>


All times are GMT. The time now is 07:08 PM.

Powered by vBulletin® Version 3.6.8
Copyright ©2000 - 2013, Jelsoft Enterprises Ltd.
Search Engine Optimization by vBSEO 3.1.0