身體不會對齊不同的分辨率

-2

一切工作正常我的默認分辨率;然而，當我在另一個分辨率上運行我的網站時，所有內容都是向右而不是居中。爲什麼是這樣？我曾嘗試將溢出設置爲0％。身體不會對齊不同的分辨率

下面是HTML文件：

<html> 
    <head> 
     <script type="text/javascript"> 
     </script> 
     <link rel="stylesheet" type="text/css" href="stylesheet.css" media="screen"/> 
    <body> 
     <div id="banner"> 
     <h2 id="bannertext"> Websites4u </h2> 
     </div> 

     <div id="buttonbar"> 
      <a id="homeb" href="webpageone.html">Home</a> 
      <a id="aboutb" href="fake.html">About</a> 
      <a id="contactb" href="webpage2.html">Contact Us!</a> 

     </div> 

     <div id="mainbody"> 

     <p id="radio"> 
     3gb: <input type="radio" name="age" value ="<3gb"> <br> <br> 
     4gb: <input type="radio" name="age" value ="4gb"> <br> <br> 
     8gb: <input type="radio" name="age" value ="8gb"> <br> <br> 
     16gb: <input type="radio" name="age" value ="16gb"> <br> 
     </p> 

     <h4 id="bodytext"> Please Select Your Hardware </h4> 

     <h3 id="Ram"> Ram </h3> 

     </div> 
    </body> 
</html>

這裏是CSS：

*{ 
     margin:0; 
     padding:0; 
    } 

    h1 { 
     color:blue; 
    } 
    body{ 
     width:1280px; 
     height:720px; 
     background-image:url("background colour.jpg"); 
     overflow:hidden; 
    } 
    #banner{ 
     position: relative; 
     height: 50px; 
     width: 148%; 
     border: medium solid BFBDBA; 
     background-color:F1C43E; 
     margin:0 auto; 
    } 

    #bannertext{ 
     color:white; 
     text-align:center; 
     font-family:Comic Sans MS, cursive, sans-serif; 
     margin:0 auto; 
    } 

    #buttonbar { 
     position: relative; 
     height: 30px; 
     width: 148% ; 
     border: medium solid BFBDBA; 
     background-color:lightgrey; 
     color:white; 
     margin:0 auto; 
     font-family:Comic Sans MS, cursive, sans-serif; 
     font-style:bold; 
    } 
    #homeb { 
     position: relative; 
     left: 450px; 
    } 

    #aboutb{ 
     position: relative; 
     left: 500px; 
    } 

    #contactb{ 
     position: relative; 
     left: 550px; 
    } 

    a { 
     color: white; 
     font-weight:bold; 
    } 
    a:hover { 
     COLOR: orange; 
     font-weight:bold; 
    } 

    #bodytext{ 
     position: relative; 
     top:50px; 
     left:50px; 
     color:red; 
     font-size:35px; 
     margin:0 auto; 
     font-family:Comic Sans MS, cursive, sans-serif; 
    } 

    #mainbody{ 
     position: relative; 
     background-color: white; 
     height: 1000px; 
     width: 80%; 
     left: 30%; 
     top: 5px; 
     border:medium solid F1C43E; 
    } 

    #radio{ 
     position: absolute; 
     top: 240px; 
     left:100px; 
     font-size: 18px; 
     margin:0 auto; 
    } 

    #Ram{ 
     position: absolute; 
     top: 176px; 
     left: 100px; 
     font-size: 30px; 
     color: Green; 
     margin:0 auto; 
     font-family:Comic Sans MS, cursive, sans-serif; 
    }

來源

2012-12-24 Lewis Wilson

很難迅速解決所有的問題。你的基本錯誤是你有每個項目的絕對值。

例如：

body{ 
    width:1280px; 
    height:720px; 
    background-image:url("background colour.jpg"); 
    overflow:hidden; 
}

由於寬度的規定在那裏，你的內容總是會有1280px寬度，當你打開它寬度較小的屏幕上，將與1280px寬度，因爲來仍然呈現溢出：隱藏，你會看到它就像它被轉移到右側。當你用電腦做某事時，它不會做你想做的事情，而是你要求做的事情。而溢出：隱藏只是隱藏可見區域外的所有內容，而不是像你想要的那樣放置中心內容。

對於#buttonbar：

#buttonbar { 
    position: relative; 
    height: 30px; 
    width: 148% ; 
    border: medium solid BFBDBA; 
    background-color:lightgrey; 
    color:white; 
    margin:0 auto; 
    font-family:Comic Sans MS, cursive, sans-serif; 
    font-style:bold; 
    }

- 甚至不知道爲什麼你需要width:148%這裏。它裏面的按鈕都集中絕對位置：

#homeb { 
    position: relative; 
    left: 450px;  
}

左：450像素嚴格的說，到瀏覽器：嘿，把這個#homeb其父塊內的第450像素。瀏覽器會這樣做，並且不會將它移到更多的位置，因爲您希望它居中。你可以告訴他，把所有按鈕中心：

#buttonbar { 
     height: 30px; 
     text-align:center; 
     border: medium solid BFBDBA; 
     background-color:lightgrey; 
     color:white; 
     margin:0 auto; 
     font-family:Comic Sans MS, cursive, sans-serif; 
     font-style:bold; 
    }

文本對齊：中心; - 這會告訴瀏覽器將#buttonbar中的內容居中，而不取決於它的寬度，並且不需要爲#homeb，#aboutb和#contactb定義類。

依此類推。有很多地方需要解決。我給了你一個起點。這裏是演示，已經爲你做了一些改變：http://jsfiddle.net/2rM6K/7/

你只需要瞭解你的代碼對於瀏覽器的每一行意味着什麼，如果你想得到正確的工作。如果你不明白事情是如何運作的 - 網絡上有很多信息，人們隨時準備幫助你。只是不要指望在編寫代碼時發生一些魔法 - 你必須知道事情是如何工作的。閱讀，嘗試，試驗，再讀一遍，再試一次，再試驗一次，直到你開始理解爲什麼以及如何工作。

來源

2012-12-24 19:08:56

page 
{ 
Margin-right:auto; 
margin-left:auto; 
width:800px; 
}

您可以根據您的要求更改寬度。

來源

2012-12-25 05:01:32

身體不會對齊不同的分辨率

回答

相關問題