span 和 div 的定位问题
首先，我不是这方面的专家，但我喜欢尝试改进...
这是我的问题 http://kebax.dk/testdesign/?page=classes。
这是后面的代码
...
<body>
<div id="outercontainer">
<div id="navpanel">
<h3>Navigate:</h3>
<a href="?page=home">Home</a><br />
<a href="?page=generalinfo">General info</a><br />
<a href="?page=classes">Classes</a><br />
<a href="?page=skills">Skills & Mounts</a><br />
<a href="?page=proffs">Professions</a><br />
<a href="?page=guild">Guild</a><br />
<a href="?page=travel">Travelling</a><br />
<a href="?page=aution">Auctionhouse</a><br />
<a href="?page=pvp">PvP</a><br />
<a href="?page=raids">Raids & Roles</a><br /><br />
</div>
<div id="container">
<?php
php-include script
?>
<span><center><hr />Copyright ©2011 my name</center></span>
</div>
</div>
</body>
...
这是 LESS 样式表：
h2 {
font-family: 'Orbitron';
font-weight: bold;
color: #fff;
.shadowtext(2px, 2px, 5px, #ddd);
}
h3 {
font-family: 'Orbitron';
font-weight: bold;
color: #000;
.shadowtext(2px, 2px, 5px, #333);
}
#outercontainer {
width: 920px;
min-height: 100%;
margin-left:auto;
margin-right:auto;
margin-top:25px;
margin-bottom: 25px;
height:auto !important;
height:100%;
padding:0px;
#navpanel {
width: 150px;
margin:auto;
padding:5px;
.rounded();
background: @bgcolor_nav;
position:relative;
float:left;
-webkit-border-top-right-radius: 0px;
-moz-border-radius-topright: 0px;
border-top-right-radius: 0px;
.shadow(5px, 5px, 10px, #666);
a, a:active {
color: #fff;
font-size: 9pt;
}
a:hover {
color: #ccc;
font-size: 9pt;
}
}
#container {
width: 750px;
margin:auto;
background: @bgcolor;
font-size: 10pt;
.rounded();
padding: 5px;
position:relative;
.shadow(5px, 5px, 10px, #666);
-webkit-border-top-left-radius: 0px;
-moz-border-radius-topleft: 0px;
border-top-left-radius: 0px;
a, a:active {
color: #fff;
font-size: 12pt;
}
a:hover {
color: #ccc;
font-size: 12pt;
}
p {
color: #fff;
position:relative;
}
float:right;
span {
bottom:0px;
position:relative;
hr {
height:1px;
background:#000;
border:0px;
.shadow(2px, 2px, 2px, #666);
}
}
}
}
#classpanel {
border:1px solid black;
width:150px;
height:200px;
position:relative;
float:right;
top:-220px;
background:#000;
a, a:active {
color: #fff;
font-size: 8pt;
}
a:hover {
color: #ccc;
font-size: 8pt;
}
}
我的问题是，无论页面内容如何，底部的跨度都必须保留在底部。但我插入的 classpanel div 似乎干扰了我的版权领域。 这就是我想要的样子:)
=============================
| Header ---------- |
| container | class | |
| for | panel | |
| contents | | |
| ---------- |
| |
| ------------------------- |
| Copyright span |
=============================
我希望你能帮助我......
First of all, I'm not an expert on this, but I like trying to improve...
This is my problem http://kebax.dk/testdesign/?page=classes.
And here's the code behind
...
<body>
<div id="outercontainer">
<div id="navpanel">
<h3>Navigate:</h3>
<a href="?page=home">Home</a><br />
<a href="?page=generalinfo">General info</a><br />
<a href="?page=classes">Classes</a><br />
<a href="?page=skills">Skills & Mounts</a><br />
<a href="?page=proffs">Professions</a><br />
<a href="?page=guild">Guild</a><br />
<a href="?page=travel">Travelling</a><br />
<a href="?page=aution">Auctionhouse</a><br />
<a href="?page=pvp">PvP</a><br />
<a href="?page=raids">Raids & Roles</a><br /><br />
</div>
<div id="container">
<?php
php-include script
?>
<span><center><hr />Copyright ©2011 my name</center></span>
</div>
</div>
</body>
...
And here's the LESS style sheet:
h2 {
font-family: 'Orbitron';
font-weight: bold;
color: #fff;
.shadowtext(2px, 2px, 5px, #ddd);
}
h3 {
font-family: 'Orbitron';
font-weight: bold;
color: #000;
.shadowtext(2px, 2px, 5px, #333);
}
#outercontainer {
width: 920px;
min-height: 100%;
margin-left:auto;
margin-right:auto;
margin-top:25px;
margin-bottom: 25px;
height:auto !important;
height:100%;
padding:0px;
#navpanel {
width: 150px;
margin:auto;
padding:5px;
.rounded();
background: @bgcolor_nav;
position:relative;
float:left;
-webkit-border-top-right-radius: 0px;
-moz-border-radius-topright: 0px;
border-top-right-radius: 0px;
.shadow(5px, 5px, 10px, #666);
a, a:active {
color: #fff;
font-size: 9pt;
}
a:hover {
color: #ccc;
font-size: 9pt;
}
}
#container {
width: 750px;
margin:auto;
background: @bgcolor;
font-size: 10pt;
.rounded();
padding: 5px;
position:relative;
.shadow(5px, 5px, 10px, #666);
-webkit-border-top-left-radius: 0px;
-moz-border-radius-topleft: 0px;
border-top-left-radius: 0px;
a, a:active {
color: #fff;
font-size: 12pt;
}
a:hover {
color: #ccc;
font-size: 12pt;
}
p {
color: #fff;
position:relative;
}
float:right;
span {
bottom:0px;
position:relative;
hr {
height:1px;
background:#000;
border:0px;
.shadow(2px, 2px, 2px, #666);
}
}
}
}
#classpanel {
border:1px solid black;
width:150px;
height:200px;
position:relative;
float:right;
top:-220px;
background:#000;
a, a:active {
color: #fff;
font-size: 8pt;
}
a:hover {
color: #ccc;
font-size: 8pt;
}
}
My problem is that this span at the bottom has to stay at the bottom no matter the contents of the page. But the classpanel div i inserted seems to be interfering with my copyright field.
And here's how I want it to look like :)
=============================
| Header ---------- |
| container | class | |
| for | panel | |
| contents | | |
| ---------- |
| |
| ------------------------- |
| Copyright span |
=============================
I hope you can help me out...
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
那个页面不太好。
在 Chrome/Firefox 中测试，如果我将
clear: Both添加到您的标记 (???)，页脚将转到底部。你真的应该改变这个：
变成更像这样的东西：（
显然是用样式表中的内联样式代替）
That page isn't great.
Testing in Chrome/Firefox, if I add
clear: bothto your<center>tag (???), the footer goes to the bottom.You should really change this:
into something more like this:
(obviously with the inline styles in your stylesheet instead)