Tekst naast foto uitlijnen, verticaal midden

Status
Niet open voor verdere reacties.
P

petertilburg

Nieuwe gebruiker
Lid geworden
13 mei 2007
Berichten
2
Hallo,
Net nieuw hier, en al direct een lastige vraag (voor mij).
Ik weet mijn weg redelijk te vinden in php en html, maar javascipt laat behoorlijk te wensen over. In mijn php winkel heb ik een scriptje draaien wat van een willekeurig roulerend producten een foto, met rechts daarvan productnaam, fabrikant en prijs laat zien. De drie regels beginnen rechts bovenaan (tov foto), maar wil deze eigenlijk rechts midden hebben. Hoe moet ik dit aanpakken?
Ik heb het bijna onderaan geprobeerd met valign="center", maar dat werkt dus niet.
Het volgende is me al gelukt:
Het stukje code waar het volgens mij in moet gebeuren is:
http://www.luisterboekenplein.nl/random.php
PHP: 
<!doctype html public "-//W3C//DTD HTML 4.01 Transitional//EN">
<html <?php echo HTML_PARAMS; ?>>
<head>
<base href="<?php echo (($request_type == 'SSL') ? HTTPS_SERVER : HTTP_SERVER) . DIR_WS_CATALOG; ?>">


<style type=text/css> 
<!-- 
#test { 
  float: left;
 } 
--> 
</style> 

</head
>
<body marginwidth="0" marginheight="0" topmargin="0" bottommargin="0" leftmargin="0" rightmargin="0">


<table border="0" width="100%" cellspacing="0" cellpadding="0">
<tr>
  <td>

<?php
  define('LARGE_IMAGE_WIDTH', '40');
  define('LARGE_IMAGE_HEIGHT', '100');

  if (isset($current_category_id) && ($current_category_id > 0)) {
    $random_products_query = tep_db_query("select distinct p.products_id, p.products_price, p.products_tax_class_id, p.products_image, p.products_model, p.manufacturers_id, m.manufacturers_name, pd.products_name from " . TABLE_PRODUCTS . " p, " . TABLE_MANUFACTURERS . " m, " . TABLE_PRODUCTS_DESCRIPTION . " pd, " . TABLE_PRODUCTS_TO_CATEGORIES . " p2c, " . TABLE_CATEGORIES . " c where p.products_status = '1' and p.manufacturers_id = m.manufacturers_id and p.products_id = pd.products_id and pd.language_id = '" . (int)$languages_id . "' and p.products_id = p2c.products_id and p2c.categories_id = c.categories_id and '" . (int)$current_category_id . "' in (c.categories_id, c.parent_id) order by rand() limit "  . MAX_RANDOM_SELECT_SPECIALS);
  } else {
    $random_products_query = tep_db_query("select distinct p.products_id, p.products_price, p.products_tax_class_id, p.products_image, p.products_model, p.manufacturers_id, m.manufacturers_name, pd.products_name from " . TABLE_PRODUCTS . " p, " . TABLE_MANUFACTURERS . " m, " . TABLE_PRODUCTS_DESCRIPTION . " pd where p.products_status = '1' and p.manufacturers_id = m.manufacturers_id and p.products_id = pd.products_id and pd.language_id = '" . (int)$languages_id . "' order by rand() limit "  . MAX_RANDOM_SELECT_SPECIALS);
  }

if ( $random_products_query ) {
	$random_products_script = '<script type="text/javascript" src="jscripts/prototype.js"></script>' . "\n";
	$random_products_script .= '<script type="text/javascript" src="jscripts/scriptaculous.js?load=effects"></script>' . "\n";
	//$random_products_script .= '<script type="text/javascript" src="jscripts/display_random_products.js"></script>' . "\n";
	$random_products_script .= '<script type="text/javascript">' . "\n";
	$random_products_script .= 'var randomProductIndex = 0;' . "\n";
	$random_products_script .= 'var randomProductArray = new Array();' . "\n";
	$random_products_script .= 'function showRandomProduct() {' . "\n";
	$random_products_script .= "	Effect.Appear( 'randomProductDiv', { duration: 1.0 } );\n";
	$random_products_script .= "	setTimeout( 'loadRandomProduct()', 3000 );\n";
	$random_products_script .= '}' . "\n";
	$random_products_script .= 'function loadRandomProduct() {' . "\n";
	$random_products_script .= "Element.hide('randomProductDiv');\n";
	$random_products_script .= "var randomProductDiv = document.getElementById('randomProductDiv');\n";
	$random_products_script .= 'var href = randomProductArray[randomProductIndex][0];' . "\n";
	$random_products_script .= 'var src = randomProductArray[randomProductIndex][1];' . "\n";
	$random_products_script .= 'var w = randomProductArray[randomProductIndex][2];' . "\n";
	$random_products_script .= 'var h = randomProductArray[randomProductIndex][3];' . "\n";
	$random_products_script .= 'var name = randomProductArray[randomProductIndex][4];' . "\n";
	$random_products_script .= 'var manu = randomProductArray[randomProductIndex][5];' . "\n";
	$random_products_script .= 'var price = randomProductArray[randomProductIndex][6];' . "\n";
	$random_products_script .= 'var sprice = randomProductArray[randomProductIndex][7];' . "\n";
	$random_products_script .= 'var loaded = randomProductArray[randomProductIndex][8];' . "\n";
	$random_products_script .= "var text = '';\n";
	$random_products_script .= "text += '<a href=\"' + href + '\">';\n";
	$random_products_script .= "text += '<img src=\"' + src + '\" id=\"test\" width=\"' + w + '\" height=\"' + h + '\" border=\"0\" alt=\"' + name + '\" title=\"' + name + '\"';\n";
	$random_products_script .= "text += ' onload=\"randomProductArray[' + randomProductIndex + '][8]=true;showRandomProduct()\"';\n";
	$random_products_script .= "text += '>';\n";
	$random_products_script .= "text += '<b>';\n";
	$random_products_script .= "text += '' + name + '';\n";
	$random_products_script .= "text += '</b>';\n";
	$random_products_script .= "text += '<br>';\n";
	$random_products_script .= "text += '' + manu + '';\n";
	$random_products_script .= "text += '</a>';\n";
	$random_products_script .= "text += '<br>';\n";
	$random_products_script .= 'if ( sprice.length > 0 ) text += sprice;' . "\n";
	$random_products_script .= 'else text += price;' . "\n";
	$random_products_script .= "randomProductDiv.innerHTML = text;\n";
	$random_products_script .= 'randomProductIndex++;' . "\n";
	$random_products_script .= 'if ( randomProductIndex >= randomProductArray.length ) randomProductIndex = 0;' . "\n";
	$random_products_script .= '}' . "\n";
	while ($f = tep_db_fetch_array($random_products_query))  {
		tep_image(DIR_WS_IMAGES . $f['products_image'], '', LARGE_IMAGE_WIDTH, LARGE_IMAGE_HEIGHT);
		$random_products_script .= 'randomProductArray.push( new Array(';
		$random_products_script .= "'" . tep_href_link( FILENAME_PRODUCT_INFO, 'products_id=' . $f["products_id"] ) . "',";
		$random_products_script .= "'" . DIR_WS_IMAGES . $f['products_image'] . "',";
		$random_products_script .= "'" . LARGE_IMAGE_WIDTH . "',";
		$random_products_script .= "'" . LARGE_IMAGE_HEIGHT . "',";
		$random_products_script .= "'" . mysql_escape_string($f['products_name']) . "',";
		$random_products_script .= "'" . mysql_escape_string(manufacturers_name_firstlastswap($f['manufacturers_name'])) . "',";
		$random_products_script .= "'" . $currencies->display_price( $f['products_price'], tep_get_tax_rate( $f['products_tax_class_id'] ) ) . "',";
		if ( tep_not_null($f['specials_new_products_price']) )
			$random_products_script .= "'" . $currencies->display_price( $f['specials_new_products_price'], tep_get_tax_rate( $f['products_tax_class_id'] ) ) . "',";
		else
			$random_products_script .= "'',\n";
		$random_products_script .= "false";
		$random_products_script .= ") );\n";
	}
	$random_products_script .= 'loadRandomProduct();' . "\n";
	$random_products_script .= '</script>' . "\n";
?>

<?php
	echo '<table class="randomProductDiv">
	  <tr>
	    <td height="200" class="framedcat" valign="center">
	    <div id="randomProductDiv"></div>
	    </td>
	  </tr>
	</table>' . $random_products_script ;
?>

<?php
}
?>

  </td>
</tr>
</table>
</body>
</html>
<?php require(DIR_WS_INCLUDES . 'application_bottom.php'); ?>
 
Kwestie van een breekje..........

PHP: 
text += ' onload="randomProductArray[' + randomProductIndex + '][8]=true;showRandomProduct()"';
text += '>';
text += '<br>';
text += '<b>';
text += '' + name + '';

Dus text += '<br>'; toevoegen, op de positie als in bovenstaande code.

:cool:
 
peter vazed zei:
Kwestie van een breekje..........
Dus text += '<br>'; toevoegen, op de positie als in bovenstaande code.
Klik om te vergroten...
Ha ha, dat heeft even geduurd voordat ik door had wat je gedaan hebt.
Ik kreeg echt het idee dat hij vertikal centreerde, en snapte helemaal niks van de toverdoos.
Totdat ik de images 5 keer zo groot maakt....
Hij centreert niet, maar zet de tekst gewoon een regel lager.

Ik ben weer helemaal wakker :D
Stom natuurlijk, dit doet de truuk ook.
Bedankt!
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan