0

这是我的标题：

<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 中的正文宽度大小设置为例如 1000 像素，但随后我将所有页面都对齐了。

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

4

2 回答 2

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

于 2013-01-22T18:08:23.390 回答
0

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

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

于 2013-01-22T18:44:26.717 回答