窗口尺寸小（比页面窄）页面结构出错答案

【问题标题】：With small window size (narrower than page) the page structure is getting wrong窗口尺寸小（比页面窄）页面结构出错
【发布时间】：2013-01-06 01:33:25
【问题描述】：

这是我的标题：

<head>
<link href="/css/header.css" rel="stylesheet" type="text/css">
</head>

<body>

<div id="background"><img src="/multi/background.jpg" width="100%" height="100%" alt=""></div>

<div id="content">

<div align="center" class="headtable">
    <table width="980" border="0" height="40">
        <tr>
            <td width="503" rowspan="2" height="35" align="left" valign="middle"><a href="/index.php"><img src="/multi/header.png" width="344" height="32" hspace="0" border="0"/></a></td>

            <td width="424" align="right" valign="top">
                <a href="/index.php" class="headlink">Italiano</a>  
                <span class="headlink">|</span>   
                <a href="/ger/index.php" class="headlink">Deutsch</a>  
                <span class="headlink">|</span>   
                <a href="/fra/index.php" class="headlink">Français</a>  
                <span class="headlink">|</span>   
                <a href="/index.php" class="headlink">Home</a>
                <span class="headlink">|</span>   
                <a href="#" onClick="window.print();" class="headlink">Stampa Pagina</a>
      </tr>
    </table>
</div>

<div class="buttontable">
<table width="1080" border="0" cellpadding="0" align="center">
    <tr>
        <td height="20" align="center"> 

        <a class="button" href="/o.php">o</a>
        <a class="button" href="/p.php">p</a>
        <a class="button" href="/a.php">a</a>
        <a class="button" href="/s.php">s</a>
        <a class="button" href="/st.php">st</a>
        <a class="button" href="/p.php">p</a>
        <a class="button" href="/t.php">t</a>
        <a class="button" href="/c.php">c</a>
       </td>
    </tr>
</table>
</div>
</div>
</body>

还有css文件：

/* pushes the page to the full capacity of the viewing area */
html {
    height:100%;
}
body {
    height:100%;
    margin:0;
    padding:0;
}
/* prepares the background image to full capacity of the viewing area */
#background {
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
}
/* places the content ontop of the background image */
#content {
    position:relative; z-index:1;
}

/* not apply if IE6 or lower */
* html {
  background-color: #6f6;
}
* body {
    height:100%;
    margin:0;
    padding:0;
}
* #background {
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
}
* #content {
    position:relative; z-index:1;
}
/* END not apply if IE6 or lower */

.headtable {
    background-color:#02346F;
}

.headlink {
    font-family:Arial, Helvetica, sans-serif;
    font-size:12px;
    text-decoration:none;
    color:#d8dfea;
}

.buttontable {
    background-color:#F00;
}

a.button {
    display:inline-block;
    color:#FFF;
    font-family:Calibri;
    font-size:18px;
    font-weight:bold;
    padding:2px 16px;
    text-decoration:none;
    font-variant:small-caps;
}a.button:hover {
    background-color:#F00;
    color:#02346F;
    padding:2px 16px;
    font-size:18px;
    font-weight:bolder;
}

a.buttonselect {
    background-color:#ffffff;
    display:inline-block;
    color:#02346F;
    font-family:Calibri;
    font-size:18px;
    font-weight:bold;
    padding:2px 16px;
    text-decoration:none;
    font-variant:small-caps;
}

现在，当窗口大小比页面 (header.php) 窄时，表格正在成为背景（我不知道您是否理解我的意思，但我无法解释...）

我得到的第一个解决方案是将 CSS 中的正文宽度大小设置为例如1000px，但后来我把所有的页面都对齐了。

我该如何解决这个问题？问题不是来自背景图片，因为我在没有背景的情况下也测试了所有...

【问题讨论】：

标签： html css background size width

【解决方案1】：

如果可以的话，请对您的代码提出一些建设性的意见。

不应在布局中使用表格。尝试使用语义正确的 html 标签。你的导航是一个链接列表，所以它应该是<ul>
尽量将您的内容和样式分开。这样，使您的代码保持最新状态要容易得多。您也可以通过加载不同的样式表来为您的网站提供完全不同的外观。而且它使更改内容变得更加容易，因为您始终知道在哪里寻找它们。

因为只提供 cmets 会很容易，所以我将举一个示例，说明如果我必须编写 HTML 会是什么样子：

<body>

  <div id="wrapper">

    <div id="header">

       <a id="logo" href="/index.php" alt="company logo"><img src="/multi/header.png"/></a>

       <ul id="main-nav">
           <li><a href="/index.php">Italiano</a></li>    
           <li><a href="/ger/index.php" class="headlink">Deutsch</a></li>  
           ...    
       </ul>

       <div class="clear"></div>

    </div>
  </div>
  ...

为了比较，这里是你的代码：http://jsfiddle.net/ERghQ/
这是我的代码：http://jsfiddle.net/JChZT/

请注意，我还添加了一些快速 CSS 来模仿您在示例中的样式。请注意，现在解决了宽度问题，因为我使用浮点数和 div，而不是表格和固定宽度。调整窗口的大小，您会注意到内容会适应。

再一次，我并不是要分解您的工作，我只是想帮助您并向您展示当今的工作方式。一开始可能需要一些时间来适应，但您很快就会看到优势。让我知道我的代码是否需要更多解释。希望我能帮助您指出正确的方向！

编辑：
带有.clear 类的空div 用于解决所谓的clearfix 问题。大多数浏览器不会给您的标题任何高度，因此使其不可见，因为所有直接子级都是浮动的。（在小提琴中删除它，你会明白我的意思。）有很多方法可以解决这个问题，你会发现如果你谷歌 clearfix。我使用的方法可能不是最好的，因为它要求您在内容中添加一个空 div 仅用于布局，这与我自己的主张相悖，即您应该始终将内容和样式分开，但这是一种快速简便的方法.我建议您在谷歌上搜索一个合适的 .clearfix 类并将该类应用于您的标题（以及任何其他需要清除的容器）。

【讨论】：

非常感谢您的回答。非常感谢您的帮助。我将尝试根据您的建议实施我的网站。如果有什么不清楚的地方，我会再给你写信。再次感谢您！
@Pecorat 我在我的回答中添加了对clear 的解释
谢谢，我明白了！我会使用你的解决方案（不是最好的，但很简单！）并在谷歌中搜索其他信息

【解决方案2】：

这是因为您的表格是固定宽度的，而您的容器是可变宽度的。当视口比固定宽度窄时，表格会跳转。此外，如果您想将 div 与表格居中，请使用 CSS 而不是内联样式。

.headtable
{
background-color:#02346F;
width:65% /* arbitrary width, use your own discretion */
margin: 0 auto;
}

由于您使用这些表格进行导航，我建议您改用无序列表。

这是我用来启动菜单的网站。它在语义上对你的代码来说更好，并且使用 CSS 比固定宽度的表格更容易控制。

http://css.maxdesign.com.au/listamatic/index.htm

【讨论】：

感谢您的回复！我现在发布了完整的 HTML 源代码。我将宽度设置为 200% 并在 jsfiddle 上解决了问题，但在真正的浏览器中没有解决？
再看看我的回答，看来你是在尝试使用一组表格进行导航。
是的，我正在使用表格进行导航...我会看看你的网站，如果我得到好的结果会告诉你。事实上，正如我现在所看到的，只有表格出了问题……我在页面上有一些内容（在标题下方），而 div（s）我没有任何问题。再次感谢您！