0

CSS div を作成する必要があります。

  • ヘッダーの上部に 1 つ (全幅)
  • 垂直メニューの左側 (180px) に 1 つ
  • メインコンテンツ用に右側に1つ

左側のメニューが iframe になり、右側のメニューも iframe になります。

私は現在、このコードを持っています:

<style type="text/css">
body,html {
    height:98%;
}
#top-bar {
    width:100%;
    padding:10px 10px 10px 10px;
    margin:0 0 10px 0;
    border-bottom:solid 1px #000000;
    top:0;
    left:0;
}
#left-bar {
    width:170px;
    display:inline;
    float:left;
    position:fixed;
    z-index:999;
}
#right-bar {
    margin-left:180px;
    width:auto;
    display:inline;
}
#space {
    width:100px;
    height:120px;
}
</style>

<table width="100%" border="0" cellspacing="10" cellpadding="10" style="position:fixed;z-index:999;top:0;left:0;background-color:#fff">
  <tr>
    <td><a href="index.php"><img src="http://www.integradigital.co.uk/images/company/logo.png" width="282" height="41" /></a></td>
    <td align="right">Hello <?php echo $_SESSION["forename"]; ?> | <a href="logout.php">Logout</a></td>
  </tr>
  <tr>
    <td colspan="2"><hr /></td>
  </tr>
</table>

<div id="space"></div>

<div id="left-bar"><iframe src="header.php" width="180px" height="480px" frameborder="0" scrolling="auto"></iframe></div>

<div id="right-bar">
<iframe name="rightiframe" src="dash.php" width="100%" height="480px" frameborder="0" scrolling="auto"></iframe>
</div>

しかし、右のコンテンツは左のメニューの下にあるようです

スクロール時に上部のヘッダー (現在はテーブル内) が移動しないようにする必要があり、左側のメニュー バーでも同じことが必要であり、異なるサイズの画面にすべて収まるように % にする必要があります。

誰でも私がそれで何ができるか考えていますか?

4

2 に答える 2

0

まず、スタイルを別のスタイル シートに移動し<head>、ページの からこれにリンクします。<style>この要素は維持するのが面倒で、ページ間で重複するため使用しないでください。この要素はページ<style>の にあってはなりません。<body>

また、レイアウトにテーブルを使用しないでください。それはセマンティックではありません。

浮動要素をインラインにする意味はありません。インラインにはなりません。これらのインライン要素がフローティングされていない場合、指定した幅は適用されません。styleまた、要素に属性を使用しないでください- CSS を使用してください。

これらの提案はおそらく特定の問題を解決するものではありませんが、現時点ではすべてが少し混乱しているため、この時点で修正する必要があるより大きな問題があると思います...

于 2013-03-16T17:50:44.230 に答える
0

以下の変更を試してみてください。

<div id="left-bar">
   <iframe src="image.png" width="100%" height="100%" frameborder="0"   scrolling="auto"></iframe>
</div>
<div id="right-bar">
   <iframe name="rightiframe" src="image.png" width="100%" height="100%" frameborder="0" scrolling="auto"></iframe>
</div>

#left-bar {
   width: 20%;
   ........
}
#right-bar {
   width: 80%;
   .......
}

注: ページ内のコンテンツの配置に表を使用しないでください。div タグに適切な「クラス」プロパティが定義された .css ファイルで定義された css で常に div を使用します。

于 2013-03-16T19:00:59.637 に答える