Question

我无法使用下面的css安排项目。

我遇到的一个更明显的问题是表格列标题的强文本是黑色的，与表格上方信息中的强文本不匹配。

我的主要问题是Layer3不会到达Layer2的底部。我希望它低于信息列，但是目前第3层的h1出现在右图的旁边。

如何强制layer3停留在Layer2的底部？

将信息组织到列中的更好方法是什么，而不是我目前使用leftlayer，leftlayer2和rightlayer的方法？

<html><head><title>Auctions</title>

<link rel="stylesheet" href="stylesheet.css" type="text/css">
</head>
<body>
<div id="Layer0">
<div id="Layer2">
<h1>Org."EdHardy"Herren"Hoodie"Gelb"Gr."XL"</h1>
<div id="leftlayer" class="leftlayer">
<p><strong>Username: </strong>trend-mode-2008
</p>
<p><strong>Article Number: </strong>250405322811
</p>
<p><strong>Subtitle: </strong>Original Neu Kollekt
</p>
<p><strong>Auction Start: </strong>11.4.2009
16:46:29 </p>
<p><strong>Auction End: </strong>21.4.2009 16:46:29
</p>
<p><strong>Auction Type: </strong>Buy Now
</p>
<p><strong>Category: </strong>Jacken
</p>
</div>
<div class="leftlayer2">
<p><strong>Condition: </strong> New
</p>
<p><strong>Total Items: </strong> 6
</p>
<p><strong>Total Sales: </strong> 1
</p>
<p><strong>Start Price: &#8364;</strong> 0.00
</p>
<p><strong>Buyitnow Price: &#8364;</strong> 89.00
</p>
<p><strong>Bids: </strong> 1 </p>
<p><strong>Revised: </strong> No
</p>
</div>
<div class="leftlayer2">
<p><strong>Private: </strong> No
</p>
<p><strong>Finished: </strong> No
</p>
<p><strong>Cancelled: </strong> No
</p>
<p><strong>Paypal: </strong> No
</p>
<p><strong>Country: </strong> Germany
</p>
<p><strong>Location: </strong> Herne
</p>
<p><strong>Shipping to: </strong> Germany</p>
<form name="categoryForm">
<p><input name="radiobutton" value="fakeapproved" type="radio">Fake (Approved)</p>
<p><input name="radiobutton" value="fakesuspected" type="radio">Fake (Suspected)</p>
<p><input name="radiobutton" value="keyword" type="radio">Forbidden Keywords</p>
<p><input name="radiobutton" value="parallelimport" type="radio">Parallel Imports
<input name="Submit" value="Update" onclick="handleClick('250405322811', 'Hardy', '1', '250405325721', 'trend-mode-2008');return false" type="submit"></p>
</form>
</div>
<div id="rightlayer"><a href="#" onclick="makewindows(&amp;amp;quot;&lt;img src='..\/images\/250405322811.jpg' &gt;&amp;amp;quot;); return false;">
<img src="../images/250405322811.jpg" height="100" width="100"></a>
<p><a href="#" onclick="makewindows(&amp&lt;quot;); return false;">Click
for full description </a></p>
<p><a href="#" onclick="deleteRec('250405322811', 'Hardy', '1', '250405325721')">DELETE</a>
</p>
</div>
<div id="Layer3">
<h1>Hardy Auctions</h1>
<table border="0" width="85%">
<tbody>
<tr>
<td width="15%"><strong>Seller ID</strong></td>
<td width="10%"><strong>Start Date</strong></td>
<td width="65%"><strong>&gt;Description</strong></td>
<td width="10%"><strong>Category</strong></td>
</tr>
<tr id="article_250405322811">
<td><a href="#" onclick="updateByUser('trend-mode-2008','')">trend-mode-2008</a></td>
<td><a href="#" onclick="updateByPk('Layer2', '250405322811', 'Hardy', '1')">11
04 2009</a></td>
<td><a href="#" onclick="updateByPk('Layer2', '250405322811', 'Hardy', '1')">Org."EdHardy"Herren"Hoodie"Gelb"Gr."XL"</a></td>
<td></td>
</tr>
</tbody>
</table>
</div>
<div id="tablefooter" class="tablefooter">
<div id="tablefooterleft" class="tablefooterleft"><a href="#" onclick="updateByPage('Layer3', 'Hardy', '1')">&lt;&lt;-First
</a><a href="#" onclick="updateByPage('Layer3', 'Hardy', '1')">&lt;-Previous</a>-----------------------------------------------------------------<a href="#" onclick="updateByPage('Layer3', 'Hardy', '2')">
Next -&gt; </a><a href="#" onclick="updateByPage('Layer3', 'Hardy', '7')"> Last
-&gt;&gt;</a></div>
</div>
</div>
</div>
</body></html>

和CSS：

#Layer0 {
  width: 100%;
  height: 100%;
}

body{
margin:10px 10px 0px 10px;
padding:0px;
color:#999999;
font-family:"Trebuchet MS",arial,sans-serif;
font-size:70.5%;

}

#Layer2 {
background:#fff;
color:#000;
voice-family: "\"}\"";
voice-family: inherit;
padding:20px;

}

#Layer2 p {color:#888;}

#Layer2 a, a:link { color:#006633; text-decoration: none;}

#Layer2 a:hover, a:active{ color:#FF6666; text-decoration: none;}

html>body #Layer2 {
}

p,h1,pre {
margin:0px 10px 10px 10px;
font:Arial, Helvetica, sans-serif;
font-size:12px;
line-height: 1.6em;
text-align:justify;
text-decoration:none;
}

h1 {
font-size:2.5em;
text-align: center;
color:#ccc;
padding-top:15px;

}

h3 {
font-size:14px;
color:#999;

}

.leftlayer {
  float: left;
  left: 20%;
  width: 20%;
  height: 100%;
  margin-right: 10%;
}
.leftlayer strong {
  text-align: left;
}
.leftlayer2 {
  float: left;
  width: 20%;
  height: 100%;
  margin-left: 2%;
}
#rightlayer {
  float: left;
}
#Layer3 {
  float: bottom;
}

Answer 1

规则浮点数：底部;无效。浮动有three valid values。他们是左，右，没有。如果你想让div包裹下来那么你应该通过改变float：bottom来设置它来清除前一个div的float。清除：两者;或清楚：左;

Answer 2

这是我必须阅读的大量代码。让我先谈谈几点：

首先，编码风格有点老派：
- 使用非语义ID，例如'leftsomething'从长远来看并不是最佳的
- 链接也是非语义的
- onclick属性应替换为javascript生成的事件处理程序
作为Dave already pointed out，CSS'flora'属性无法设置为'bottom'，您必须使用'clear'而不是
不要在HTML代码中定义样式属性，例如表格边框和单元格宽度

要创建页面布局，您可以咨询htmldog，有一个nice tutorial。将图层名称更改为更有意义的图层名称，例如＃article，＃price，＃status，这样您在重新设计时就不会感到困惑。

您还应该将Eric Meyer's CSS reset放在样式表的顶部，以便在设置边距，填充和字体时不会被您选择的浏览器所偏向。

并且不要忘记在您的单选按钮旁边放置标签，这样对用户来说这将是一个更容易的目标：单击相关标签就像单击按钮本身一样。这有点棘手，因为你需要使用唯一的id，而你需要使用相同的名称，因为名称在服务器端使用，而label标签使用的id作为钩子。例如，您可以通过组合给定输入的名称和值来创建唯一名称，例如：

<p><input name="radiobutton" value="fakeapproved" type="radio" id="radiobutton_fakeapproved"><label for="radiobutton_fakeapproved">Fake (Approved)</label></p>

<p><input name="radiobutton" value="fakesuspected" type="radio" id="radiobutton_fakesuspected"><label for="radiobutton_fakesuspected">Fake (Suspected)</label></p>

Answer 3

您有多个css validation问题：

15   #Layer2     Value Error : voice-family Parse Error :"\"
18   \"  Parse Error \""; voice-family:inherit;
21       Parse Error :20px; } #Layer2 p
36   p, h1, pre  Value Error : font Arial is not a font-size value : Arial,Helvetica,sans-serif
72   #Layer3     Value Error : float bottom is not a float value : bottom

在您修复之前，无法判断是否会导致您的特定问题。我还建议尽可能多地摆脱无关的CSS，以便在寻求帮助之前将问题简化为最简单的形式。否则像我这样的人必须阅读一堆无用的字体和语音相关的CSS，这与定位无关。

用标题和表格安排css图层的问题

3 个答案: