轉換爲響應式網頁設計

我剛剛完成了個人投資組合網站的第一頁。在網絡開發方面，我只是一個初學者。我已將我的網站寬度設置爲1600像素，與我的背景圖像寬度相同。轉換爲響應式網頁設計

我現在想要做的是將頁面轉換爲響應式設計。我唯一的問題是，當我將頁面的寬度更改爲100％時，我的橫幅div的位置向左移動，而不是居中。

這是我的代碼片段。

<body> 

<div id="banner"> 
    <div class="container_12"> 
     <div class="grid_7 prefix_5" id="navbar"> 
      <ul> 
       <li><a href="index.html" title="Gelo Lopez">Home</a></li> 
       <li><a href="Project Management.html" title="Gelo Lopez Work" target="_blank">Portfolio</a></li> 
       <li><a href="http://gelolopez.wordpress.com">Blog</a></li> 
       <li><a href="/contact" title="Contact Gelo Lopez">Contact</a></li> 
      </ul> 
     </div> 
     <div class="grid_10" id="bannertext"> 
      <h1>Hello!</h1> 
      <div class="clear"></div> 
      <p>Hi, I am Gelo Lopez, an emerging digital marketing and PR Professional. I create stories for brands. I am the social media primmadonna</> 
      <p id="bannerbutton"><img src="Assets/Images/bannerbutton.png" width="171" height="44" alt="Gelo Lopez Portfolio" /></p> 
     </div>  
    </div> 
    </div><!--end of banner-->

CSS：

body { 
width: 100%; 
color: #5a5959; 
font-size: 18px; 
font-family: "Lao UI"; 
} 

/* sections*/ 
#banner { 
background-image: url(../Images/Banner-background.png); 
height:660px; 
color: #fff; 
font-size: 24px; 
}

我也使用960個GS模板12列。我決定將container_12 div放在id =橫幅下，以便將內容放置在頁面的中心。

我希望有人能幫助我

來源

2013-11-04 gelolopez

沒有「轉換」，你必須爲它設計。閱讀媒體查詢。 – Brad

向右移動似乎不正確？您可以將背景設置爲頂部中心，這將修復背景的外觀。但是，從響應式設計開始，您就可以閱讀媒體查詢以開始使用。 –

向右移？沒有離開？另外'＃banner' div應該默認爲100％，所以我假設你的背景圖像有問題。只需用'background-position'屬性將圖片居中。 –