Question

我正在为某人创建一个网站，我的html / css很生疏，我真的需要在这个网站上进行侧面导航。

我有侧边栏（#menu），然后我想在#menu左边有两个div（#slider在#container之上）。

我该怎么做？代码如下，你也可能想知道#slider是我上网的照片滑块：

<style type="text/css">
body {font-family: Arial; background-color: #eeeeee; background-image: url(Images/bg.png); background-position: bottom; background-repeat: repeat-x; height: 100%; background-attachment: fixed; color: #333333;}
div#menu {float:left;margin-left: 25%; margin-right:25%; font-size: 40px; padding-top: 10px; padding-bottom: 10px; width: 10%; border: 1px solid #cccccc; text-align: center; word-spacing: 15px; background-color: #ffffff; margin-top: 10px;}
div#container {padding-left: 10px; padding-right: 10px; padding-top: 10px; padding-bottom: 10px; margin-left: 25%; margin-right: 25%; width: 40%; border: 1px solid #cccccc; text-align: left; background-color: #ffffff; margin-top: 10px;}
a {color: #666666; text-decoration:none;}
a:hover {color: #333333; text-decoration: underline;}
ul, li {list-style-type: none;}
#slider {width:600px;height:300px; margin-left: 25%; margin-right: 25%; margin-top: 10px;}
div.navBulletsWrapper {display:none;}
</style>

</head>

<body>

<div id="menu">
<li><a href="index.htm">Home</a></li>
<Br>
<li><a href="about.htm">About</a></li>
<br>
<li><a href="products.htm">Products</a></li>
<Br>
<li><a href="news.htm">News</a></li>
<br>
<li><a href="contact.htm">Contact</a></div></li>

<div id="slider">
        <img src="1.jpg" />
        <img src="2.jpg" />
        <img src="3.jpg" />
    </div>

<div id="container">
Placeholder text.
</div>

Answer 1

让我们暂时忘记你的非验证性HTML，尽管有很多话要说。

您的主要问题是缺少结构，如果它们位于公共div内，您会发现更容易对齐滑块和容器。您的代码应如下所示（示意图）：

<div id="menu">
  <ul>
    <li><a href="index.htm">Home</a></li>
    <li><a href="about.htm">About</a></li>
    <li><a href="products.htm">Products</a></li>
    <li><a href="news.htm">News</a></li>
    <li><a href="contact.htm">Contact</a></li>
  </ul>
</div>
<div id="main">
   <div id="slider">
    <img src="1.jpg" />
    <img src="2.jpg" />
    <img src="3.jpg" />
   </div>
   <div id="container">
     Placeholder text.
   </div>
</div>

这样，您可以根据需要（右或左）浮动#menu和#main。

对于代码中的其他问题，始终将li包装在ul或ol中，并且永远不要使用br来创建垂直空间，更喜欢使用margin或padding。 Html仅用于文档结构，CSS负责可视化部分。

Answer 2

首先清理你的HTML。如果您不确定要修复什么，请通过W3C验证程序运行它。 http://validator.w3.org/#validate_by_input

您想要菜单中的滑块和容器吗？如果是这样，你很快就关闭了你的第一个div。此外，我不确定你的利润百分比会给你想要的感觉。

请对您的问题稍微具体一点，并修正您的标记。

将两个div对齐到一个右侧

2 个答案: