Text under row of images 3

[DaSe]

Hello guys...Wonder if you could help me with this issue..
So to be concise - I have a 'div' container into which I query a series of video links. The embedded videos are aligned next to each other in the container in rows. There are 3 videos in each row. Now I would like to add text corresponding to each video under the video clips. I've been trying with different positions including floating - but as soon as I add the queried text underneath the layout of rows gets messed up. I'd appreciate any comments.

The code of the container itself is below - and that would be ok if this doesn't have to be changed.:

.tab_content {
	padding: 20px;
	font-size: 0.9em;
	color:#FFFFFF;
	font-family:Arial, Helvetica, sans-serif;
	overflow-y: scroll;
	overflow-y:auto;
	overflow-x:auto;
	height:500px;
	min-width:400px;
	
	
	
	
}

Thanks..

 

[vacunita]

How are you setting the video images?

Would surrounding the videos with a div and placing the text inside the div be an option?

<div class="videobox">
 <video></video>
 <p>video Text</p>
</div>

.videobox{
float:left;
...
}

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Behind the Web, Tips and Tricks for Web Development.

http://behindtheweb.blogspot.com/

 

[DaSe]

Thanks, the option that worked for me was to place the links into a single table row and float them left. Whereas the text is embedded into the object area. All the layout is done in PHP variable ( from queries ) that's why it takes a bit more work.

The working solution seems to be a div in front of the object area and the last $tube_txt that goes under each clip:

$tube_display .= '<div id="tube_layout"><object width="232"....
(...).$tube_txt.'</div>';

----
#tube_layout{ 
float:left; }

It works but I wanted to eradicate tables and rely on css...but that seems to be more time consuming in this case. Thanks Phil for your reply - I will mind it for later use..

 

[vacunita]

Technically speaking, my solution is your solution, except I don't seer where you would need a table for it though.


Just surround your $tube_text with a paragraph. And make sure the div that will hold the tubes is wide enough to accommodate 3 of them.


----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Behind the Web, Tips and Tricks for Web Development.

http://behindtheweb.blogspot.com/

 

[Vragabond]

Also note that you shouldn't be using the same id for many objects on the page. Every id must be unique on the page. A lot of problems can arise from having more than one element with the same id.

You can easily rectify this by changing the id to class.

[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]

 

[DaSe]

Hey guys - here's more of what I meant:

//PHP
$tube_display .= '<div id="tube_layout"><object width="232" height="167"><param name="movie" value="[URL unfurl="true"]http://www.youtube.com/v/{idt}&hl=en_US&fs=1&amp;rel=0&amp;color1=0x000000&amp;color2=0x550000&autohide=1&showinfo=0"></param><param[/URL] name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="[URL unfurl="true"]http://www.youtube.com/v/{idt}&hl=en_US&fs=1&amp;color1=0x000000&amp;rel=0&amp;color2=0x550000&autohide=1&showinfo=0"[/URL] type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="232" height="167"></embed></object><br/><span id="titles">'.$tube_txt[$i].'</span><br/></div>'; 
--------
//STYLE 
#tube_layout
{ float:left; }
--------
//HTML
<div id="tab3" class="tab_content" align="center"><br/><br/><br/>
<table id="tube_table" border="0" background="images/bgmain.jpg" bordercolor="#666666" cellspacing="0" cellpadding="5"><tr><td><?php echo $tube_display; ?></td></tr></table> 
</div>

It was quite difficult to arrange $tube_display that will show the text underneath the links without using table. I actually chose the table in the end but it's not the best solution. The problem to position $tube_txt that will layout under each link - when I tried to implement it without the table - it usually messed up it, hence my question - but for now it's working fine. I also have quite a lot of divs ( parent, children ) that I cannot really modify..so the more that the issue.

 

[Vragabond]

There is still no need to use the table and there still seem to be multiple ids with the same value on your page. Am I understanding correctly that inside this table, you have many 'tube_layout' divs, each of them containing a video and a caption? If that is true, then:

1. Change the 'tube_layout' from id to class.
2. Remove the table.
3. Clear the floats.

[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]

 

[vacunita]

I agree with Vrag. No real need for a table and id's must be unique.

Also remember that floated elements will float on thew same line as long as there is space for them.

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Behind the Web, Tips and Tricks for Web Development.

http://behindtheweb.blogspot.com/

 

[DaSe]

Thanks guys....what do you mean by saying the same id's ? None of my id's are the same..where do you see the same ids ? One is 'tube_layout' and the other 'tube_table' the other 'titles'. Still the problem was to layout them in a div. You see - tube_display lays out videos in a row and that's fine. The videos are floated left also. But as soon as you try to add 'tube_text' it messes everything. So the problem was as to where implement 'tube_text'. In other words the same layout messed things up without the table and does not when in a table row now...this is interesting. But I will pay attention to your code. I've been trying to float 'tube_text' making some space ,implementing breaks - but still couldn't manage to make them lay under the clips wihout the table. That's insteresting...thanks for your comments - as I said I'll mind it next time...

 

[vacunita]

So your div tube_layout is a single div. There aren't any more divs like it? We thought you were repeating the tube_layout div for each video.

<div id="tube_layout"><object>...</object></div>
<div id="tube_layout"><object>...</object></div>
<div id="tube_layout"><object>...</object></div>,...

Which is technically what you want to do. Put each set of video and text in a div and float that. Without repeating ID's.

<div id="tube_wrapper">
<div [red]class[/red]="tube_block"><object>...</object><p>Video text</p></div>
<div [red]class[/red]="tube_block"><object>...</object><p>Video text</p></div>
<div [red]class[/red]="tube_block"><object>...</object><p>Video text</p></div>...
</div>

And then float the tube_blocks.

.tube_block{
float:left;
}

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Behind the Web, Tips and Tricks for Web Development.

http://behindtheweb.blogspot.com/

 

[DaSe]

Oh I see - no, I haven't put a single div into each link. The links are inserted ino mysql in order by an admin. The PHP code queries the links and renders them into embedded objects in id order. Hence the piece of code: '$tube_display .= (...)'. So that is absolutely fine. The next thing was to query the corresponding titles from mysql and layout them underneath each clip. Again, they're queried into an array in id order. That's fine. And the problem was to arrange the PHP code of the titles: '$tube_txt[] .= (...) $tube_txt[$i]' with the clips. So I tried to add:

$tube_display .= "<div id='tube'>".$tube_txt."</div";

...like that - and tried different positioning or implementations. Nothing worked. So at the end - the thing that fixed it was to put '$tube_txt' inside '<object>(...)</object>' together with the queried clips. And again, that only worked for me when I added a table at the 'echo' code in an html div. I always find positioning text under the rows from PHP quite difficult and there seems to be always an issue with it...hence, my thread. I'm very glad ( as usual ) with your comments. Thanks..

 

[Vragabond]

I think it is time for you to show us the final html code that is generated from the php and can be found if you look at the source code of the page you see in the browser. We cannot keep guessing what your php script is creating.

[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]

 

[DaSe]

I have modified the code already - but as far as I remember it was like that:

//PHP

//Video
$video_data = mysqli_query($connect,"SELECT * FROM videos ORDER BY videos_id DESC ");

//Tube loop
while ($tube_row = mysqli_fetch_assoc($video_data)) {
$url[] .= $tube_row['videos_link'];
$tube_txt[] .= $tube_row['videos_txt'];
}

$tube_display .= '<div id="tube_layout"><object width="232" height="167"><param name="movie" value="[URL unfurl="true"]http://www.youtube.com/v/{idt}&hl=en_US&fs=1&amp;rel=0&amp;color1=0x000000&amp;color2=0x550000&autohide=1&showinfo=0"></param><param[/URL] name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="[URL unfurl="true"]http://www.youtube.com/v/{idt}&hl=en_US&fs=1&amp;color1=0x000000&amp;rel=0&amp;color2=0x550000&autohide=1&showinfo=0"[/URL] type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="232" height="167"></embed></object></div>'; 

$tube_display .= $tube_txt; // HERE IS / WAS THE ISSUE

//HTML

<div id="tab1" class="tab_content" align="left">

       
        
        <?php 
while ($news_row = mysqli_fetch_array($news_data)) { 
extract($news_row);
echo "<table id='table_news' cellspacing='0' cellpadding='5'><tr><td id='td_date'>";
echo "<span style='font-size:11px;color:#ffffff;white-space:nowrap;background-color:#440000'>&nbsp;".$news_date."&nbsp;</span>&nbsp;";
echo "</td></tr><br/>";
echo "<tr><td width='100%'>";
echo  $news_text;
echo "</tr></td></table>";
}; ?>
</div>

//CSS

.tab_content {
	padding: 20px;
	font-size: 0.9em;
	color:#FFFFFF;
	font-family:Arial, Helvetica, sans-serif;
	overflow-y: scroll;
	overflow-y:auto;
	overflow-x:auto;
	height:500px;
	min-width:400px;

	
}

Cheers..

 

[Vragabond]

That is still not very helpful. The only way we can resolve this is by seeing the final html code.

[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]

 

[DaSe]

No - there is enough to resolve the issue - sorry..simply, because there is no other HTML code left..I on the other hand managed to workaround it only by using a table position. I cannot understand what else you're asking for..

 

[Vragabond]

What you have provided is php that runs on the server and delivers html code that browsers read. I don't want the php code, I want the same html code that the browsers get once php has been processed. This is the code you can get by selecting 'view source' in your browser. This code will show us how your final html is constructed and will help us identify why you needed to use a table.

If you cannot provide the html code, could you provide the link to the page in question?

[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]

 

[DaSe]

I see, the source as you asked is :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "[URL unfurl="true"]http://www.w3.org/TR/html4/loose.dtd">[/URL]
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>...</title>
<link rel="stylesheet" type="text/css" href="css.css" />
<link rel="shortcut icon" href="images/favicon2.ico" type="image/x-icon" />
<link rel="icon" href="images/favicon2.ico" type="image/x-icon" />
<link rel="apple-touch-icon" href="images/favicon2.ico" />
<meta name="keywords" content="..."/>
<meta name="description" content="..."/>
<meta name="robots" content="index,nofollow" />
<meta name="robots" content="nocache"/>
<META name="robots" content="noarchive"/>
<![if !IE]>
<link rel="stylesheet" type="text/css" href="cssFF.css" />
<![endif]>
<script type="text/javascript" src="js/jquery.js"></script> 
<script type="text/javascript" src="js/tabs.js"></script> 
<script type="text/javascript" src="xml_player/AC_RunActiveContent.js"></script> 
<style type="text/css">
#table_news{
text-align:left;
}

#tube_table {
background-attachment:fixed;
background-position: center;
margin-left:20px;

}

#titles{
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:11px;
font-weight: bold;
font-style: italic;
}

#tube_layout{
padding:5px;
float: left;

}

#link{
color:#ffffff;
position:absolute;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:10px;
top:624px;
width:100%;


}

a#link2:hover { 
color:#cccccc; }



</style>
 <script type="text/javascript">
    // Image preloading
    var img1 = new Image();
    img1.src = 'images/back.jpg';

</script>
</head>
<body oncontextmenu="return false;"> 
<br/>
<div id="tab_main" align="center">
<ul id="nav" class="tabs">
<li style="background:none"><img src="images/side_bars2.png" width="241" height="10" style="vertical-align: middle"/></li>
<li><a href="#tab1" hidefocus="true">News</a></li>
<li><a href="#tab2" hidefocus="true">Shop</a></li>
<li><a href="#tab3" hidefocus="true">Videos</a></li>
<li><a href="#tab4" hidefocus="true">Photos</a></li>
<li><a href="#tab5" hidefocus="true">About</a></li>
<li style=" background:none"><img src="images/side_bars.png" width="241" height="10" style="vertical-align: middle;"/></li>
</ul>
</div>
<div class="tab_container" align="center">
<div id="tab1" class="tab_content" align="left">

        <!--Content--> 
        
        <table id='table_news' cellspacing='0' cellpadding='5'><tr><td id='td_date'><span style='font-size:11px;color:#ffffff;white-space:nowrap;background-color:#440000'>&nbsp;2011-06-01&nbsp;</span>&nbsp;</td></tr><br/><tr><td width='100%'>The second is <a href="[URL unfurl="true"]http://www.youtube.com/watch?v=4CSaaLhk3Fo&feature=related"[/URL] target="_blank" style='color:#ffffaa;font-family:arial;font-size:12px'>[ click ]</a></tr></td></table><table id='table_news' cellspacing='0' cellpadding='5'><tr><td id='td_date'><span style='font-size:11px;color:#ffffff;white-space:nowrap;background-color:#440000'>&nbsp;2011-05-27&nbsp;</span>&nbsp;</td></tr><br/><tr><td width='100%'>News test..</tr></td></table>      
</div>
<div id="tab2" class="tab_content" align="center">
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml"[/URL] xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>preview</title>
<script language="javascript">AC_FL_RunContent = 0;</script>
<script src="AC_RunActiveContent.js" language="javascript"></script>
</head>
<body bgcolor="#000000">
<!--url's used in the movie-->
<!--text used in the movie-->
<!--
0

0.00

-->
<!-- saved from url=(0013)about:internet -->
<script language="javascript">
	if (AC_FL_RunContent == 0) {
		alert("This page requires AC_RunActiveContent.js.");
	} else {
		AC_FL_RunContent(
			'codebase', '[URL unfurl="true"]http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0',[/URL]
			'width', '100%',
			'height', '100%',
			'src', 'preview',
			'quality', 'best',
			'pluginspage', '[URL unfurl="true"]http://www.macromedia.com/go/getflashplayer',[/URL]
			'align', 'middle',
			'play', 'true',
			'loop', 'false',
			'scale', 'noscale',
			'wmode', 'window',
			'devicefont', 'false',
			'id', 'preview',
			'bgcolor', '#000000',
			'name', 'preview',
			'menu', 'false',
			'allowFullScreen', 'false',
			'allowScriptAccess','sameDomain',
			'movie', 'preview',
			'salign', 'b'
			); //end AC code
	}
</script>
<noscript>
	<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="[URL unfurl="true"]http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0"[/URL] width="100%" height="100%" id="preview" align="middle">
	<param name="allowScriptAccess" value="sameDomain" />
	<param name="allowFullScreen" value="false" />
	<param name="movie" value="preview.swf" /><param name="loop" value="false" /><param name="menu" value="false" /><param name="quality" value="best" /><param name="scale" value="noscale" /><param name="bgcolor" value="#000000" />	<embed src="preview.swf" loop="false" menu="false" quality="best" scale="noscale" bgcolor="#000000" width="100%" height="100%" name="preview" align="middle" allowScriptAccess="sameDomain" allowFullScreen="false" type="application/x-shockwave-flash" pluginspage="[URL unfurl="true"]http://www.macromedia.com/go/getflashplayer"[/URL] />
	</object>
</noscript>
</body>
</html>
</div>
<div id="tab3" class="tab_content" align="center"><br/><br/><br/>
        <!-- Content --> <table id="tube_table" border="0" background="" bordercolor="#666666" cellspacing="0" cellpadding="5"><tr><td><div id="tube_layout"><object width="232" height="167"><param name="movie" value="[URL unfurl="true"]http://www.youtube.com/v/BN9-K0aZXRg&hl=en_US&fs=1&amp;rel=0&amp;color1=0x000000&amp;color2=0x550000&autohide=1&showinfo=0"></param><param[/URL] name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="[URL unfurl="true"]http://www.youtube.com/v/BN9-K0aZXRg&hl=en_US&fs=1&amp;color1=0x000000&amp;rel=0&amp;color2=0x550000&autohide=1&showinfo=0"[/URL] type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="232" height="167"></embed></object><br/><span id="titles">new clip</span><br/></div><div id="tube_layout"><object width="232" height="167"><param name="movie" value="[URL unfurl="true"]http://www.youtube.com/v/BN9-K0aZXRg&hl=en_US&fs=1&amp;rel=0&amp;color1=0x000000&amp;color2=0x550000&autohide=1&showinfo=0"></param><param[/URL] name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="[URL unfurl="true"]http://www.youtube.com/v/BN9-K0aZXRg&hl=en_US&fs=1&amp;color1=0x000000&amp;rel=0&amp;color2=0x550000&autohide=1&showinfo=0"[/URL] type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="232" height="167"></embed></object><br/><span id="titles">new clip</span><br/></div></td></tr></table> 
</div>
<div id="tab4" class="tab_content" align="center"><br/><br/><br/><br/><br/><br/><br/>
        <!-- Content --> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">[/URL]
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml">[/URL]
<head>
<script type="text/javascript" src="photo_slider/js/jquery.scrollTo.js"></script>
<script>

$(document).ready(function() {

	//Speed of the slideshow
	var speed = 5000;
	
	//You have to specify width and height in #slider CSS properties
	//After that, the following script will set the width and height accordingly
	$('#mask-gallery, #gallery li').width($('#slider').width());	
	$('#gallery').width($('#slider').width() * $('#gallery li').length);
	$('#mask-gallery, #gallery li, #mask-excerpt, #excerpt li').height($('#slider').height());
	
	//Assign a timer, so it will run periodically
	var run = setInterval('newsscoller(0)', speed);	
	
	$('#gallery li:first, #excerpt li:first').addClass('selected');

	//Pause the slidershow with clearInterval
	$('#btn-pause').click(function () {
		clearInterval(run);
		return false;
	});

	//Continue the slideshow with setInterval
	$('#btn-play').click(function () {
		run = setInterval('newsscoller(0)', speed);	
		return false;
	});
	
	//Next Slide by calling the function
	$('#btn-next').click(function () {
		newsscoller(0);	
		return false;
	});	

	//Previous slide by passing prev=1
	$('#btn-prev').click(function () {
		newsscoller(1);	
		return false;
	});	
	
	//Mouse over, pause it, on mouse out, resume the slider show
	$('#slider').hover(
	
		function() {
			clearInterval(run);
		}, 
		function() {
			run = setInterval('newsscoller(0)', speed);	
		}
	); 	
	
});


function newsscoller(prev) {

	//Get the current selected item (with selected class), if none was found, get the first item
	var current_image = $('#gallery li.selected').length ? $('#gallery li.selected') : $('#gallery li:first');
	var current_excerpt = $('#excerpt li.selected').length ? $('#excerpt li.selected') : $('#excerpt li:first');

	//if prev is set to 1 (previous item)
	if (prev) {
		
		//Get previous sibling
		var next_image = (current_image.prev().length) ? current_image.prev() : $('#gallery li:last');
		var next_excerpt = (current_excerpt.prev().length) ? current_excerpt.prev() : $('#excerpt li:last');
	
	//if prev is set to 0 (next item)
	} else {
		
		//Get next sibling
		var next_image = (current_image.next().length) ? current_image.next() : $('#gallery li:first');
		var next_excerpt = (current_excerpt.next().length) ? current_excerpt.next() : $('#excerpt li:first');
	}

	//clear the selected class
	$('#excerpt li, #gallery li').removeClass('selected');
	
	//reassign the selected class to current items
	next_image.addClass('selected');
	next_excerpt.addClass('selected');

	//Scroll the items
	$('#mask-gallery').scrollTo(next_image, 800);		
	$('#mask-excerpt').scrollTo(next_excerpt, 800);					
	
}



</script>

<style>




#slider {

	/* You MUST specify the width and height */
	width:352px;
	height:240px;
	position:relative;	
	overflow:hidden;
}

#mask-gallery {
	
	overflow:hidden;	
}

#gallery {
	
	/* Clear the list style */
	list-style:none;
	margin:0;
	padding:0;
	
	z-index:0;
	
	/* width = total items multiply with #mask gallery width */
	width:900px;
	overflow:hidden;
}

	#gallery li {

		
		/* float left, so that the items are arrangged horizontally */
		float:left;
	}


#mask-excerpt {
	
	/* Set the position */
	position:absolute;	
	top:0;
	left:0;
	z-index:500px;
	
	/* width should be lesser than #slider width */
	width:100px;
	overflow:hidden;	
	

}
	
#excerpt {
	/* Opacity setting for different browsers */
	filter:alpha(opacity=60);
	-moz-opacity:0.6;  
	-khtml-opacity: 0.6;
	opacity: 0.6;  
	
	/* Clear the list style */
	list-style:none;
	margin:0;
	padding:0;
	
	/* Set the position */
	z-index:10;
	position:absolute;
	top:0;
	left:0;
	
	/* Set the style */
	width:100px;
	background-color:#000;
	overflow:hidden;
	font-family:arial;
	font-size:10px;
	color:#fff;	
}

	#excerpt li {
		padding:5px;
	}
	


.clear {
	clear:both;	
}

#btn-prev , #btn-pause , #btn-play , #btn-next{
color:#aaaaaa;

}
</style>
</head>

<body>
<div id="debug"></div>

<div id="slider">

	<div id="mask-gallery">
	<ul id="gallery">
		<li><img src="photo_slider/images/pier1.jpg" width="352" height="240" alt=""/></li>
		<li><img src="photo_slider/images/pier2.jpg" width="352" height="240" alt=""/></li>
		<li><img src="photo_slider/images/pier3.jpg" width="352" height="240" alt=""/></li>
       
	</ul>
	</div>
    
	
	<div id="mask-excerpt">
	<ul id="excerpt">
		<li>Test image 1</li>
		<li>Test image 2</li>
		<li>Test image 3</li>
       
        
        
	</ul>
	</div>

</div>
<br/>
<div id="buttons">
	<a href="#" hidefocus="true" id="btn-prev">&bull; prev</a> 
	<a href="#" hidefocus="true" id="btn-pause">pause</a> 
	<a href="#" hidefocus="true" id="btn-play">play</a> 
	<a href="#" hidefocus="true" id="btn-next">next &bull;</a>
</div>


<div class="clear"></div>
</body>
</html>
</div>
<div id="tab5" class="tab_content" align="center">
        <!-- Content -->      <table id='table_news' cellspacing='0' cellpadding='5'><tr><td id='td_date'><tr><td width='100%'>About info...</tr></td></table></div>
</div>
<div align="center" id="link">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Site by&nbsp;&nbsp;<img src="images/hdm.jpg" width="12" height="12" align="absbottom"></img>&nbsp;<a href="[URL unfurl="true"]http://www...com"[/URL] id="link2">...</a>&nbsp;&copy;2011</div>
</body>
</html>

The source shows / decodes PHP variables - hence there are so much of it. I mean shows PHP variables implemented into HTML as well...Regards.

 

[audiopro]

You need to sort out the basic issues before going any further.
You have numerous start and end <body> and <html> tags which should only appear once in the entire document.

Keith

http://www.studiosoft.co.uk

 

[DaSe]

Hey - no - it's the source code that shows the multiple body / html tags. All the page is neat and the extra javascript and php codes are placed in different folders. But the source shows / packs everything into one source code. I'll sort it out for you...

 

[DaSe]

Here's html and css from index page. They are all neat:

//HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "[URL unfurl="true"]http://www.w3.org/TR/html4/loose.dtd">[/URL]
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>...</title>
<link rel="stylesheet" type="text/css" href="css.css" />
<link rel="shortcut icon" href="images/favicon2.ico" type="image/x-icon" />
<link rel="icon" href="images/favicon2.ico" type="image/x-icon" />
<link rel="apple-touch-icon" href="images/favicon2.ico" />
<meta name="keywords" content="..."/>
<meta name="description" content="..."/>
<meta name="robots" content="index,nofollow" />
<meta name="robots" content="nocache"/>
<META name="robots" content="noarchive"/>
<![if !IE]>
<link rel="stylesheet" type="text/css" href="cssFF.css" />
<![endif]>
<script type="text/javascript" src="js/jquery.js"></script> 
<script type="text/javascript" src="js/tabs.js"></script> 
<script type="text/javascript" src="xml_player/AC_RunActiveContent.js"></script> 
<style type="text/css">
#table_news{
text-align:left;
}

#tube_table {
background-attachment:fixed;
background-position: center;
margin-left:20px;

}

#titles{
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:11px;
font-weight: bold;
font-style: italic;
}

#tube_layout{
padding:5px;
float: left;

}

#link{
color:#ffffff;
position:absolute;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:10px;
top:624px;
width:100%;


}

a#link2:hover { 
color:#cccccc; }



</style>
 <script type="text/javascript">
    // Image preloading
    var img1 = new Image();
    img1.src = 'images/back.jpg';

</script>
</head>
<body oncontextmenu="return false;"> 
<br/>
<div id="tab_main" align="center">
<ul id="nav" class="tabs">
<li style="background:none"><img src="images/side_bars2.png" width="241" height="10" style="vertical-align: middle"/></li>
<li><a href="#tab1" hidefocus="true">News</a></li>
<li><a href="#tab2" hidefocus="true">Shop</a></li>
<li><a href="#tab3" hidefocus="true">Videos</a></li>
<li><a href="#tab4" hidefocus="true">Photos</a></li>
<li><a href="#tab5" hidefocus="true">About</a></li>
<li style=" background:none"><img src="images/side_bars.png" width="241" height="10" style="vertical-align: middle;"/></li>
</ul>
</div>
<div class="tab_container" align="center">
<div id="tab1" class="tab_content" align="left">

        <!--Content--> 
        
        <?php 
	
echo "<table id='table_news' cellspacing='0' cellpadding='5'><tr><td id='td_date'>";
echo "<span style='font-size:11px;color:#ffffff;white-space:nowrap;background-color:#440000'>&nbsp;".$news_date."&nbsp;</span>&nbsp;";
echo "</td></tr><br/>";
echo "<tr><td width='100%'>";
echo  $news_text;
echo "</tr></td></table>";
		}; ?>
      
</div>
<div id="tab2" class="tab_content" align="center">
<?php include_once ("index_shop.php"); ?>
</div>
<div id="tab3" class="tab_content" align="center"><br/><br/><br/>
        <!-- Content --> 
<table id="tube_table" border="0" background="" bordercolor="#666666" cellspacing="0" cellpadding="5"><tr><td>
<?php echo $tube_display; ?>//THE ISSUE HERE
</td></tr></table> 
</div>

<div id="tab4" class="tab_content" align="center"><br/><br/><br/><br/><br/><br/><br/>
        <!-- Content --> 

<?php include_once("photo_slider/index.html"); ?>

</div>

<div id="tab5" class="tab_content" align="center">
        <!-- Content -->      
<?php 
echo "<table id='table_news' cellspacing='0' cellpadding='5'><tr><td id='td_date'>";
echo "<tr><td width='100%'>";
echo  $about_text;
echo "</tr></td></table>";
		} ?>
</div>
</div>
<div align="center" id="link">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Site by&nbsp;&nbsp;<img src="images/hdm.jpg" width="12" height="12" align="absbottom"></img>&nbsp;<a href="[URL unfurl="true"]http://www...com"[/URL] id="link2">...</a>&nbsp;&copy;2011</div>
</body>
</html>

//END HTML
//CSS




body {
background-image:url(images/bgmain.jpg);
background-attachment: fixed;
background-color:#350000;
background-repeat: no-repeat;
background-position: center;
margin-top:5px;
margin-left: auto;
margin-right:auto;
position: relative;



}

a:link {
	text-decoration: none;
	color:#ffffff;
	outline:none;
}
a:visited {
	text-decoration: none;
	color:#ffffff;
	outline:none;
	
}
a:hover {
	text-decoration: none;
	color: #ffffff;
	 
	outline:none;
}
a:active {
	text-decoration: none;
	color:#ffffff; 
	outline:none;
} 

ul#nav {
list-style-type:none;
margin:0px;
padding:0px;

}

ul#nav li{
display:inline;
margin:6px;

}

ul#nav li a{

padding:4px 20px;
padding-top:0px;
padding-bottom:0px;
margin:0px 0px;
border: solid 1px; 
border-color:#aaaaaa;
border-bottom:solid 1px;
text-decoration:none;
text-align:center;
display: inline-block;





}
/*tab hover modifications*/
ul.tabs li {
background-image:url(images/tab_back_green.jpg);
background-position:center;
display:inline-block;

	}


ul.tabs li a:hover {
background-color:#440000;

}

 html ul.tabs li.active, html ul.tabs li.active a:hover {
 
 background:#650000;
 display: inline-block;



	
}

#tab_main{
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
white-space:nowrap;


}



.tab_container {
	
	border: 1px solid #aaaaaa;
	
	margin-top:20px;
	opacity:0.90;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=90)"; // first!
	filter: alpha(opacity=90);
	background-color: #000000;
	margin-right:auto;
	margin-left:auto;
	width:815px;
	width:fixed;
	position:relative;
	


}


.tab_content {
	padding: 20px;
	font-size: 0.9em;
	color:#FFFFFF;
	font-family:Arial, Helvetica, sans-serif;
	overflow-y: scroll;
	overflow-y:auto;
	overflow-x:auto;
	height:500px;
	min-width:400px;
	
	
	
	
}

.tab_container { 

opacity:1;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; // first!
	filter: alpha(opacity=100);
	}
//END CSS

Thanks..