Displaying Infoboxes from left-to-right

[osclover]

Hello,

 

I want my site's infoboxes NOT to move from top to bottom , but from left to write in the footer. Just like the 3 boxes displayed at the bottom in http://store.trendystore.com/.

 

I scanned thru the coding of various files including column_left.php file, some files of the includes/boxes/ folder and classes/boxes.php but it was all in vain. I had thought i'll find a <br> tag or <tr> tag , removing which would make the 2nd box not to get displayed on the next line, but just right side of the 1st box.

 

Can someone please help me as to how to make the boxes display from left-to-right instead of from top-to-botoom? I am pasting the coding of my includes/boxes/classes.php because I am 99% sure this is the file which needs to be modified

 

 

<?php
/*
 $Id: boxes.php,v 1.33 2003/06/09 22:22:50 hpdl Exp $

 osCommerce, Open Source E-Commerce Solutions
 http://www.oscommerce.com

 Copyright (c) 2003 osCommerce

 Released under the GNU General Public License
*/

 class tableBox {
var $table_border = '0';
var $table_width = '100%';
var $table_cellspacing = '0';
var $table_cellpadding = '2';
var $table_parameters = '';
var $table_row_parameters = '';
var $table_data_parameters = '';

// class constructor
function tableBox($contents, $direct_output = false) {
  $tableBox_string = '<table border="' . tep_output_string($this->table_border) . '" width="' . tep_output_string($this->table_width) . '" cellspacing="' . tep_output_string($this->table_cellspacing) . '" cellpadding="' . tep_output_string($this->table_cellpadding) . '"';
  if (tep_not_null($this->table_parameters)) $tableBox_string .= ' ' . $this->table_parameters;
  $tableBox_string .= '>' . "\n";

  for ($i=0, $n=sizeof($contents); $i<$n; $i++) {
	if (isset($contents[$i]['form']) && tep_not_null($contents[$i]['form'])) $tableBox_string .= $contents[$i]['form'] . "\n";
	$tableBox_string .= '  <tr';
	if (tep_not_null($this->table_row_parameters)) $tableBox_string .= ' ' . $this->table_row_parameters;
	if (isset($contents[$i]['params']) && tep_not_null($contents[$i]['params'])) $tableBox_string .= ' ' . $contents[$i]['params'];
	$tableBox_string .= '>' . "\n";

	if (isset($contents[$i][0]) && is_array($contents[$i][0])) {
	  for ($x=0, $n2=sizeof($contents[$i]); $x<$n2; $x++) {
		if (isset($contents[$i][$x]['text']) && tep_not_null($contents[$i][$x]['text'])) {
		  $tableBox_string .= '	<td';
		  if (isset($contents[$i][$x]['align']) && tep_not_null($contents[$i][$x]['align'])) $tableBox_string .= ' align="' . tep_output_string($contents[$i][$x]['align']) . '"';
		  if (isset($contents[$i][$x]['params']) && tep_not_null($contents[$i][$x]['params'])) {
			$tableBox_string .= ' ' . $contents[$i][$x]['params'];
		  } elseif (tep_not_null($this->table_data_parameters)) {
			$tableBox_string .= ' ' . $this->table_data_parameters;
		  }
		  $tableBox_string .= '>';
		  if (isset($contents[$i][$x]['form']) && tep_not_null($contents[$i][$x]['form'])) $tableBox_string .= $contents[$i][$x]['form'];
		  $tableBox_string .= $contents[$i][$x]['text'];
		  if (isset($contents[$i][$x]['form']) && tep_not_null($contents[$i][$x]['form'])) $tableBox_string .= '</form>';
		  $tableBox_string .= '</td>' . "\n";
		}
	  }
	} else {
	  $tableBox_string .= '	<td';
	  if (isset($contents[$i]['align']) && tep_not_null($contents[$i]['align'])) $tableBox_string .= ' align="' . tep_output_string($contents[$i]['align']) . '"';
	  if (isset($contents[$i]['params']) && tep_not_null($contents[$i]['params'])) {
		$tableBox_string .= ' ' . $contents[$i]['params'];
	  } elseif (tep_not_null($this->table_data_parameters)) {
		$tableBox_string .= ' ' . $this->table_data_parameters;
	  }
	  $tableBox_string .= '>' . $contents[$i]['text'] . '</td>' . "\n";
	}

	$tableBox_string .= '  </tr>' . "\n";
	if (isset($contents[$i]['form']) && tep_not_null($contents[$i]['form'])) $tableBox_string .= '</form>' . "\n";
  }

  $tableBox_string .= '</table>' . "\n";

  if ($direct_output == true) echo $tableBox_string;

  return $tableBox_string;
}
 }

 class infoBox extends tableBox {
function infoBox($contents) {
  $info_box_contents = array();
  $info_box_contents[] = array('text' => $this->infoBoxContents($contents));
  $this->table_cellpadding = '1';
  $this->table_parameters = 'class="infoBox"';
  $this->tableBox($info_box_contents, true);
}

function infoBoxContents($contents) {
  $this->table_cellpadding = '3';
  $this->table_parameters = 'class="infoBoxContents"';
  $info_box_contents = array();
  $info_box_contents[] = array(array('text' => tep_draw_separator('pixel_trans.gif', '100%', '1')));
  for ($i=0, $n=sizeof($contents); $i<$n; $i++) {
	$info_box_contents[] = array(array('align' => (isset($contents[$i]['align']) ? $contents[$i]['align'] : ''),
									   'form' => (isset($contents[$i]['form']) ? $contents[$i]['form'] : ''),
									   'params' => 'class="boxText"',
									   'text' => (isset($contents[$i]['text']) ? $contents[$i]['text'] : '')));
  }
  $info_box_contents[] = array(array('text' => tep_draw_separator('pixel_trans.gif', '100%', '1')));
  return $this->tableBox($info_box_contents);
}
 }

 class infoBoxHeading extends tableBox {
function infoBoxHeading($contents, $left_corner = true, $right_corner = true, $right_arrow = false) {
  $this->table_cellpadding = '0';

  if ($left_corner == true) {
	$left_corner = tep_image(DIR_WS_IMAGES . 'infobox/corner_left.gif');
  } else {
	$left_corner = tep_image(DIR_WS_IMAGES . 'infobox/corner_right_left.gif');
  }
  if ($right_arrow == true) {
	$right_arrow = '<a href="' . $right_arrow . '">' . tep_image(DIR_WS_IMAGES . 'infobox/arrow_right.gif', ICON_ARROW_RIGHT) . '</a>';
  } else {
	$right_arrow = '';
  }
  if ($right_corner == true) {
	$right_corner = $right_arrow . tep_image(DIR_WS_IMAGES . 'infobox/corner_right.gif');
  } else {
	$right_corner = $right_arrow . tep_draw_separator('pixel_trans.gif', '11', '14');
  }

  $info_box_contents = array();
  $info_box_contents[] = array(array('params' => 'height="14" class="infoBoxHeading"',
									 'text' => $left_corner),
							   array('params' => 'width="100%" height="14" class="infoBoxHeading"',
									 'text' => $contents[0]['text']),
							   array('params' => 'height="14" class="infoBoxHeading" nowrap',
									 'text' => $right_corner));

  $this->tableBox($info_box_contents, true);
}
 }

 class contentBox extends tableBox {
function contentBox($contents) {
  $info_box_contents = array();
  $info_box_contents[] = array('text' => $this->contentBoxContents($contents));
  $this->table_cellpadding = '1';
  $this->table_parameters = 'class="infoBox"';
  $this->tableBox($info_box_contents, true);
}

function contentBoxContents($contents) {
  $this->table_cellpadding = '4';
  $this->table_parameters = 'class="infoBoxContents"';
  return $this->tableBox($contents);
}
 }

 class contentBoxHeading extends tableBox {
function contentBoxHeading($contents) {
  $this->table_width = '100%';
  $this->table_cellpadding = '0';

  $info_box_contents = array();
  $info_box_contents[] = array(array('params' => 'height="14" class="infoBoxHeading"',
									 'text' => tep_image(DIR_WS_IMAGES . 'infobox/corner_left.gif')),
							   array('params' => 'height="14" class="infoBoxHeading" width="100%"',
									 'text' => $contents[0]['text']),
							   array('params' => 'height="14" class="infoBoxHeading"',
									 'text' => tep_image(DIR_WS_IMAGES . 'infobox/corner_right_left.gif')));

  $this->tableBox($info_box_contents, true);
}
 }

 class errorBox extends tableBox {
function errorBox($contents) {
  $this->table_data_parameters = 'class="errorBox"';
  $this->tableBox($contents, true);
}
 }

 class productListingBox extends tableBox {
function productListingBox($contents) {
  $this->table_parameters = 'class="productListing"';
  $this->tableBox($contents, true);
}
 }
?>

[osclover]

No one? :(

[osclover]

Rephrasing

========

 

In the default oscommerce script, the infoboxes of left most column and the right most column are displayed in a top-down manner. Like they all move from top to the bottom of the main website. The current approach is like this:

 

ӱ

ӱ

ӱ

ӱ

ӱ

ӱ

 

 

i.e. the boxes move downwards.

 

I want that in my website the infoboxes get displayed in one row (or possibly 2 rows) moving from left of the website to the right of the website. Something like this:

 

ӱ ӱ ӱ ӱ ӱ ӱ ӱ ӱ ӱ ӱ ӱ ӱ ӱ ӱ ӱ ӱ ӱ ӱ ӱ

 

I tried to acheive this goal by working with various files but I could not do it. I would be grateful if someone could help me out in this regard. I just need to know what causes the line break so that next infoboxes is coming in the next line after the last one. I just need to figure that out; the rest I can do on my own. I'll be calling the infoboxes in the footer.php file. But thats the easy part. I'm worried about what is causing this line break.

[wheeloftime]

Rephrasing

========

 

In the default oscommerce script, the infoboxes of left most column and the right most column are displayed in a top-down manner. Like they all move from top to the bottom of the main website. The current approach is like this:

 

ӱ

ӱ

ӱ

ӱ

ӱ

ӱ

i.e. the boxes move downwards.

 

I want that in my website the infoboxes get displayed in one row (or possibly 2 rows) moving from left of the website to the right of the website. Something like this:

 

ӱ ӱ ӱ ӱ ӱ ӱ ӱ ӱ ӱ ӱ ӱ ӱ ӱ ӱ ӱ ӱ ӱ ӱ ӱ

 

I tried to acheive this goal by working with various files but I could not do it. I would be grateful if someone could help me out in this regard. I just need to know what causes the line break so that next infoboxes is coming in the next line after the last one. I just need to figure that out; the rest I can do on my own. I'll be calling the infoboxes in the footer.php file. But thats the easy part. I'm worried about what is causing this line break.

 

I think your question was clear from the beginning but no one has a direct answer to it. osC is about tables right now so you will have to look in that direction. The boxes.php only builds the boxes and should be irrelevant for what you want to achieve. Concentrate on your header.php and find where it all starts and try from there.

 

regards,

Howard

[osclover]

Thanks Howard. I am looking in the direction you specified.

[osclover]

Upon looking in the header.php I don't think it has anything to do with the way I want to display the infoboxes. It must be the boxes.php file or each of the files of the boxes folder.

[wheeloftime]

Upon looking in the header.php I don't think it has anything to do with the way I want to display the infoboxes. It must be the boxes.php file or each of the files of the boxes folder.

No, maybe not but if you want to leave the boxes as they are you shouldn't have to touch the boxes.php.

Look at your, in example, index.php

<!-- header //-->
<?php require(DIR_WS_INCLUDES . 'header.php'); ?>
<!-- header_eof //-->

<!-- body //-->
<table border="0" width="100%" cellspacing="3" cellpadding="3">
 <tr>
<td width="<?php echo BOX_WIDTH; ?>" valign="top"><table border="0" width="<?php echo BOX_WIDTH; ?>" cellspacing="0" cellpadding="2">
<!-- left_navigation //-->
<?php require(DIR_WS_INCLUDES . 'column_left.php'); ?>
<!-- left_navigation_eof //-->
</table></td>

 

Concentrating on the left side infoboxes they are loaded by the include of the colum_left.php. Now around these there is a <tr> followed by a <td> where after the left column infoboxes are loaded. All includes/boxes files have a <tr><td> to start with and an ending </td></tr>

So they are built inside the <td> with the defined BOX_WIDTH from top to bottom.

To get them from left to right you have to remove the <tr> tags or encapsulete them within another left to right table. It probably means changing all files in your root catalog directory and a big chance the table rows and columns for the middle part won't fit anymore either.

Best you draw how you want to have it looked and first do some paper work about the table, row and column tags you are gonna need.

[osclover]

When I call the individual infobox files in my footer.php file, they still appear in the top to bottom format althought they start in the footer ofcourse.

[osclover]

What I mean is that, although I do understand what you meant, my boxes should appear in horizontal format when I call them individually in the footer.php. But they appear in the vertical format. So the mystery is somewhere in the individual box files or the boxes.php file.

 

Before inserting the box files in the footer, i modified the code of each box file by placing all the box files inside one <tr> and each box was in its on <td> .

 

Something like this

 

<tr>

<td>

///coding of categories.php excluging the <tr> and <td> it contained by default

</td>

 

<td>

///coding of manufacturers.php excluging the <tr> and <td> it contained by default

</td>

 

<td>and so on...

</td>

</tr>

[GraphicsGuy]

I think you are on the right track putting a table row in footer.php with one division for each info box.

 

When you refer to the box code, are you putting all of the text from the box file or just the require code taken from column_left or column_right? The latter is how I would tackle it if it were me. In each table division paste in the "require" line for the desired infobox from the applicable column file. When that is working, you can modify the graphics and css to make the complete infoboxes look the way you want or make their borders disappear all together.

 

Not an expert opinion, just the approach I would look at if it were me.