[英]Right div tag moving when resizing window
这是有问题的网站: http : //co-project.lboro.ac.uk/users/cokl/Computifieds/index.php
我正在尝试使其变小,以使Topright中的div向左移动。 但是由于某种原因,它不是。
当我禁用.wrapper3的宽度样式但该页面不再被包装时,它可以工作。
我知道这可能是一个简单的答案,但我似乎无法解决。 谢谢。
这是与此有关的代码:
<div id="Toppage">
<div id="Header" class="wrapper3">
<a href="index.php"><img style="float:left;" width="200" height="80"src="Images/logo.png"></a>
<div id="Topright"><div class="nav" style=" margin-left: 17px; margin-top: 3px; font-size:16px;">Buy | Sell | My Account | Community | <a href="messages.php">Messages</a></div></div>
<font style="float: right; display:block; clear:right; overflow:hidden; margin-top: 28px; font-size:12px;">
<?php
if(!isset($user_check))
{echo 'Welcome, please <a href="login.php">login/register</a> to continue!';
} else {
echo 'Welcome '.$_SESSION['login_user'].'. To log out, please click <a href="logout.php">here</a>.';}
?>
</font>
<?php echo $getpmalert;?>
</div>
</div>
CSS是:
#Toppage{
background: url("Images/topback.png") repeat-x scroll left bottom #FFFFFF;
}
#Topmiddlepage{
background: url("Images/topmiddle.png") repeat-x scroll left bottom #FFFFFF;
}
#Header{
height: 80px;
}
#Middleheader{
height: 40px;
}
#Topright {
background: url("Images/topright.png") repeat-x scroll left bottom #FFFFFF;
color: #FFFFFF;
float: right;
width: 400px;
height: 31px;
overflow: hidden;
}
#Topright2 {
float: right;
width: 400px;
height: 31px;
overflow: hidden;
}
* {
margin: 0;
}
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -170px; /* the bottom margin is the negative value of the footer's height */
position: relative;
font-size: 0.9em;
margin: 0 auto -170px;
text-align: left;
}
.wrapper3{
width: 980px;
margin: 0 auto;
overflow: hidden;
}
.page {
overflow: hidden;
width: 100%;
}
对于.wrapper3,设置最小宽度和最大宽度可以使其可变大小。 我知道IE在这方面有一些问题,但是有解决方法。
http://www.webcredible.co.uk/user-friendly-resources/css/more-css-tricks.shtml
希望这可以帮助。
您将要添加下面的CSS:
#Topright {
position:fixed;
top:0px;
right:0px;
}
然后使用“请登录”消息找出您要做什么。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.