基本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定位（相对于绝对）

回答

相关问题