0

我需要创建 CSS div。

  • 顶部的标题（全宽）
  • 左侧的一个（180px）用于垂直菜单
  • 右边是主要内容

左侧的菜单将是 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%;
   .......
}

注意：切勿使用表格来对齐页面中的内容。始终使用 .css 文件中定义的 css 的 div，并为 div 标签定义适当的“类”属性。

于 2013-03-16T19:00:59.637 回答