2011-07-06 14 views
0

私は一番上に1700pxの幅のJSスライドショーを持つサイトを構築しています。私のページを公開すると、私のモニターは1024ピクセルの解像度になっているので、水平のスクロールバーが表示されます。どのようにして、水平スクロールバーのないブラウザの中央にサイトを置くことができますか?どちらの側に余分なものがあれば、ユーザーには見えません。 大変感謝しております、ありがとうございます!水平スクロールバーが表示されないように1700px divの中央に配置するにはどうすればよいですか?

+0

解像度が1024pxのときに1700pxをデザインすると、特にスクロールバーを取り外すときに、両面がユーザーに表示されないことは明らかです。それは一種の論理だと思いませんか? – Christophe

+0

@krike:問題は**スクロールバーを削除する**方法です。 –

+0

@Matthew:はい私はそれが私が答えるのではなくコメントした理由を知っています。そして、私は彼の2番目の質問に答えました(彼の質問の記述にあります) - > "とにかく余計なものはユーザーに見えませんか?" – Christophe

答えて

3

シンプルなソリューション:

body { overflow-x: hidden; } 

しかし、これはまた、彼らのモニターが小さい場合、人々はスクロールを停止しますあなたのサイトの主な幅よりも。

本当の解決策は、それが常に1700px幅にならないようにすることです。次のようなものが役立つかもしれませんが、HTMLやスライドショーの実装方法によって異なります。

#slideshow { width: 100%; max-width: 1700px; } 

、このような何か私はこれをテストしていませんが、あなたはコンテナ要素に上記のCSSを置くと離れて得ることができるかもしれません:あなたは

#slideshow-container { width: 100%; max-width: 1700px; } 
#slideshow { width: 1700px; margin: 0 auto; } 

をこれをかなり簡単に行うことができます。 jsFiddle example

+0

ありがとうございました!私はそれを働かせることができた、私はまたoverflow-x:hiddenを使用したが、私はhtmlタグにそれを適用した。私は#slideshow_wrapper divから幅の宣言を削除しましたが、まだ動作していませんでした。スライドショーを作成するJSに属するスタイルシートも幅を宣言するまで、何が起こっているのか理解できませんでした。そこに私はちょうど幅を設定しました:オートとボイラー!それはよかった!!!! – Carin

1

あなたはdiv要素の大きさを知っているように、使用している:

div.slideshow { 
    position:absolute; 
    padding-left:50%; 
    margin-left:-850px; /* 1700/2 */ 

}

+0

あなたの答えに感謝します!私は実際にそれを動作させる方法を見つけました - しかし、私はあなたのソリューションが面白いと思っています。マージンを左に設定する:-850px;別の画面解像度のためにそれを台無しにしないでください?マージンを設定している場合、誰かが1024ピクセルであればどうなりますか?私はそれを試しに行くと思う:Dありがとう! – Carin

関連する問題