1. ホーム
  2. 質問と答え
  3. CSS/HTMLのフルスクリーンサイト

CSS/HTMLのフルスクリーンサイト

2010-12-03 3 views
5

私はチャットサイトのウェブサイトデザインに取り組んできましたが、私が正しいものにしようとするすべての試みはこれまで失敗しました。私はテーブルでそれをやろうとしましたが、それは常に1つのブラウザ（ほとんどIEのtho）、divs、そしてもっと多くで失敗しました。CSS/HTMLのフルスクリーンサイト

ウェブサイトは、最小幅900、最小高さ500pxのフルスクリーンでなければなりません。私はjavascriptなしでこれをやりたがっています（私はJSで作ったのですが、これはそれがなくて済む必要があります：<）

これはどのように見えるべきかの写真です。私はそれは、Firefox + Chromeで作業しましたが、IEは従わないことを決定し、事前に

おかげ

EDIT

純粋なCSS/HTMLでこれが可能であると思います

http://imgur.com/2qHen

任意のルール...

<html> 
<head> 
<style type="text/css"> 
    body{ 
    margin: 0; 
    padding: 0; 
    border: 0; 
    outline: 0; 
    font-size: 100%; 
    vertical-align: baseline; 
    } 
</style> 
</head> 
<body> 

<div style="height: 100%; width: 100%;"> 
    <div style="position: relative; height: 100%; width: 100%; background-color: gray; min-width: 900px; min-height: 500px;"> 
    <div style="position: absolute; height: 30px;left:0px; right: 300px ; background-color: yellow; bottom: 0;"> 
    Input 
    </div> 

    <div style="position: absolute; height: 200px; width:300px; right: 0px; background-color: green; bottom: 0;"> 
    ad 
    </div> 

    <div style="position: absolute; bottom: 200px; width:300px; right: 0px; top: 20px; background-color: blue;"> 
    online 
    </div> 
    <div style="position: absolute; width:300px; right: 0px; top: 0px; height: 20px; background-color: red;"> 
    online menu 
    </div> 
    <div style="position: absolute; right: 300px; top: 0px; left: 0px; height: 20px; background-color: yellow;"> 
    tabs 
    </div> 
    </div> 
</div> 
</body> 

</html>

出典

2010-12-03 Jorik

+0

画像リンクが壊れているようです。 Tinypicを試してみませんか？ – Qix

+0

オールライト、http://i52.tinypic.com/33m3g3o.png – Jorik

+0

クール、それは動作しますが、私は以下の私の答えを更新します。 – Qix

答えて

6

Alrあなたの質問からいくつかの質問が抽出されました。

まず、少しヒント：IEのCSSは、他のブラウザとほとんど異なる場合がほとんどです。このためには、IEにのみ適用されるプロパティの前に、さまざまな "IE Hack"シンボルの1つを使用します（私は＃記号を使用します）。例えば

：

html 
{ 
    background: #F00 ; 
    #background: #0F0 !important ; 
}

は、すべてのブラウザが赤の背景を表示ようになります、とだけIEが緑色の背景を持っています。

次に、min-widthとmin-heightのプロパティを使用しないでください。彼らはすべてと互換性があります（そして、IE6以前ではバグがあります;詳細はhereをチェックしてください）。 （次のように）htmlと体の両方に他の方法については

html, body { 
    width: 100% ; 
    height: 100% ; 
    min-width: 900px ; 
    min-height: 500px ; 
}

を100％に（明らかに）幅と高さを設定し、このすべて、あなたは全体ページデータをラッピングしてみてください（開始右ののbodyタグの後にdivを付けて（ブロックを残しておきます）、ページ全体にまたがるようにします。

クリーンなフルスクリーンサイトが必要な場合は、overflowプロパティをhtml/bodyにも適用する必要があります。ウィンドウの幅の外に出たときにコンテンツを失う場合は、を取り除くとスクロールバーが削除されます。

希望すると便利です。

EDIT：あなたの新しいイメージのリンクを見た後

、これは簡単です！：divタグはデフォルトでブロックされている、以下は動作する必要があることを念頭に置い]

キーピング（これはテストされていないので、いくつかの調整が必要な場合があります）：

<body> 
<div id="page"> 
    <div id="right"> 
     <div class="thirty">Top bar</div> 
     <div class="tall">Middle bar</div> 
     <div id="rt_bot">Bottom bar</div> 
    </div> 
    <div id="left"> 
     <div class="thirty">Left Top Bar</div> 
     <div class="tall">Left Mid Bar</div> 
     <div id="lf_bot">Left Bottom Bar</div> 
    </div> 
    <div id="container"></div> 
</div> 
</body>

とCSS：

html, body { 
    width: 100% ; 
    height: 100% ; 
    min-height: 500px ; 
    min-width: 900px ; 
    margin: 0px ; 
} 

div#page { 
    height: 100% ; 
} 

div#right { 
    float: right ; 
    height: 100% ; 
    width: 300px ; 
} 

div#rt_bot { 
    height: 200px ; 
} 

div#left { 
    float: left ; 
} 

.thirty { 
    height: 30px ; 
} 

.tall { 
    height: 100% ; 
} 

div#lf_bot { 
    height: 50px ; 
}

出典

2010-12-03 20:44:26 Qix

+0

ねえ、私は分の幅/高さとIEのshitnessについて知っているが、それはCSSでレイアウト全体を作る方法を解決していません。私は今私が手がかりから外れているように多くのことを試みました。私はそれらを正しい方法で配置することはできません...おそらくそれを作る方法を知っていますか？ – Jorik

+0

あなたの一歩先を行く。私はあなたのイメージに関してこの記事を編集していました。それはあなたに良いスタートを与えるはずです。そのアイデアは、セクションを幅広く分割してから下に向かって作業することです（左ペインと右ペインを最初にどのようにしたのか、各ペインを最初に実行したのか、それぞれの行を表示するのか）。 – Qix

+0

私はあなたの例を試しましたが、試しカントーのために= /おかげですべての作業が、それは本当にトリッキーなレイアウトである：ここで、pは絵でhttp://i.imgur.com/eyDrL.pngだけ幅のようなものがあった場合：100％ - 30px; __ ; – Jorik

0

これは実際には非常に複雑な質問です。私はそれが純粋にCSSおよびJavaScriptの無/ jQueryを使って行うことが可能です全くわかりません。

ボックスモデルの設定方法は、全幅、高さのレイアウトには適していません。

出典

2010-12-03 21:59:37 Chris

+0

私が最初の投稿で行った編集を見ると可能ですが、IEはいつものようにそれをねじ込みます。（ – Jorik

+0

これは純粋なCSSで完全に可能です。これはCSSが作成したものです！ – Qix

0

通常、しかし...何も実際に動作しない

IE8で動作

は、おそらくIE6では動作しません...私はテーブルを使用して好きではありませんが、自動高さの問題は、私がこれに変わりますIE6で、心配する必要はありません。 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
    <head> 
    <title>Untitled</title> 
    <style type="text/css"> 

html, body {width: 100%; height: 100%; margin: 0 0 0 0; padding: 0 0 0 0; } 
table#content {min-width: 900px; min-height: 500px; width: 100%; height: 100%; border-collapse: collapse; } 
table#content td {border: 1px solid black; } 
table#content td.topLeft {height: 30px; } 
table#content td.topRight {width: 300px; height: 30px; } 
table#content td.bottomLeft {height: 30px; } 
table#content td.bottomRight {width: 300px; height: 200px; } 
table#content tr.spacing {height: 170px; } 

    </style> 
    </head> 
    <body> 
    <table id="content"> 
     <tr> 
     <td class="topLeft">Top Left</td> 
     <td class="topRight">Top Right</td> 
     </tr> 
     <tr> 
     <td class="centerLeft" rowspan="2">Center Left</td> 
     <td class="centerRight">Center Right</td> 
     </tr> 
     <tr class="spacing"> 
     <td class="bottomRight" rowspan="2">Bottom Right</td> 
     </tr> 
     <tr> 
     <td class="bottomLeft">Bottom Left</td> 
     </tr> 
    </table> 
    </body> 
</html>

出典

2010-12-04 02:43:00 Yoshiyahu

+0

テーブルは極端です私はまだ出張中ですが、まだこの質問を監視しています。私は早めに家に帰るでしょう... – Qix

+0

テーブルは完全に不要です。私はこれを書いたときに急いでいました。 – Yoshiyahu

+0

返事が遅れて申し訳ありませんが。プラハにあった、インターネットはもはや機能しないことを決めた。ホームへ戻る今、私は今それを自分自身を固定！すべてのヘルプカントーてくれてありがとう。私は相対的な位置と分を持っているトップのdivにそれを作りました-width/height。div内のdivは絶対位置に置かれ、すべてのブラウザでうまくいきます！もし私のウェブサイトの新しいベータ版でそれを見ることができます：http://demontunes.com/v2.0 /（ウェブサイト全体がmaを得るP）：JOR金曜日のオーバーホールは今GFXを見ていません – Jorik

 関連する問題

  • 関連する問題はありません^_^