2016-11-28 46 views
1

我很新的編碼,並試圖放在一起,我可能會作爲一個組合使用,如果我能得到它的工作和好看一個基本的網站。div容器不工作(試圖從調整停止我的頁面)

不幸的是,除非是全尺寸的什麼我到目前爲止看起來可怕。我想阻止它被調整爲臨時修訂,但最小高度和最小寬度不起作用。迄今爲止我找到的停止調整大小的解決方案都沒有奏效。

我想這是因爲我的代碼是可怕的,但任何人都可以幫我阻止我的網頁調整大小?

body { 
 
    background-color: #91bfe6; 
 
    margin:0; 
 
    padding:0; 
 
    color: #fff; 
 
    font-family: "Trebuchet MS",Helvetica,sans-serif; 
 
} 
 

 
.container { 
 
    min-width: 1920; 
 
    min-height: 1080; 
 
} 
 

 
.p01 { 
 
    color: #fff; 
 
    text-align: left; 
 
    font-family: "Book Antiqua",Palatino,serif; 
 
    font-size: 13px; 
 
    line-height: 5%; 
 
    letter-spacing: 2px; 
 
} 
 

 
.p02 { 
 
    color: #fff; 
 
    text-align: right; 
 
    font-family: "Trebuchet MS",Helvetica,sans-serif; 
 
    font-size: 30px; 
 
    line-height: 5%; 
 
    letter-spacing: 8px; 
 
    word-spacing: 30px; 
 

 
} 
 

 
.p03 { 
 
    color: #fff; 
 
    text-align: right; 
 
    font-family: "Book Antiqua",Palatino,serif; 
 
    font-size: 10px; 
 
    position: fixed; 
 
    right: 4px; 
 
    top: 62px; 
 
} 
 

 
.p04 { 
 
    color: #fff; 
 
    font-family: "Trebuchet MS",Helvetica,sans-serif; 
 
    text-align: left; 
 
    font-size: 32px; 
 
    line-height: 5%; 
 
    letter-spacing: 8px; 
 
    word-spacing: 30px; 
 
    position: relative; 
 
    top: 15px; 
 
    z-index: 1; 
 
} 
 

 
#bottomtext { 
 
    position: fixed; 
 
    bottom: 30px; 
 
    left: 24px; 
 

 
} 
 

 

 
#footer { 
 
    position: fixed; 
 
    right: 4px; 
 
    top: 62px; 
 

 
} 
 

 
#header { 
 
    position: fixed; 
 
    left: 24px; 
 
    top: 11px; 
 

 
} 
 

 
#links { 
 
    position: fixed; 
 
    right: 112px; 
 
    top: 10px; 
 

 

 
} 
 

 
h1 { 
 
    color: #fff; 
 
    font-family: "Trebuchet MS",Helvetica,sans-serif; 
 
    text-align: left; 
 
    line-height: 5%; 
 
    letter-spacing: 6px; 
 
} 
 

 
a:link { 
 
    color: #fff; 
 
    text-decoration: none; 
 
} 
 

 
a:visited { 
 
    color: #fff; 
 
    text-decoration: none; 
 
} 
 

 

 
#rectangle { 
 

 
    background: #834f47; 
 
    position: fixed; 
 
    top: 86px; 
 
    height: calc(100vh - 86px); 
 
    width: 100%; 
 
    overflow: hidden; 
 
    z-index: -1; 
 
} 
 

 
#img5 { 
 
    position: fixed; 
 
    top: 86px; 
 
    margin-right: 40px; 
 

 
} 
 

 
#img6 { 
 
    position: fixed; 
 
    top: 86px; 
 

 
} 
 

 
#img7 { 
 
    position: fixed; 
 
    top: 86px; 
 

 
} 
 

 

 

 
#img8 { 
 
    position: fixed; 
 
    top: 86px; 
 
} 
 

 
#text { 
 
    text-align: center; 
 
    margin: auto; 
 
    width: 50%; 
 
    padding: 0px; 
 
} 
 

 
#storememo { 
 
    text-align: center; 
 
    margin: auto; 
 
    width: 50%; 
 
    padding: 0px; 
 
} 
 

 
#contact { 
 
    display: block; 
 
    margin: auto; 
 
    width: 20%; 
 
} 
 
h1 { 
 
    font-size: 210%; 
 
}
<div class="container"> 
 
    <div id="header"> 
 
    <h1><a href="Index.html">MY NAME</a></h1> 
 
    <p class="p01"> 
 
     <a href="illustration.html">illustration</a> - <a href="3D.html">3D </a>- <a href="animation.html">animation </a>- <a href="graphicdesign.html">graphic design</a> 
 
    </p> 
 
    </div> 
 

 
    <div id="links"> 
 
    <p class="p02"> 
 
     <a href="about.html">ABOUT </a> | <a href="contact.html"> CONTACT </a> | <a href="storelink.html"> STORE </a> 
 
    </p> 
 
    </div> 
 

 
    <div id="bottomtext"> 
 
    <p class="p04">ILLUSTRATION</p></div> 
 

 
    <div id="rectangle"></div> 
 

 
    <div id="img5"> 
 
    <a href="placeholder.html"> 
 
     <img src="placeholder.png" alt="thumbnail" style="width:210px;height:480px;"/> 
 
    </a> 
 
    </div> 
 

 
    <div id="img6"> 
 
    <a href="placeholder.html"> 
 
     <img src="placeholder.png" alt="thumbnail" style="width:210px;height:480px;"/> 
 
    </a> 
 
    </div> 
 

 
    <div id="img7"> 
 
    <a href="placeholder.html"><img src="placeholder.png" alt="thumbnail" style="width:210px;height:480px;"/> 
 
    </a> 
 
    </div> 
 

 
    <div id="img8"> 
 
    <a href="placeholder.html"> 
 
     <img src="placeholder.png" alt="thumbnail" style="width:210px;height:480px;"/> 
 
    </a> 
 
    </div> 
 

 
    <div id="img9"> 
 
    <a href="placeholder.html"> 
 
     <img src="placeholder.png" alt="thumbnail" style="width:210px;height:480px;"/> 
 
    </a></div> 
 

 

 
    <div id="footer"> 
 
    <footer> 
 
     <p class="p03">(c) MY NAME </p> 
 
    </footer> 
 
    </div> 
 
</div>

+0

當你說 「防止你的頁面調整大小」,你reffering以防止在瀏覽器中調整您的頁面的用戶?因爲這是不可能的。或者你是說根據窗口顯示的多少簡單地切斷元素(不要縮放)?還是你說根據窗口大小縮小一切? –

+0

此外,請看看張貼[MCVE]更快的幫助。 –

+0

我的意思是切斷元素(不縮放),所以有一個滾動條可以看到頁面的其餘部分,而不是移動元素。感謝您的鏈接,下次我會記住這一點。 – Pascal

回答

0

「調整大小頁防止」將帶領您這是第一個結果一個簡單的谷歌搜索:Stop the browser from pushing everything around when I resize

您可以使用CSS min-widthmin-height屬性指定頁面可以顯示的最小寬度/高度。如果這不符合,它將創建一個滾動條。

例子:

body { 
    min-width: 1920px; 
    min-height: 1080px; 
} 

如果瀏覽器窗口不是1920×1080,它會顯示什麼可以和其餘的創建滾動條。

另外, <p04><p03>不是html元素。 <p>元素的結束標記只是</p>這些是您可以使用class=''屬性賦予p元素的類名稱,因此您可以在css中將選擇相似的元素進行分組。

+0

謝謝,但我確實在一小時前找到了Google的結果,並試圖將它放在我的CSS中,它什麼都不做。當我調整窗口的大小時,所有東西都會移動並混亂起來。 – Pascal

+0

你還添加了@Pascal元素嗎? –

+0

我把它放在身下? – Pascal

0

我看過你的輸出,我可以說,試圖用一個固定的窗口大小脫離瀏覽器是一個創可貼的解決方案,也不會真正解決您的真正的問題是你的div的比例調整。

這不是因爲你的編碼是可怕的,其實,這只是一個小問題。 你一直在使用像px這樣的絕對單位,而不是象%和em這樣的相對單位。

給定絕對單位的大小,但無論您如何調整區域大小,都只能保持該大小,而相對單位的大小與查看端口相關,從而使其與視口的大小保持一致。

這裏有一個快速和骯髒的小提琴:https://jsfiddle.net/oebs8etr/1/

嘗試切換到全屏或調整視口看到其中的差別。

HTML

<div class="a">RELATIVE</div> 
<div class="b">FIXED</div> 

CSS

.a { 
    position: absolute; 
    background-color: red; 
    left: 5%; 
    top: 5%; 
    width: 25%; 
    height: 10%; 
    color: #fff; 
    font-size: 2.5vw; 
} 

.b { 
    position: absolute; 
    background-color: blue; 
    left: 27px; 
    top: 100px; 
    width: 135px; 
    height: 70px; 
    color: #fff; 
    font-size: 13px; 
}