SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Enthusiast
    Join Date
    Jan 2010
    Posts
    67
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    a <p>aragraph of <table>s

    this may be an html question, but there may be no html solution, it may have to be done in php
    ive been trying to make a list of videos display from left to right, top to bottom.
    take a look at the last line of code on this page for me if you would all be so kind
    http://th3rrc.com/videodump/
    the line is generated by php after grabbing the videos and their titles from a mysql database with this code
    Code:
    echo "<table><tr><td class=\"text\"><strong><p>".$row["text"]."</p></strong></td></tr>"."<tr><td class=\"vid\">"."<iframe title=\"YouTube video player\" src=\"http://www.youtube.com/embed/".$row[link]."\" width=\"426\" height=\"240\" frameborder=\"0\"></iframe>"."</td></tr></table>";
    as you can see i thought that if i put a bunch of <table>s in a <p>aragraph, it would display this way, but it is not
    the videos have to be in tables because they have to have titles
    also, the titles are not displaying anymore, they were when i was using another format
    i wanted it to all work like a paragraph so that the number of videos being displayed from left to right would be dependent on the width of the window, otherwise i would just use a <table> of <table>s
    thanks for all the help over the years guys, i hope we can tackle this one too

  2. #2
    SitePoint Addict FizixRichard's Avatar
    Join Date
    May 2003
    Location
    UK
    Posts
    372
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    I don't see what having titles has to do with using tables. You mean a title above or below the video right?

    Anyway, using tables, your code would want to be something like this:

    Code:
    <table>
    <tr>
    	<td>
        	<h1><strong>$row['text']</strong></h1>
            <iframe title=\"YouTube video player\" src=\"http://www.youtube.com/embed/\" . $row['link'] . "\" width=\"426\" height=\"240\" frameborder=\"0\"></iframe>
        </td>
    	<td>
        	<h1><strong>$row['text']</strong></h1>
            <iframe title=\"YouTube video player\" src=\"http://www.youtube.com/embed/\" . $row['link'] . "\" width=\"426\" height=\"240\" frameborder=\"0\"></iframe>
        </td>
    </tr>
    
    <tr>
    	<td>
        	<h1><strong>$row['text']</strong></h1>
            <iframe title=\"YouTube video player\" src=\"http://www.youtube.com/embed/\" . $row['link'] . "\" width=\"426\" height=\"240\" frameborder=\"0\"></iframe>
        </td>
    	<td>
        	<h1><strong>$row['text']</strong></h1>
            <iframe title=\"YouTube video player\" src=\"http://www.youtube.com/embed/\" . $row['link'] . "\" width=\"426\" height=\"240\" frameborder=\"0\"></iframe>
        </td>
    </tr>
    </table>

    Now, I've put your title and video together in the cell (<td>). The important thing to note is how the table itself is structured.

    In your code you are starting and closing a new row (<tr> and </tr>) for each video, so one video per row. If you wanted two videos per row, you would have two columns <td> ... video ... </td> <td> ... video ... </td> per row.

    BUT, you do not want to be using tables, tables are not for layouts.

    Instead you would do something like this with DIV's and CSS:


    HTML:
    Code:
    <div class="videocell">
    	<h1>6 flag caps in 1 game!!</h1>
        <iframe title="YouTube video player" src="http://www.youtube.com/embed/uAXCD8l6qQY" width="426" height="240" frameborder="0"></iframe>
    </div>
    
    <div class="videocell">
    	<h1>OUCH!!</h1>
        <iframe title="YouTube video player" src="http://www.youtube.com/embed/7v4PoBEIQ88" width="426" height="240" frameborder="0"></iframe>
    </div>
    
    <div class="videocell">
    	<h1>ILL FIGHT!!</h1>
        <iframe title="YouTube video player" src="http://www.youtube.com/embed/xZuEKLsOACU" width="426" height="240" frameborder="0"></iframe>
    </div>
    
    <div class="videocell">
    	<h1>great video</h1>
        <iframe title="YouTube video player" src="http://www.youtube.com/embed/NBF67np5FGk" width="426" height="240" frameborder="0"></iframe>
    </div>

    CSS:
    Code:
    .videocell
    {
    	width: 426px;
    	float: left;
    	margin: 10px 5px 0px 5px;
    }
    
    
    .videocell h1
    {
    	font-family: Verdana, Geneva, sans-serif;
    	font-size: 14px;
    	font-weight: bold;
    }
    
    iframe
    {
    	float: left;
    }

    That will place each video next to each other within the allotted space. So if there is room for 3 videos side by side and you have 6 videos, you'll have 2 rows of 3 videos.

    If there is room for 2 side by side and 6 videos, you will have 3 rows of 2 videos.


    Now if you wanted to enforce the width, so you can only have 2 videos side by side no matter what the users screen resolution is, you would nest them in a wrapper.


    HTML:
    Code:
    <div class="wrapper">
    	<div class="videocell">
    		<h1>6 flag caps in 1 game!!</h1>
        	<iframe title="YouTube video player" src="http://www.youtube.com/embed/uAXCD8l6qQY" width="426" height="240" frameborder="0"></iframe>
    	</div>
    
    	<div class="videocell">
    		<h1>OUCH!!</h1>
    	    <iframe title="YouTube video player" src="http://www.youtube.com/embed/7v4PoBEIQ88" width="426" height="240" frameborder="0"></iframe>
    	</div>
    
    	<div class="videocell">
    		<h1>ILL FIGHT!!</h1>
    	    <iframe title="YouTube video player" src="http://www.youtube.com/embed/xZuEKLsOACU" width="426" height="240" frameborder="0"></iframe>
    	</div>
    
    	<div class="videocell">
    		<h1>great video</h1>
    	    <iframe title="YouTube video player" src="http://www.youtube.com/embed/NBF67np5FGk" width="426" height="240" frameborder="0"></iframe>
    	</div>
    </div>

    CSS:
    Code:
    .wrapper 
    {
    	width: 872px;
    }
    
    
    .videocell
    {
    	width: 426px;
    	float: left;
    	margin: 10px 5px 0px 5px;
    }
    
    
    .videocell h1
    {
    	font-family: Verdana, Geneva, sans-serif;
    	font-size: 14px;
    	font-weight: bold;
    }
    
    iframe
    {
    	float: left;
    }

    The width of the wrapper will need to account for the width of each cell (as in the iframe) and any padding/margin inside of / between each cell (DIV). I put 5px margin each side of the "videocell" DIV, so you have 10px margin total per cell, so each cell is the width of the iframe + 10px .
    FIZIX - Full Service Digital Agency - Engaging websites, apps and games.
    Follow us @FIZIXAgency

  3. #3
    SitePoint Enthusiast
    Join Date
    Jan 2010
    Posts
    67
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    you know ive asked a lot of questions on the internet and i have never seen a longer or more complete answer lol
    thank you for your hard work sir

  4. #4
    SitePoint Enthusiast
    Join Date
    Jan 2010
    Posts
    67
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    i fixed part of it, not using tables or paragraphs anymore, im using divs with css float property, but the titles still arent showing up, can anyone tell me why please? they're in the html check out the bottom line of the html here again for me please help me out this is so wierd
    http://th3rrc.com/videodump/

  5. #5
    Foozle Reducer ServerStorm's Avatar
    Join Date
    Feb 2005
    Location
    Burlington, Canada
    Posts
    2,699
    Mentioned
    89 Post(s)
    Tagged
    6 Thread(s)
    @chopficaro

    if you define the following in your css:

    Code:
    #paragraph h1 { 
    position: relative;
    ... other styles;
    }
    It fixes the titles. You should also think about putting a contrasting background color in this same css style to make the titles more readable.

    Also you can target all the 'videocells' like:
    Code:
    #paragraph div { ... }
    and
    #paragraph div iframe { ... }
    And then get rid of the videocell class on each of the divs.

    Steve
    ictus==""

  6. #6
    SitePoint Enthusiast
    Join Date
    Jan 2010
    Posts
    67
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for you help guys, the site looks great now
    http://th3rrc.com/


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
  •