Question

这是我的标题：

<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，但随后我将所有页面都排除在外。

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

Answer 1

这是因为你的桌子是一个固定的宽度，你的容器是可变宽度。当视口比固定宽度窄时，表会跳转。此外，如果您希望将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

Answer 2

如果可以的话，对你的代码做一些建设性的评论。

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

因为只是给出评论很容易，我会举例说明如果我不得不写它的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，而不是表格和固定宽度。使用窗口大小播放，您会发现内容会适应。

再一次，我不是故意打破你的工作，我只是试着帮助并告诉你现在的事情是如何完成的。一开始可能需要一些时间来适应，但你很快就会看到它们的优点。如果我的代码需要更多解释，请告诉我。希望我帮助指出你正确的方向！

修改
带有div类的空.clear用于解决所谓的clearfix问题。大多数浏览器不会给你的标题任何高度，因此使它不可见，因为所有直接的孩子都是浮动的。（在小提琴中删除它，你会看到我的意思。）有很多方法可以解决这个问题，因为你会发现你是否google clearfix。我使用的方法可能不是最好的，因为它要求你在内容中添加一个空div只是为了布局，这违背了我自己声称你应该始终保持内容和样式分离，但它是快速简便的方法。我建议你做一些谷歌搜索适当的.clearfix类并将该类应用于你的标题（以及任何其他需要清除的容器）。

窗口大小（比页面窄）页面结构出错

2 个答案: