<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml2/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Language" content="en-us" />
<title>5 column CSS Layout</title>
<style type="text/css">
html, body {
height: 100%
font: normal normal arial,helevtica,verdana,sans-serif;
color: #000;
}
#container {
height: 100%;
padding: 5px;
background: #CCC;
}
#col_one {
margin: 0; /* Applied to first column only in lieu of padding (personal thing) */
width: 18%; /* Allows for fluid design. Can be set to pixels */
float: left;
background: #cff; /* Only here so you can see the different columns */
border: thin solid #000; /* again, just so you can see the different columns */
}
#col_two {
margin: 0 0 0 10px; /* Puts a 10 pixel space between columns (left side) - think cellspacing */
width: 18%;
float: left;
background: #6cf; /* Only here so you can see the different columns */
border: thin solid #000; /* again, just so you can see the different columns */
}
#col_three {
margin: 0 0 0 10px; /* Puts a 10 pixel space between columns (left side) - think cellspacing */
width: 18%;
float: left;
background: #3cf; /* Only here so you can see the different columns */
border: thin solid #000; /* again, just so you can see the different columns */
}
#col_four {
margin: 0 0 0 10px; /* Puts a 10 pixel space between columns (left side) - think cellspacing */
width: 18%;
float: left;
background: #0cf; /* Only here so you can see the different columns */
border: thin solid #000; /* again, just so you can see the different columns */
}
#col_five {
margin: 0 0 0 10px; /* Puts a 10 pixel space between columns (left side) - think cellspacing */
width: 18%;
float: left;
background: #09c; /* Only here so you can see the different columns */
border: thin solid #000; /* again, just so you can see the different columns */
}
/* Note: adding larger margins or padding to columns requires that you decrease the width setting proportionally,
that is why the width is currently set to 18%. If you add padding to the container, the same applies. */
</style>
</head>
<body>
<div id="container">
<div id="col_one">column One column One column One column One column One column One column One column One column One column One column One column One</div>
<div id="col_two">column Two column Two column Two column Two column Two column Two column Two column Two</div>
<div id="col_three">column Three column Three column Three column Three column Three column Three column Three column Three column Three column Three</div>
<div id="col_four">Colimn Four column Four column Four column Four column Four column Four column Four column Four column Four column Four column Four column Four column Four column Four column Four column Four column Four</div>
<div id="col_five">column Five column Five column Five column Five column Five column Five column Five column Five column Five column Five column Five column Five column Five column Five column Five column Five column Five column Five column Five column Five column Five column Five column Five column Five</div>
<br style="clear: both;" /> <!-- Included to force the container to wrap the columns -->
</div>
</body>
</html>
<html>
<head>
<title></title>
<script src="js/jquery-1.4.2.min.js" type="text/javascript"></script>
<script src="js/jquery.divslideshow-1.2-min.js" type="text/javascript"></script>
<script>
$(document).ready(function(){
//make several slideshows with class selector, all slideshows shares the same parameters
$('.slideshow').divSlideShow();
//make one slideshow with id selector
$('#dss,#plug-and-play').divSlideShow({
height:350,
width:850,
arrow:"split",
loop:3,
slideContainerClass:"slide-container",
separatorClass:"separator",
controlClass:"control",
leftArrowClass:"control",
rightArrowClass:"control",
controlActiveClass:"control-active",
controlHoverClass:"control-hover",
controlContainerClass:"control-container"
});
/*
Updates:
1.2 - some core functions have been rewritten
- slideshows can now be manipulated by custom controls (can be outside the slideshow) by using the function: $.divSlideShow.slideTo(slideShow, page)
- slideShow: a DOM object or a jquery-style selector string, e.g. '#slideshow'
- page: the target page, from 0 to (maxPage - 1)
1.1 - children no longer need to have the class "slide", all immediate children will become a slide (i.e. go down one level in the DOM tree)
- removed all default css classes
- renamed parameter: innerClass to slideContainerClass
- added parameters: controlHoverClass, controlContainerClass
Requirments:
jquery-1.4.2
Paremeters [default]:
width [200] - width of contents
height [100] - height of contents (exclude controls, which adds extra height below the contents)
arrow ["begin"] - position of the left/right arrow ("begin" or "end" or "split")
loop [1] - number of loops of slideshow, set to 0 to disable slideshow
delay [5000] - time interval for slideshow, in milliseconds
leftArrowClass [""] - css class for left arrow
rightArrowClass [""] - css class for right arrow
slideContainerClass [""] - css class for contents container
controlClass [""] - css class for control buttons
controlActiveClass [""] - css class for active control buttons
controlHoverClass [""] - css class for mouse-hovered control buttons
controlContainerClass [""] - css class for the control button container
separatorClass [""] - css class for separator between contents and control buttons
*/
});
function manipulate()
{
$.divSlideShow.slideTo('#plug-and-play',$('#test_gotoPage').val()-1);
}
</script>
<style>
#plug-and-play {display:none; margin-bottom:20px; border:0px solid #aaaaaa;}
#plug-and-play .slide{cursor:pointer;font-size:12px;font-family:Tahoma;border:0px solid #cccccc; margin:5px; padding:5px;}
#plug-and-play .slide-container{}
#plug-and-play .separator{border:0px solid #aaaaaa;}
#plug-and-play .control{font-size:10px; width:12px; cursor:pointer;}
#plug-and-play .control-container{background:#bbbbbb;}
#plug-and-play .control-active{text-decoration:none;}
#plug-and-play .control-hover{text-decoration:none; font-weight:bold;}
#dss {display:none;border:0px solid black;}
#dss .slide{cursor:pointer;font-size:12px;font-family:Tahoma;border:0px solid red; margin:5px; padding:5px;}
#dss .slide-container{}
#dss .separator{border:0px solid #22cc22;}
#dss .control{font-size:10px; width:12px; cursor:pointer;}
#dss .control-container{}
#dss .control-active{text-decoration:none;}
#dss .control-hover{text-decoration:none; font-weight:bold;}
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
}
a:hover {
text-decoration: none;
}
a:active {
text-decoration: none;
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"></head>
<body>
<div id="dss" >
<div class="slide">
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td>
<?
include("inc/connect.php");
$result=mysql_query("select * from tbl_tour where tourid='2' ");
$nf = mysql_num_fields($result);
$num_rows = mysql_num_rows($result);
if($num_rows =='0'){
echo " No Data";
}else {
$dataIndb = $num_rows;
$rowFix = $dataIndb/3;
$rowFix = ceil($rowFix);
//echo "<table width=\"100%\" border=0 cellpadding=0 cellspacing=0>";
$count=0;
for($i=0; $i<$rowFix; $i++){
echo "<tr>";
for($j=0; $j<3; $j++){
echo "<td align=center>";
if($count<$dataIndb){
@mysql_data_seek($result,$count);
$r = mysql_fetch_array($result);
?>
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td><table width="260" height="150" border="0" cellpadding="0" cellspacing="0">
<tr>
<td><a href="tours_view.php?topic_id=<?php echo $r[topic_id]?>&tourid=<?php echo $r[tourid]?>" target="_parent"><img src="imgs_tour/<? echo $r[t_pic]; ?>" /></a></td>
</tr>
</table></td>
</tr>
</table>
<?
}
echo "</td>";
$count++;
}
echo "</tr>";
}
}
?></td>
</tr>
</table>
</div>
</div>
</body>
</html>
Load balance : Server 01
