当前位置: 动力学知识库 > 问答 > 编程问答 >

CSS stickied login button to the top

问题描述:

I want to make something like this:

http://puu.sh/1b5jU

So I did something here, but it doesn't look the same on all screens still when its inside bootstrap container, 960px:

http://justxp.plutohost.net/slyfiles/index.html

What it look like on friend's screen:

http://puu.sh/1b51h

This is the css for it all

.delogin {

width: 70px;

height: 20px;

background-color: #443b28;

-webkit-border-radius: 0px 0px 7px 7px;

border-radius: 0px 0px 7px 7px;

position: absolute;

margin-left: 51%;

-webkit-transition: all 100ms ease-in-out;

-moz-transition: all 100ms ease-in-out;

-ms-transition: all 100ms ease-in-out;

-o-transition: all 100ms ease-in-out;

transition: all 100ms ease-in-out;

}

.login {

width: 70px;

height: 20px;

background-color: #443b28;

-webkit-border-radius: 0px 0px 7px 7px;

border-radius: 0px 0px 7px 7px;

position: absolute;

margin-left: 51%;

right: 0px;

-webkit-transition: all 100ms ease-in-out;

-moz-transition: all 100ms ease-in-out;

-ms-transition: all 100ms ease-in-out;

-o-transition: all 100ms ease-in-out;

transition: all 100ms ease-in-out;

}

.login:hover{

width: 70px;

height: 20px;

background-color: #443b28;

-webkit-border-radius: 0px 0px 7px 7px;

border-radius: 0px 0px 7px 7px;

position: absolute;

margin-left: 51%;

top: 5px;

-webkit-transition: all 100ms ease-in-out;

-moz-transition: all 100ms ease-in-out;

-ms-transition: all 100ms ease-in-out;

-o-transition: all 100ms ease-in-out;

transition: all 100ms ease-in-out;

}

#login {

float: right;

margin-right: 11px;

font-weight: bold;

font-size: 11px;

color: #fff;

-webkit-transition: all 100ms ease-in-out;

-moz-transition: all 100ms ease-in-out;

-ms-transition: all 100ms ease-in-out;

-o-transition: all 100ms ease-in-out;

transition: all 100ms ease-in-out;

}

#lock {

background-image: url("../img/lock.png");

width: 13px;

height: 10px;

position: absolute;

top: 5px;

left: 7px;

-webkit-transition: all 100ms ease-in-out;

-moz-transition: all 100ms ease-in-out;

-ms-transition: all 100ms ease-in-out;

-o-transition: all 100ms ease-in-out;

transition: all 100ms ease-in-out;

}

HTML:

 <div class="delogin">

<div class="login">

<div id="lock"></div>

<span id="login"><a href="login.php">LOGIN</a></span>

</div>

</div>

This is the whole HTML\CSS if needed:

http://pastebin.com/qJkA99nW

Question:

How do I stick the login button how it is now to the right side inside the 960px grid system without making the menu to move any pixel to any side? and make it fit and look a bit the same or similar on all screens, browsers?

I've never seen this kind of question or tutorial on how to make a sticky button like this.

Thanks!

网友答案:

Add position: relative to your .container

.container {
    margin-left: auto;
    margin-right: auto;
    position: relative; /* this */
}

and then set the position of the button

.delogin {
    -moz-transition: all 100ms ease-in-out 0s;
    background-color: #443B28;
    border-radius: 0 0 7px 7px;
    height: 20px;
    margin-left: 51%;
    position: absolute;
    right: 0; /* this */
    width: 70px;
}
分享给朋友:
您可能感兴趣的文章:
随机阅读: