PHP內容的樣式頁面翻頁？

Question

我仍在學習，但這讓我有點困惑。我有使用PHP從我的數據庫中提取內容的頁面。每個頁面的樣式都是相同的。但是，當我測試它們時，其中一些會有所不同，我不知道爲什麼。

這是PHP：

<div id="container"> 
    <?php 

     $result = mysql_query ("SELECT id, large_images, project_name, category_name, description, applications_used, web 
          FROM projects 
          WHERE {$_GET['id']}=id") or die ("mysql_query error"); 

     while ($row = mysql_fetch_assoc($result)) 

      { 

      $large_image = $row['large_images']; 
      $large_image = explode(",", $large_image); 

      $applications_used = $row ['applications_used']; 
      $applications_used = explode(",", $applications_used); 

      echo "<div id='info'>"; 
       echo "<div class='banner2'><p>{$row['project_name']}</p></div>"; 
       echo "<div class='category'><h3>{$row['category_name']}</h3></div>"; 
       echo "<div id='description'>{$row['description']}"; 
        echo "<div class='web_link'><p>{$row['web']}</p></div>"; 
       echo "</div>"; 
       echo "<div id='applications'><h4>Applications</h4>{$row['applications_used']}</div>"; 
      echo "</div>"; 

      echo "<div id='slideshow_container'>"; 
       echo "<div id='slides'>"; 
        echo "<div class='slides_container'>"; 

          foreach($large_image as $large_image) 
           { 
            echo "<div><img src='images/portfolio/large/$large_image' alt='{$row[project_name]}' width='100%' /></div>";  
           } 
        echo "</div>"; 
       echo "</div>"; 
      echo "</div>"; 
      echo "<div id='extra'>"; 
       echo "<span></span>"; 
      echo "</div>"; 

      } 
?> 


     </div> 

我稱呼它使頁面看起來像這樣的：

http://www.liannesuggitt.com/test/portfolio/slideshow.php?%20id=0

但是，有時它看起來像這樣（過高）：

http://www.liannesuggitt.com/test/portfolio/slideshow.php?%20id=1

或者這個太低：（我沒有足夠的代表，替換id = 9的最後一位）

該CSS位於兩個地方，一個名爲portfolio_slideshow.css，如下所示：（自改編自slidesjs。 COM）

#slideshow_container 
{ 
height: 500px; 
width: 702px; 
margin: -775px auto 0 auto; 
} 
#slideshow_container:after 
{ 
    display:block; 
    clear: both; 
    content: ""; 
} 

/* 
Slides container 
Important: 
Set the width of your slides container 
Set to display none, prevents content flash 
*/ 

.slides_container { 
    width: 702px; 
    display: none; 
    position: relative; 
    height: 552px; 
    margin: -770px auto 0 auto; 
    float: left; 
} 

    .slides_container img 
    { 
     border: 1px solid black; 
     width: 700px; 
     height: 550px; 
     margin: 0 auto; 
    } 

/* 
Each slide 
Important: 
Set the width of your slides 
If height not specified height will be set by the slide content 
Set to display block 
*/ 

.slides_container a { 
    width:90%; 
    height:400px; 
    display:block; 
} 





/* 
Pagination 
*/ 

.pagination { 
    margin: 720px auto auto 35%; 
    width: 200px; 
    position: absolute; 
    padding-bottom: 2px; 
} 


.pagination li { 
    float:left; 
    margin:0 1px; 
    list-style:none; 
} 

.pagination li:first-child 
{ 
    margin-left: 10px; 
} 

.pagination li a { 
    display:block; 
    width:13px; 
    height:0; 
    padding-top:14px; 
    background-image:url(../img/pagination.png); 
    background-position:0 0; 
    float:left; 
    overflow:hidden; 
} 

.pagination li a:hover 
{ 
background-position:0 -25px; 
} 

.pagination li.current a { 
background-position:0 -13px; 
} 

，另一種是從style.css的，這裏涉及的片段：

#info 
{ 
    width: 78%; 
    margin: 590px auto 0 auto; 
    height: 70px; 
    padding: 15px; 
} 

    #description p 
    { 
     text-align: justify;  
    } 

.banner2 
{ 
    background: url("../images/banner.png"); 
    width: 200px; 
    height: 40px; 
    position: absolute; 
    z-index: 200; 
    margin-top: -580px; 
    margin-left: -110px; 
    color: white; 

} 

    .banner2 p 
    { 
     text-align: center; 
     font-size: 110%; 
     line-height: 30px; 
     font-family: 'Conv_Essays1743'; 
    } 

.category 
{ 
    margin-top: 50px; 
    font-family: 'Conv_Essays1743'; 
    text-transform: uppercase; 
} 
    .category h3 
    { 
     font-family: 'Conv_Essays1743'; 
     color: black; 
     font-size: 120%;  
     margin-left: -25px; 
     margin-bottom: 15px; 
    } 


#description 
{ 
    height: auto; 
    padding-bottom: 6px; 
    float: left; 
    width: 82%; 
} 



    #description p 
    { 
     margin-bottom: 5px; 
    } 

#applications 
{ 
    /*border: 1px solid green;*/  
    height: 29%; 
    margin-left: 10px; 
    float: right; 
    width: 12%; 
} 

    #applications h4 
    { 
     font-family: 'Conv_Essays1743'; 
     margin-bottom: 8px; 
    } 

.web_link 
{ 
    margin-top: -7px; 
    text-align: left; 
    float: left; 
} 

    .web_link a 
    { 
     color: black; 
     text-transform: uppercase; 
     font-family: 'Conv_Essays1743'; 
     font-size: 80%; 

    } 

     .web_link a:hover 
     { 
      color: #5a5a5a; 
     } 

很抱歉，如果這是漫長的，我想它會更容易看到的代碼與狩獵它！ 而且我知道有在幻燈片部分一些奇怪的空間，有很多奇怪的div的（據我所知哈哈）

感謝任何信息，

Answer 1

好了，解決困境我不得不重新安排php，以便「幻燈片放映」部分首先取代內容和風格。之前，幻燈片的放置取決於內容的結束位置（因爲幻燈片的頁邊距是從內容的div的末端計算的），並且由於內容的長度在每個頁面上都有所不同，因此會導致幻燈片放映改變它的位置。

它仍然是x的像素數量，只是它計算它的點正在改變。

感謝那些誰看了。