Html 自动展开边框、分区、页面_Html_Css

Html 自动展开边框、分区、页面

html css

Html 自动展开边框、分区、页面,html,css,Html,Css,我正在尝试创建一个最小高度为600像素的以正方形为中心的页面。页面应与文本一起展开。（离岸金融中心）页面还具有一些基于图片的边框，这些边框应位于页面后面。（显然。）我想我已经试过一百万种组合了。问题似乎是，如果外部div没有固定的高度，则div边框无法自动调整。由于展开文本，外部div不能具有固定高度这似乎很简单。还有很多建议。（那不行）我做了什么根本错误的事吗页面如下：（请注意，边框没有到达底部。）供日后参考。代码如下： <html xmlns="http://www.w3.

我正在尝试创建一个最小高度为600像素的以正方形为中心的页面。页面应与文本一起展开。（离岸金融中心）页面还具有一些基于图片的边框，这些边框应位于页面后面。（显然。）

我想我已经试过一百万种组合了。问题似乎是，如果外部div没有固定的高度，则div边框无法自动调整。由于展开文本，外部div不能具有固定高度

这似乎很简单。还有很多建议。（那不行）我做了什么根本错误的事吗

页面如下：（请注意，边框没有到达底部。）

供日后参考。代码如下：

<html xmlns="http://www.w3.org/1999/xhtml">
    <head> 
        <title>...</title> 
        <link href="..." rel="stylesheet" type="text/css">      
    </head> 
<body>

    <div id="container">
        <div id="topborder"></div>
        <div id="leftborder"></div>
        <div id="page">
            <div id="pageheadtext">...</div>
            <div style="float: right; margin-top: 30px;"><img src="/media/banner.jpg"></div>
            <div id="menubar" style="margin-top: 210px;">
                ...
            </div>
            <div id="sideNavigation"></div>
            <div id="bodyText" style="margin-top: 20px;">
                ...
            </div>
        </div>
        <div id="rightborder"></div>
        <div id="bottomborder"></div>
        <div id="footer">...</div>
    </div>

</body>
</html>

顺便说一句，这个页面是CMS驱动的，所以我不能仅仅破解一个有问题的页面。我真的很想大体上解决这个问题

你的CSS太复杂了，HTML结构也太复杂了，更不用说设计太旧了，字体也很难阅读。在所有你用内联风格添加香料的地方。。。这只会导致修复一个修复中的一个修复，而不会响应客户端调用，只进行简单的编辑/修改。
几乎不可维护保持简单。

信不信由你，这就是你所需要的：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>My page</title>
  </head>
  <body>

    <div id="container"> 
      <h1>Bymosegård i Hillerød</h1>
      <img src="http://bymosegaard-hillerod.dk/media/banner.jpg">

      <nav>
        <ul>
          <li><a href="">Forside</a></li> 
          <li><a href="">Info</a></li>
          <li><a href="">Regnskaber</a></li>
          <li><a href="">Referater</a></li>
          <li><a href="">Kontakt</a></li>
        </ul>
      </nav>

      <div id="content">
        <h2>Foretningsorden, relementer mm.</h2>
        <p>Foretningsorden, relementer, vedtægter mm.</p>
        <p>&nbsp;</p>
        <h3>Vedtægter</h3>
        ................. etc
      </div>
    </div>       
    <div id="footer">Bymosegårds Alle 3-9, 3400 Hillerød</div>

  </body>
</html>

哎呀，我糟透了。^^谢谢

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>My page</title>
  </head>
  <body>

    <div id="container"> 
      <h1>Bymosegård i Hillerød</h1>
      <img src="http://bymosegaard-hillerod.dk/media/banner.jpg">

      <nav>
        <ul>
          <li><a href="">Forside</a></li> 
          <li><a href="">Info</a></li>
          <li><a href="">Regnskaber</a></li>
          <li><a href="">Referater</a></li>
          <li><a href="">Kontakt</a></li>
        </ul>
      </nav>

      <div id="content">
        <h2>Foretningsorden, relementer mm.</h2>
        <p>Foretningsorden, relementer, vedtægter mm.</p>
        <p>&nbsp;</p>
        <h3>Vedtægter</h3>
        ................. etc
      </div>
    </div>       
    <div id="footer">Bymosegårds Alle 3-9, 3400 Hillerød</div>

  </body>
</html>

*{ margin:0; padding:0; } /* Global reset */
body{
  background:#EEEDE4;
  font: 10px/1.4 Helvetica, Arial, Verdana, sans-serif; 
  color: #666;
}
h1, h2, h3, p, ul, ol{
  margin: 7px 30px;
  font-weight:200;
}
h1{
  color:#333;
  font-size:1.5em;
  padding:25px 0
}
ul, ol  { padding-left:1.4em; }
nav     { background: #E9E9E9; }
nav li  { display:inline-block; }
nav li a{ display:inline-block; padding:5px 15px; }
#container > img{ width:100%; }
#container{
  position:relative;
  margin: 15px auto;
  width: 786px;
  background: #fff;
  padding:10px;
  box-shadow: 0 0 4px rgba(0,0,0,0.3);
}
#content{ margin:30px 100px; }
#footer{ text-align:center; }