vrufusx65v
New Member
- Messages
- 74
- Reaction score
- 0
- Points
- 0
NOTE: I coded this site through Google Chrome, i have not made any additions yet to correctly view it in ANY other browser, so please use Google Chrome to view my page to understand my problem...
SITE REFERENCE: LINK
I have a login box that is hidden except for the login/logout button. When clicked, javascript animates the login/logout box down (or up if clicked again) with the following JS code:
the problem is that the box and button is not layering over my main content area, it pushes the whole content area down. you can see what i mean by going HERE. I want the button and the box itself to be layered over the white content area instead of it just pushing the entire white content area down...
here's some CSS that will hopefully help, its the entire login box + button:
and here's the HTML for my entire login box + Button:
SITE REFERENCE: LINK
I have a login box that is hidden except for the login/logout button. When clicked, javascript animates the login/logout box down (or up if clicked again) with the following JS code:
Code:
$(document).ready(function() {
$("div.panel_button").click(function(){
$("div#panel").animate({
height: "180px"
})
.animate({
height: "180px"
}, "fast");
$("div.panel_button").toggle();
});
$("div#hide_button").click(function(){
$("div#panel").animate({
height: "0px"
}, "slow");
});
});
the problem is that the box and button is not layering over my main content area, it pushes the whole content area down. you can see what i mean by going HERE. I want the button and the box itself to be layered over the white content area instead of it just pushing the entire white content area down...
here's some CSS that will hopefully help, its the entire login box + button:
Code:
#login-container{
float:right;
margin-top:-2px;
margin-right:148px;
width:305px;
text-align:center;
}
#toppanel {
float:right;
top:33px;
width: 305px;
z-index: 25;
text-align: center;
margin-right:0px;
}
#panel {
width: 500px;
position: relative;
top: 1px;
height: 0px;
float:right;
margin-left:px;
margin-right:px;
z-index: 10;
overflow: hidden;
text-align: left;
}
#panel_contents {
background: none;
filter:alpha(opacity=80);
-moz-opacity:0.80;
-khtml-opacity: 0.80;
opacity: 0.80;
height:350px;
width:304px;
float:right;
margin-top:px;
margin-right:0px;
z-index: -1;
}
.border {
border: 15px #1d1d1d solid;
-moz-border-bottom-left-radius:30px;
-moz-border-bottom-right-radius:30px;
-webkit-border-bottom-left-radius:30px;
-webkit-border-bottom-right-radius:30px;
border-bottom-left-radius:30px;
border-bottom-right-radius:30px;
}
div#login {
float:right;
width:240px;
height:150px;
right:150px;
top:110px;
background:#46392f;
text-align:left;
}
div#logout {
float:right;
width:240px;
height:150px;
right:150px;
top:110px;
background:#46392f;
text-align:left;
}
/*
div#login p {
float:left;
margin-top:30px;
margin-left:10px;
color: #cccccc;
font-family: Century Gothic, Georgia, "Times New Roman", Times, serif;
line-height: 25px;
}
*/
#login_text {
color:#CCC;
font-family: 'myriadpro', Arial, Helvetica, sans-serif;
font-size:18px;
text-align:center;
float:left;
margin-top:10px;
margin-left:40px;
}
#logout_text {
color:#CCC;
font-family: 'myriadpro', Arial, Helvetica, sans-serif;
font-size:18px;
text-align:center;
float:left;
margin-top:10px;
margin-left:10px;
}
div#login input#username {
float:left;
margin-top:8px;
margin-left:60px;
background:#ccc;
}
div#login input#password {
float:left;
margin-top:4px;
margin-left:60px;
background:#ccc;
}
div#login input#login_btn {
/*
border: 1px #899690 solid;
*/
font-family: 'myriadpro-bold', Trebuchet MS, Arial, Helvetica, sans-serif;
color:#FFF;
background-color: #000;
border-color: #000;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
cursor: pointer;
float:left;
margin-top:10px;
margin-left:95px;
/*
position: relative;
top: 20px;
left: 86px;
*/
}
#logout_btn {
/*
border: 1px #899690 solid;
font-family: 'myriadpro-bold', Trebuchet MS, Arial, Helvetica, sans-serif;
color:#FFF;
background-color: #000;
*/
background-image:url(../images/logout.png);
width:59px;
height:20px;
/*
border-color: #000;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
*/
cursor: pointer;
float:left;
margin-top:25px;
margin-left:90px;
/*
position: relative;
top: 20px;
left: 86px;
*/
}
.panel_button {
float:right;
margin-right:60px;
margin-top:px;
position: relative;
top: 1px;
width: 173px;
height: 54px;
background-image:url(../images/panel_button.png);
z-index: 20;
filter:alpha(opacity=70);
-moz-opacity:0.70;
-khtml-opacity: 0.70;
opacity: 0.70;
cursor: pointer;
}
.panel_button a {
text-decoration: none;
color: #545454;
font-size: 20px;
font-weight: bold;
position: relative;
top: 0px;
left: 4px;
font-family: Arial, Helvetica, sans-serif;
}
.panel_button a:hover {
color: #999999;
}
.panel_button img{
position: relative;
top: 10px;
border: none;
}
#profile {
color:#CCC;
font-family: 'myriadpro', Arial, Helvetica, sans-serif;
font-size:18px;
text-align:center;
float:left;
margin-top:15px;
margin-left:25px;
}
#profile a:hover {
color:#FFF;
}
#notifications {
color:#CCC;
font-family: 'myriadpro', Arial, Helvetica, sans-serif;
font-size:18px;
text-align:center;
float:left;
margin-top:35px;
margin-left:-76px;
}
#notifications a:hover {
color:#FFF;
}
and here's the HTML for my entire login box + Button:
Code:
<div id="login-container">
<div id="toppanel">
<div id="panel">
<div id="panel_contents">
<?php if ($user->data['user_id'] == ANONYMOUS) { ?>
<div class="border" id="login">
<div id="login_text">Login to SS Studios:</div>
<form id="login_form" action="index.php" method="post">
<input type="hidden" name="remember" value="TRUE" />
<input type="text" size="15" name="username" id="username" onClick="if(this.value == 'Username')
this.value='';" onBlur="if(this.value.length == 0) this.value='Username';" value="Username" /><br />
<input type="password" size="15" name="password" id="password" onClick="if(this.value == 'password')
this.value='';" onBlur="if(this.value.length == 0) this.value='password';" value="password" /><br />
<input type="submit" accesskey="1" id="login_btn" name="login" value="Login" />
</form>
</div><!-- End Login -->
<?php
}
else {
?>
<div class="border" id="logout">
<label id="logout_text">Welcome, <?php echo $user->data['username']; ?>!</label>
<a href="#" id="profile">My Profile</a>
<a href="#" id="notifications">Notifications</a>
<?php echo "<a href=\"index.php?mode=logout&redirect=\"../../index.php\"\" id=\"logout_btn\"></a>";?>
</div><!-- End Logout Border -->
<?php
}
?>
</div><!-- End Panel_Contents -->
</div><!-- End Panel -->
<div class="panel_button" style="visibility:visible">
<img src="images/expand.png" alt="expand"/>
<?php
if ($user->data['user_id'] == ANONYMOUS) {
echo('<a href="#">Login</a>');
}
else {
echo('<a href="#">Logout</a>');
}
?>
<!--<a href="#">Login Here</a>-->
</div><!-- End Expand Button -->
<div class="panel_button" id="hide_button" style="display:none;">
<img src="images/collapse.png" alt="collapse" />
<a href="#">Hide</a>
</div><!-- End Collapse Button -->
</div><!-- End toppanel -->
</div><!-- End Login -->