2012-03-14 6 views
16

#navbarと#contentを含む#container divで非常に基本的なサイトを設定しました。しかし、ズームインまたはズームアウトすると、#navbarが歪んでしまいます。ズームインすると、リンクはインラインではなく互いに下に押し込まれます。ズームアウトすると、リンク間に余分なパディングが追加されます。どうすればこれをやめることができますか?ズームイン/アウト時にCSSレイアウトの歪みを止めるにはどうすればよいですか?

はHTML:

<div id="navbar"> 
<ul> 
    <li><a href="index.html">Home</a></li> 
    <li><a href="top.html">Top</a></li> 
    <li><strong><a href="free.html">FREE</a></strong></li> 
    <li><a href="photo.html">Photo</a></li> 
    <li><a href="about.html">About</a></li> 
    <li><a href="contact.html">Contact Us</a></li> 
</ul> 
</div> 

<div id="content"> 

<p>Some sample text.<p> 

</div> 


</div> 

CSS:

#container { 

    position: static; 
    background-color: #00bbee; 
    margin-left: 20%; 
    margin-right: 20%; 
    margin-top: 7%; 
    margin-bottom: 15%; 
    border: 2px solid red; 


} 

#navbar ul{ 

    list-style: none; 



} 

#navbar li{ 

    display: inline; 

} 

#navbar li a{ 

    text-decoration: none; 
    color: #11ff11; 
    margin: 3%; 
    border: 1px dotted orange; 
    padding-left: 4px; 

} 

#navbar li a:hover { 

    background-color: white; 
    color: green; 

} 

#navbar { 

    background-color: #eeeeee; 
    padding-top: 2px; 
    padding-bottom: 5px; 
    border: 1px solid yellow; 

} 

私が歪曲からそれを停止することができますどのように?

また、私はまだCSSには新しく、pxの代わりに%を使うように教えられました。そうですか?また、何か指摘しておかなければならないことを私に教えてください。

ありがとうございます!

+0

何ブラウザあなたがテストするために使用していますか?彼らは通常、ズームを非常に異なって扱います。私はパーセンテージも物事を捨てると思う。 – zim2411

+0

私はそれについて心配しません。一部のブラウザでは、ページ全体が拡大されるのではなく、「テキストズーム」されています。テキストサイズが変更されたときにレイアウトに歪みが生じないようにレイアウトに取り組む方が良いでしょう。ブラウザのズームインの実装ではなく、変化しますし、コントロールできません。 – dave

+0

私はfirefoxを使用しています。それを歪ませないようにする方法がなければなりません。私がCSSレイアウトを作成しようとしたときに、ページの異なるセクションが歪んで互いに下に行くことがわかりました。 – Pztar

答えて

2

この問題は引き続き一定の見解を得るため、私が現在使用している解決策を掲載します。

CSSメディアクエリ:

@media screen and (max-width: 320px) { 

/*Write your css here*/ 

} 

@media screen and (max-width: 800px) { 

} 

チェックアウト: CSS-Tricks + device sizesMedia Queries

0

うーん....持っているあなたはまだ分幅/分の高さのプロパティに追加してみましたか? #container divにこれらのプロパティを含めることができます。それはちょうどトリックを行うかもしれない。

6

ナビゲーションメニューの周りに余分なdivを追加することで修正したのと同じ問題がありました。次に、次を追加しました。

#menu-container { 
    position: absolute; 
    white-space: nowrap; 
    overflow: hidden; 

} 

これでラッピングができなくなりました。それがうまくいくことを望みます。

1

ズームインで問題を解決するには、外側カウントダウンに属性を追加してみてください(#containerまたは#navbar?)。 min-widthを設定すると、ウェブページが指定された幅(300ピクセル)を超えて縮小されないようになります。ズームインしすぎると、<div>内の要素の代わりに、次の行にジャンプすると、ナビゲーションバーの縮小が止まり、スクロールバーがページの下部に表示されます。

例(自分のスタイルシートで):

#navbar {min-width:300px;} 

これを達成するためのもう一つの良い方法は、ページ本体に分-width属性を適用することです。

例(自分のスタイルシートで):

body {min-width:300px;} 

あなたのナビゲーションバーがページの幅全体にまたがるようにしたい場合は最後に、スタイルシートで{clear:both;}を使用しています。

+0

{clear:both; }あなたが浮動小数点を使用していない場合...あなたの浮動小数点を使用していない質問に掲載されている例によると、 – PerryCS

0

ページのすべての要素/ divに絶対高さと幅を設定するだけです。

id {height:250px; width:500px}

また、異なる画面サイズでページレイアウトを調整したり、ブラウザウィンドウのサイズを変更したりするときに、min/max-width/hightを使用することもできます。

0

これは主に、幅またはマージンのプロパティをパーセンテージで設定したためです。あなたがそうするなら、そのような要素に最大幅を提供することを確かめてください。

+1

あなたの答えを詳述してください –

0

ここでは、上記の提案とよく似ていますが、幅が固定されています。 ; _;)

<style> 
body { 
    margin:0px; 
} 
#container { 
    width:990px; 
    background-color: #00bbee; 
    margin:0 auto; 
    border: 2px solid red; 
} 
#navbar ul { 
    list-style: none; 
} 
#navbar li { 
    display: inline; 
} 
#navbar li a { 
    text-decoration: none; 
    color: #11ff11; 
    margin: 3%; 
    border: 1px dotted orange; 
    padding-left: 4px; 
} 
#navbar li a:hover { 
    background-color: white; 
    color: green; 
} 
#navbar { 
    background-color: #eeeeee; 
    padding-top: 2px; 
    padding-bottom: 5px; 
    border: 1px solid yellow; 
} 
</style> 

<div id="container"> 
    <div id="navbar"> 
    <ul> 
     <li><a href="index.html">Home</a></li> 
     <li><a href="top.html">Top</a></li> 
     <li><strong><a href="free.html">FREE</a></strong></li> 
     <li><a href="photo.html">Photo</a></li> 
     <li><a href="about.html">About</a></li> 
     <li><a href="contact.html">Contact Us</a></li> 
    </ul> 
    </div> 
    <div id="content"> 
    <p>Some sample text. 
    <p> 
    </div> 
</div> 
0

あなたのCSSに異なるスタイルのためのブレークポイントを設定するには、CSSメディアクエリを使用するようにするつもりです。正しく使用すると、歪みの問題が修正されます。

関連する問題