2012-11-05 105 views
0

我無法讓此代碼使用谷歌瀏覽器運行(我還沒有測試過其他瀏覽器)。顯示時,常規段落顯示在最左側,即使它們應居中,並且鏈接顯示背景中的空白,就好像我突出顯示了MS Word中的字母。我已經將填充設置爲0來嘗試和補救這一點,但無濟於事。我究竟做錯了什麼?居中3列布局

<html> 

<head> 
<link rel="stylesheet" type="text/css" href="My Chars.css"> 
<title>My Chars</title> 
</head> 

<body> 
    <!--Defines the general styles for the page--> 
    <span class = "default" style = "float:left; background-image:url('Paper Mache.jpg'); width:100%; height:100%"> 

     <!--Empty header--> 
     <div id = "header" style = "height:50px; width:100%; align:top"> 

     </div> 
     <br /> 
     <!--Left links panel--> 
     <span class = "default" style = "width:50px; padding:0px;"> 
      <a href = "original.html">Original Chars</a> 
      <br /> 
      <a href = "updated.html">Updated Chars</a> 
      <br /> 
      <a href = "blended.html">Blended Chars</a> 
     </span> 
     <br /> 
     <!--Main body text--> 
     <span class = "default"> 

      <div class = "section_head"> 
       My character site 
      </div> 

      <span class = "default"> 
       This site is dedicated to the various ideas I've had regarding various characters over the years. The site is divided into three main sections, based on where my input starts and stops. These divisions are: 
      </span> 
      <ul class = "default"> 
       <li> 
        <div style = "font-weight:bold"> 
         Original Characters 
        </div> 
        These are characters created "from scartch". I designed almost everything, from the name to the costume to the character's background, powers, skills, weapons, etc. 
       </li> 
       <li> 
        <div style = "font-weight:bold;"> 
         Updated Characters 
        </div> 

        These are existing charactes whose backstories, skills, and/or powers have been altered to reflect the times, make a more logical or cohesive origin --especially with respect to an archenemy or to merge several versions of that character together. 
       </li> 
       <li> 
        <div style = "font-weight:bold;"> 
         Blended Characters 
        </div> 

        These are two or more different characters that have similar or shared elements in terms of backstory, character themes/arcs, powers/skills/abilities, etc. that have been mixed together so that the best elements of the individual characters produce a new, better "combination character." 
       </li> 
      </ul>   
      <span class = "default"> 
       In addition to these three main sections, there are subsections for heroes and villains and supporting cast. There are also divisions between "universes," e.g. DC comics universe vs a movie's universe. 
      </span> 
     <!--Closing th main body--> 
     </span> 
    <!--Closing the main page details--> 
    </span> 

</body> 
</html> 

在外部樣式表:

body 
{ 
    margin: 0; 
} 
.default 
{ 
    width: 800px; 
    height: 100%; 
    background-color: white; 
    margin-left: auto; 
    margin-right: auto; 
} 

.section_head 
{ 
    background-color: white; 
    font-size: large; 
    font-weight: bold; 
    text-align: center; 
    width: 800px; 
    margin-left:auto; 
    margin-right: auto; 
} 

a:link 
{ 
    color: red; 
    font-weight: bold; 
    padding: 0; 
    margin: 0; 
} 

的jsfiddle例子 - http://jsfiddle.net/L9LvS/

+0

你能否畫一個你期望的佈局。我試圖在jsfiddle上運行你的代碼,但不知道。問候, – Wilf

回答

1

嗯,我想有自己的代碼中的改進的地方。

例如span-tags是內聯元素,所以不應該在其中插入塊元素。嘗試使用div或p標籤!
請注意,還有一個叫做inline-block的新css-display-property,它通常是一個非常漂亮的替代方案,可以稍後在網站上減少很多麻煩。
http://bittersmann.de/articles/inline-block/

所以,除非我沒有得到你的目標吧,我想切換到阻止元素會解決很多你的問題。
(如果你不想重寫你的html,你可以先用display:block來檢查它)

+0

感謝您的意見。問題原來是因爲我有在「height:100%」處定義的「default」類,所以一切都試圖出現在這個高度。你可以想像爲什麼這會是一個問題:-P我現在正在頁面底部工作,在那裏過早地結束了背景。再次感謝您的建議。 – Batfan1939