基本CSS定位（相對於絕對）

我最近寫了，設計並上傳了我的第一個網站，http://www.autismsees.com。基本CSS定位（相對於絕對）

我今天第一次把它放到網上，我意識到，在很多瀏覽器中，整個頁面看起來好像已經移到了右邊。

這是因爲我對所有元素使用絕對定位而不是相對定位，這通常是首選。這是我非常渴望糾正的一個錯誤，但我很難理解我應該如何切換到相對定位。

網頁的css可以在http://autismsees.com/style/stylesheet.css找到。

我想知道是否有人可以給我一些關於如何更改樣式表的建議，或者是一個可以幫助我教會如何做到這一點的在線資源。

非常感謝。

2013-03-26 Rowan K.

請告訴我誰告訴你，絕對定位元素是「首選」。而且我注意到一件很快的事情，在樣式表的前幾行中，可以使用像a：link，a：visited等逗號組合所有'a'值。但是，如果他們都一樣，定義'a：link'和'a：visited'是不必要的。 – 2013-03-26 03:08:02

哇..我很驚訝地看到你的HTML和CSS代碼，我還記得我第一次學會了HTML和CSS。但只是一個建議，也許你需要改進結構並整理你的HTML代碼。可以是這樣的：

<html> 
<head>......</head> 
<body> 
<div id="wrapper"> 
    <div id="container"> 
    ...... 
    <!-- YOUR CONTENT HERE --> 
    ...... 
    </div> 
</div> 
</body> 
</html>

我用兩種方法（使用CSS），可中心網頁：

#container{ 
    position: relative; 
    margin : 0 auto; 
    width: 900px; 
}

或者

#container{ 
    position: absolute; 
    width: 900px; 
    left: 50%; 
    margin-left : -450px; 
}

這裏是小提琴：http://jsfiddle.net/z9vVu/

希望這個有用。

來源

2013-03-26 02:40:45 Fredy

從所有left屬性減200，然後包
<div style="position:relative; margin:0 auto;">...</div>整個頁面（只是<body>...</body>內）左右。這應該很好地解決你的問題。

來源

2013-03-26 01:56:51

現在就試試這個，感謝您的幫助！ – 2013-03-26 02:01:48

嗯..由於某種原因，這真的搞砸了元素的所有對齊。我做錯了什麼/有另一種方式嗎？ – 2013-03-26 02:19:12

這大概直播可以幫助您瞭解更好的定位 -

http://css-tricks.com/video-screencasts/110-quick-overview-of-css-position-values/

來源

2013-03-26 02:30:17 PSL

我的建議是在CSS中學習關於the box model和how floats work的全部內容。這在構建HTML和CSS設計時具有重要意義。 溝渠絕對定位和使用流程。

另一件要研究的是類和id之間的區別。請記住，ID是針對元素/樣式的單個實例，而類可以應用於頁面上的許多元素。使用類的好處是您可以重複使用很多代碼，並且最終整體文件的大小要小得多。我通常只保留id用於JavaScript。

最後，我會研究像Twitter Bootstrap這樣的網格框架。在檢查網站的源代碼時，看起來您已經將Bootstrap CSS包含爲「slidestyle.css」。這個文件有一些偉大的可重用的程式化元素。由於是由布希女士提到你應該嘗試這樣的事：

<!doctype html> 
<html> 
    <head> 
     <title>AutismSees</title> 

     <link rel="stylesheet" href="slidestyle.css"> 
     <link rel="stylesheet" href="stylesheet.css"> 
    </head> 
    <body> 
     <div class="container"> 
      <header class="row span12"> 
       <!-- Header and Navigation Here --> 
      </header> 
      <div class="row span12"> 
       <!-- Slide control here --> 
      </div> 
      <!-- Create the three content columns --> 
      <div class="row"> 
       <div class="span4"> 
       <h2>Contribute</h2> 
       <p>Text here.</p> 
       </div> 
       <div class="span4"> 
       <h2>Stay Connected</h2> 
       <p>Text here.</p> 
       </div> 
       <div class="span4"> 
       <h2>Our Friends</h2> 
       <p>Text here.</p> 
       </div> 
      </div> 
      <footer class="row span12"> 
       <p class="copyright">&copy; 2013 AutismSees.</p> 
      </footer> 
     </div> 
    </body> 
</html>

的container，span4，span12，並且row類都來自Twitter的引導。在Bootstrap中使用這些和其他有用的類實際上可以幫助加快佈局頁面。

也許有助於說明這一切，我已經創建了一個結構可能如下所示的粗略草案：http://jsfiddle.net/matthewkimber/JmsSx/10/embedded/result/。這只是這方面的一部分，但你可以看到我沒有使用絕對或相對定位。只是流動和漂浮。如果瀏覽器調整大小，頁面居中並保持居中。稍微調整一下，你就可以很容易地把它變成你目前的外觀和感覺。

來源

2013-03-26 03:06:23 Mateo

基本CSS定位（相對於絕對）

回答

相關問題