Question

我的代码：

HTML

<body>

<div class="gridContainer clearfix">
  <div id="header">
<!-- Start NavBar -->
    <div id="navbar" name="nav-top">
      <ul>
          <li><a href="index.html">Home</a></li>
          <li><a href="about.html">About</a></li>
          <li><a href="#">Contact</a></li>
          <li><a href="#">FAQ</a></li>
      </ul> 
    </div>
  </div>

<!-- End NavBar/Start Content -->

<div id="content">

<div id="inner">

<!-- Content Header -->

  <table id="table_1">
    <tbody>
      <tr id="tab_head">
        <th><h1>About me | Section 1</h1></th>
      </tr>
      <tr id="para_1">
        <td><h3>Hello and Welcome!</h3></td>
      </tr>
    </tbody>
  </table>

<!-- Content Body -->

<table id="table_2">
  <tbody>
    <tr>
      <td><p>Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah BLah Blah Blah Blah Blah Blah Blah.</p></td>
    </tr>
  </tbody>
</table>
</div>

</div>

<div id="my-footer">This is the content for Layout Div Tag "footer"</div>

</div>
<!-- Add JS -->
</body>

CSS

#navbar {
    width: 100%;
    float: none;
    margin: 0 0 3em;
    padding: 0 0 0 0;
    background-color: #ffffff;
    border-bottom: 1px solid #2B9EFF;  }

#navbar ul {
    list-style: none;
    width: 730px; /* 730px width was 800px before, but changed to slide navbar to right */
    margin:0 auto;
    overflow:hidden; }

#navbar li {
    float: left; }

#navbar li a {
    width:150px;
    display: block;
    padding: 10px 15px;
    text-decoration: none;
    font-weight:normal;
    color: #a3a3a3;
    border-right: 1px solid #ccc; }

#navbar li:first-child a {
    border-left: 1px solid #ccc; }

a:link, a:visited {
    background-color: #ffffff;
    text-align: center;
    text-transform: uppercase;
}

#navbar a:hover, a:active {
    background-color: #2B9EFF;
    color: #141414;
    font-weight:lighter; }

/* Content */

table {
    width: 100%;
    text-align: center;
}

#para_1 td {
    text-align:center;
}

#table_2 {
    width:100%;
    text-align:justify;
    margin
}

#my-footer {
    width:100%;
    height:80px;
    position: fixed;
    bottom:0;
    left: 0;
    clear:both;
    background:#2B9EFF;
    text-align:center; }

我的主要关注点 - 如果您还没有注意到 - 是我的主导航栏应该位于其他所有位置的顶部，不在页面的中心。到目前为止，我不得不忍受的是半成品造型，最终导致我现在所拥有的。看起来我可以通过设置像素宽度来稍微调整它，但是当我尝试用百分比来处理它时，它就会被打破。

我想要开始工作的第二点是下面的内容，其中包含我的各种摘要以及最终将托管某些其他内容（链接，图像等）的内容。我以为我可以用一张桌子来工作，但我不能为我的生活让“抽象”（Blah）内容集中。那么，我当时所做的就是创建第二张桌子，以为我可以调整两侧（右侧和左侧）的桌子边距，以便将所述摘要放在中心位置。

它不起作用。

我目前正在使用Adobe CS6并使用液体网格布局启动页面。我想专注于布局/风格，也会考虑用户显示器的整体不同分辨率/尺寸。换句话说，我想通过手机或平板电脑进行调整。

请列出任何建议。对于这些东西我是一个完全的新手，所以我觉得来这里会给我一个更好的机会来理解我做错了什么。

请随时询问更多信息，但我认为到目前为止我提供的内容应该足够考虑我的初步查询。

如何调整导航栏？

在考虑液体时，我可以将当前元素保持在他们所处的位置/样式中吗？网格布局，还是我必须尝试不同的路径？

为什么我无法在第二张桌子的边缘右侧添加左边？

感谢您提出的任何建议！

Kindest Regards ，

T.R.G。

Answer 1

你必须添加这个类：

.clear {
  clear: both;
  float: none;
}

CSS更改：

#navbar ul {
  list-style: none;
  width: 730px;
  overflow: hidden;
  clear: right;
  float: right;
  margin: 0;
  padding: 0;
}

#navbar {
  width: auto;
  clear: right;
  float: right;
  padding: 0 0 0 0;
  background-color: #ffffff;
  border-bottom: 1px solid #2B9EFF;
}

HTML更改：

<div id="header">
<!-- Start NavBar -->
    <div id="navbar" name="nav-top">
      <ul>
          <li><a href="index.html">Home</a></li>
          <li><a href="about.html">About</a></li>
          <li><a href="#">Contact</a></li>
          <li><a href="#">FAQ</a></li>
      </ul> 
</div><div class="clear"></div>
  </div>

Answer 2

我按照原来的方式离开了HTML，但我最终在CSS上使用了这个：

<强> CSS

#navbar {
    width: 100%;
    /* float: none; */
    margin-bottom: 3em;
    margin-right: auto;
    margin-left: auto;
    padding: 0;
    float:none;
    background-color: #ffffff;
    border-bottom: 1px solid #2B9EFF;  }

#navbar ul {
    list-style: none;
    width: auto;/* 730px width was 800px before, but changed to slide navbar to right */
    margin:0 auto;
    padding: 0 20% 0 20%;
    overflow:hidden; }

table {
    width: 100%;
} 

#table1 th, td {
    width:auto;
    float:none;
    text-align:center;
}

#table_2 {
    width:50%;
    float:none;
    margin: 0 auto;
    text-align:justify;
}

现在，这就是我的方式 - 直到我想出一种通过样式在页面上扩展列表的方法。如果您注意到，放置在列表底部（navbar）元素（li）的边框会淡出并且不会跨越页面，这不是我想要的。从设计的角度来看，页面看起来不一致且前卫，因为页脚本身跨越页面。所以，如果你觉得你有一个想法如何解决这个问题，请告诉我。

顺便说一句，我要感谢Peter Szombati的贡献。

虽然最终没有真正帮助，但他最终给了我一些导致我上面的观点。如果您注意到，我确实对第二个表格（宽度）采取了他的造型建议。

谢谢大家，

度过愉快的一天。

T.R.G。

需要帮助对齐/居中导航栏＆amp;表格内容（CSS）

2 个答案: