2016-11-28 2 views
1

私はそれを動作させて見栄えが良いとすれば、基本的なウェブサイトをコーディングしてポートフォリオとして使うことができます。コンテナdivが機能しない(ページのサイズ変更を中止しようとしています)

残念ながら、私がこれまでに持っていたことは、フルサイズでない限り、ひどく見えます。私はそれが一時的な修正としてサイズ変更されないようにしたいが、min-heightとmin-widthは機能していない。これまでに私が見つけたサイズ変更を止めるための解決策はありませんでした。

私のコードはひどいですが、だれでも私のページのサイズ変更を防ぐことができますか?

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

最初の結果として、これまであなたを導くだろう「リサイズからページを防ぐ」のシンプルなGoogle検索:Stop the browser from pushing everything around when I resize

あなたは指定するCSS min-widthmin-height属性を使用することができますページが表示される最小幅/高さ。これが満たされない場合、スクロールバーが作成されます。

例:

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

ブラウザのウィンドウが* 1080 1920でない場合、それは、残りのためのスクロールバーを作成することができますどのように表示されます。

また、 <p04><p03>はhtml要素ではありません。 <p>要素の終了タグは</p>です。これは、class=''属性を使用してp要素に与えることができるクラス名なので、cssで選択した項目をグループ化できます。

+0

であることを確認してくださいありがとうございます。しかし、私は実際にその結果を1時間前にGoogleで見つけて、それを私のCSSに入れてみました。ウィンドウのサイズを変更すると、すべてがまだ動き回ってしまいます。 – Pascal

+0

あなたはそれを@Pascalに追加しましたか? –

+0

私は体の下に置く? – Pascal

0

私はあなたの出力を見て、私はブラウザから固定ウィンドウサイズを使用しようとすると、バンドの救済策であり、あなたのdivの比例リサイズである実際の問題を実際には修正しないと言うことができます。

あなたのコーディングがひどいためではありません。実際問題ではありません。 %やemのような相対単位ではなく、pxのような絶対単位を使用しています。

絶対単位にはサイズが与えられますが、領域のサイズの変更にかかわらず、絶対にそのサイズに留まります。相対的な単位にはビューポートに対してサイズが与えられ、ビューポートとともにサイズ変更されます。ここで

は、迅速かつ汚いフィドルです: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; 
} 
関連する問題