-1
我目前正在開發銷售PC組件的電子商務網站。現在我已經連接到我的數據庫，可以正常工作，並且可以使用PHP從表中抽取項目，但是我不確定如何安排我的產品網格/列表。使用特定數量的產品創建產品網格/列表
我正在使用PHP和MySQL。
在它看起來像這樣（沒有CSS格式ATM因爲我試圖找出我的問題）的那一刻：
http://i.stack.imgur.com/5LQ3U.jpg
的問題是如果我有那麼多部件組件的更多將越過頁腳（重疊如下圖所示）：
http://i.stack.imgur.com/e8axf.jpg
有沒有什麼辦法，使傳播進一步下跌的頁面，如果發生這種情況還是我將不得不做一些像只每頁顯示4個產品，並有一些點擊'下一頁'的方式來查看其餘內容。如果我不能拉伸頁面，我會如何去做我上面提到的。
下面是代碼：
processors.php
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>PC Tweeks - Processors</title>
<link rel="stylesheet" type="text/css" href="styles/default.css" />
</head>
<body>
<!-- Wrapper is the whole page -->
<div id="wrapper">
<!-- Header is the top banner of the page which holds the logo, social networking links and site buttons -->
<div id="header">
<!-- This is setting an id called 'logo' which links to index.php (Home Page) when clicked. The image will be imported using CSS (see default.css) -->
<a id="logo" href="index.php"></a>
<!-- This is the social networking buttons list which has two items, facebook and twitter -->
<div id="socialButtons">
<ul>
<li>
<a href="http://www.twitter.com"><img src="images/BTN_twitter.png" alt="Follow us on Twitter!"/></a>
</li>
<li>
<a href="http://www.facebook.com"><img src="images/BTN_facebook.png" alt="Follow us on Facebook!"/></a>
</li>
</ul>
</div>
<!-- This is the navigation part of the header which holds links to certain pages of the site (Login/Signup, Help)
Note: If a user is not logged in then the Login/Signup image will show, however when they are logged in the 'Your Account'
button will show instead (Not implemented yet waiting on database)-->
<div id="accountNavigation">
<ul>
<li>
<a href="login.php"><img src="images/BTN_logSign.png" alt="Login/Signup"/></a>
</li>
<li>
<a href="help.php"><img src="images/BTN_help.png" alt="Help"/></a>
</li>
</ul>
</div>
</div>
<!-- This is where the main site content will go (i.e. product list). Not implemented yet waiting on database.-->
<div id="content">
<!-- Creating the navigation table for the components -->
<table id="componentNavigation">
<th>Navigation:</th>
<tr>
<td><a href="processors.php">Processors</td>
</tr>
<tr>
<td><a href="motherboardsAMD.php">Motherboards AMD</td>
</tr>
<tr>
<td><a href="motherboardsIntel.php">Motherboards Intel</td>
</tr>
<tr>
<td><a href="memory.php">Memory</td>
</tr>
<tr>
<td><a href="graphicscardsATI.php">Graphics Cards ATI</td>
</tr>
<tr>
<td><a href="graphicscardsNVIDIA.php">Graphics Cards NVIDIA</td>
</tr>
<tr>
<td><a href="harddrives.php">Internal Hard Drives</td>
</tr>
<tr>
<td><a href="soliddrives.php">Solid State Drives</td>
</tr>
<tr>
<td><a href="opticaldrives.php">Optical Drives</td>
</tr>
<tr>
<td><a href="cooling.php">Cooling</td>
</tr>
<tr>
<td><a href="soundcards.php">Sound Cards</td>
</tr>
<tr>
<td><a href="cases.php">Cases</td>
</tr>
<tr>
<td><a href="powersupplies.php">Power Supplies</td>
</tr>
</table>
<table id="products">
<?php
//Connects to the DB, localhost is yourpc, root is the username and there is no password
$con = mysql_connect('localhost','root','');
//This is the database we want to access in phpMyAdmin
mysql_select_db('pctweeks');
$query = "SELECT * FROM component WHERE type = 'CPU'";
$query_run = mysql_query($query) or die(mysql_error($con));
if (mysql_num_rows($query_run) >= 1){
while($row = mysql_fetch_assoc($query_run)) {
echo "<th>{$row['name']}</th>" .
"<tr><td> <img src='images/products/{$row['image']}'/> </td></tr>";
}
} else
{
echo 'No Products';
}
?>
</table>
</div>
<!-- This is the footer, which holds static information (contact us, cards we accept) -->
<div id="footer">
<p></p>
<p>Email: <a href="mailto:[email protected]">[email protected]</a> </p>
<p>Telephone: 0800-652-7836</p>
</div>
</div>
</body>
</html>
default.css
/* CSS Layout for all pages (apart from #content which will need to be altered for each page).
MAKE SURE YOU SAVE A LOCAL COPY OF THIS AND USE IT ON YOUR PAGES, CHANGING THE CONTENT/HEADER
AS NECCESSARY */
/* Ensures cross-compatability for layout with multiple browsers (testing in Firefox) */
* { padding: 0; margin: 0; }
/* The body is the entire page (as seen in HTML). These are general definitions, e.g. font).
The page background is a wallpaper which remains fixed. This isn't the final version a
custom one will be made when the site is fully functional */
body {
font-family: Verdana, Arial, Helvetica, sans-serif, Calibri;
font-size: 13px;
background:url(../images/backgroundwrap2.jpg);
background-repeat:no-repeat;
background-attachment:fixed;
}
/* Defining the formatting for paragraphs '<p></p>' */
p {
padding: 10px;
}
/* Formatting for image links, removes the border (IE shows borders automatically) */
a img{
border: 0;
}
/* Defining the formatting for the wrapper (all of the page as seen in HTML) */
#wrapper {
margin: 0 auto;
width: 1024px;
}
/* DEFINING HEADER FORMATTING */
#header {
background: url(../images/headerBackground.png);
width: 100%;
float: left;
background-position: bottom;
height: 176px;
}
/* Items used in the HEADER */
#logo {
display:block;
position: left;
width: 411px;
height: 126px;
background: url(../images/logo.png) no-repeat;
}
/* Defining size of buttons so that there is a boundary between link and normal page */
#socialButtons{
width: 181px;
height: 43px;
}
/* Formatting for the unordered list in the socialButtons div.
Position is relative so when window is resized it won't move. */
#socialButtons ul{
position: relative;
left: 450px;
top: -100px;
display: block;
list-style: none;
}
/* Defining size of buttons in navigation div so there is a boundary between link and normal page */
#accountNavigation{
width: 156px;
height: 43px;
}
/* Formatting for the unordered list in the navigation div.
Position is relative so when window is resized it won't move. */
#accountNavigation ul{
position: relative;
left: 800px;
top: -150px;
display: block;
list-style: none;
}
/* Formatting for the content (dynamic part of the site) */
#content {
float: left;
color: #333;
background: #FFFFFF;
height: 1024px;
width: 100%;
display: inline;
}
#componentNavigation{
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
border-collapse:collapse;
height: 600px;
width: 200px;
}
#componentNavigation th
{
font-size:1.1em;
text-align:left;
padding-top:5px;
padding-bottom:4px;
background-color:#FFA840;
color:#000000;
}
#componentNavigation td, #componentNavigation th
{
font-size:1em;
border:1px solid #FFA840;
padding:3px 7px 2px 7px;
}
#offers {
position: relative;
left: 250px;
bottom: 550px;
table-layout: fixed;
}
#offers th {
vertical-align: middle;
}
#offers td
{
width: 100px;
max-width: 150px;
font-size:1em;
border:1px solid #000000;
padding:50px 50px 30px 50px; /* Top, Right, Bottom, Left */
}
#offers p {
text-align: middle;
}
#products {
position: relative;
left: 250px;
bottom: 550px;
table-layout: fixed;
}
/* Formatting for the footer which is static so nothing should need to be changed in this */
#footer {
background: url(../images/footerBackground.png);
background-position: bottom;
width: 100%;
height: 118px;
clear: both;
color: #333;
}
這是偉大的感謝 – Mike 2012-04-03 12:58:46