1

ログインとサインアップのリンクまたはボタンを、ブラウザーウィンドウの右上の位置に固定したままにして、ラッパーdiv内に配置したい. しかし、ブラウザのウィンドウサイズを変更すると、ボタンが消えたり、ヘッダーの上に表示されたりします。

ULリストとヘッダーdivセクションを持つlogin_bar divセクションを持つHTMLコード

<div id="wrapper">
<div id="login_bar" style="text-align: right">                                               
            <ul id="login_signup">
                <li><a href="#" id="login_link">Login <span>&#x25c0;</span></a></li>
                <li><a href="#" id="sign_link">SignUp <span>&#x25c0;</span></a></li>
            </ul>
</div>

<div id="header">
</div>
</div>

CSSファイル

#login_bar{
width:300px;        
position:fixed;
z-index:10;        
border:1px solid black;   
top:-5px;
right:150px;
}

#header{
width:1000px;    
background-image:url('../images/hf1.jpg'); 
background-size: 100%;
background-repeat: no-repeat;
position: relative;
border-radius:5px;
min-height: 100px;
}

#login_signup{
float:right;    
}

#login_signup > li{
float:left;    
padding-right: 30px;
list-style: none;
line-height:25px;
padding-top:6px;
display:inline-block;           
}

#login_signup li > a{
font-family:sans-serif;
font-size: 17px;
font-weight: bold;
color:white;
padding:5px;
display:inlineblock;
background-color:black;
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius: 5px;
-o-border-radius:5px;

box-shadow: rgb(0,0,0) 0px 0px 10px;
-moz-box-shadow: rgb(0,0,0) 0px 0px 10px;
-webkit-box-shadow: rgb(0,0,0) 0px 0px 10px;
-o-box-shadow:rgb(0,0,0) 0px 0px 10px;
}

#login_signup li span{  
font-size: 12px;        
display:inlineblock;
}

#login_signup li a:hover{
cursor: pointer;
box-shadow: rgb(255,255,255) 0px 0px 5px;
-moz-box-shadow: rgb(255,255,255) 0px 0px 5px;
-webkit-box-shadow: rgb(255,255,255) 0px 0px 5px;
-o-box-shadow:rgb(255,255,255) 0px 0px 5px;
border-radius: 2px;
background-color: white;    
color:#006666;
}

両方の div セクションは、中央にあるラッパー div 内にあります

#wrapper{
width:1000px;
min-height:600px;    
margin:5px auto;
border-radius:5px;
border-style: solid;
border:solid 1px grey;
box-shadow:rgb(0,0,0) 0px 0px 10px;
-moz-box-shadow: rgb(0,0,0) 0px 0px 10px;
-webkit-box-shadow: rgb(0,0,0) 0px 0px 10px;
-o-box-shadow:rgb(0,0,0) 0px 0px 10px;
background-color: black;
}
4

2 に答える 2

0

I tested your original setup and it seems to work correctly (at least from how I understood your question). Tested it in IE, Firefox and chrome and looks good... below the css the html file I used:

<!DOCTYPE html>
<html>
<head>
<link href="test.css" rel="stylesheet" />
</head>
<body>
<div id="wrapper">
    <div id="login_bar" style="text-align: right">                                               
        <ul id="login_signup">
            <li><a href="#" id="login_link">Login <span>&#x25c0;</span></a></li>
            <li><a href="#" id="sign_link">SignUp <span>&#x25c0;</span></a></li>
        </ul>
    </div>
    <div id="header">
      test
    </div>
</div>
</body>
</html>

test.css:

#wrapper{
width:1000px;
min-height:600px;    
margin:5px auto;
border-radius:5px;
border-style: solid;
border:solid 1px grey;
box-shadow:rgb(0,0,0) 0px 0px 10px;
-moz-box-shadow: rgb(0,0,0) 0px 0px 10px;
-webkit-box-shadow: rgb(0,0,0) 0px 0px 10px;
-o-box-shadow:rgb(0,0,0) 0px 0px 10px;
background-color: black;
}

#login_bar{
width:300px;        
position:fixed;
z-index:10;        
border:1px solid black;   
top:-5px;
right:150px;
display:inline-block;
}

#header{
width:1000px;    
background-image:url('../images/hf1.jpg'); 
background-size: 100%;
background-repeat: no-repeat;
position: relative;
border-radius:5px;
min-height: 100px;
}

#login_signup{
float:right;   
/*display:inline; */
}

#login_signup > li{
float:left;    
padding-right: 30px;
list-style: none;
line-height:25px;
padding-top:6px;
display:inline-block;           
}

#login_signup li > a{
font-family:sans-serif;
font-size: 17px;
font-weight: bold;
color:white;
padding:5px;
display:inline-block;
background-color:black;
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius: 5px;
-o-border-radius:5px;

box-shadow: rgb(0,0,0) 0px 0px 10px;
-moz-box-shadow: rgb(0,0,0) 0px 0px 10px;
-webkit-box-shadow: rgb(0,0,0) 0px 0px 10px;
-o-box-shadow:rgb(0,0,0) 0px 0px 10px;
}

#login_signup li span{  
font-size: 12px;        
display:inline-block;
}

#login_signup li a:hover{
cursor: pointer;
box-shadow: rgb(255,255,255) 0px 0px 5px;
-moz-box-shadow: rgb(255,255,255) 0px 0px 5px;
-webkit-box-shadow: rgb(255,255,255) 0px 0px 5px;
-o-box-shadow:rgb(255,255,255) 0px 0px 5px;
border-radius: 2px;
background-color: white;    
color:#006666;
}

If you were previously having issues in IE, you may have just forgotten to add <!DOCTYPE html> on top of the html file...

于 2013-04-10T17:38:23.423 に答える
0

現在、使用しているposition: fixedとの場合、右側で修正するには、正しい値を に変更する必要がありright:150px;ます。login_bar0px

#login_bar{
    width:300px;        
    position:fixed;
    z-index:10;        
    border:1px solid black;   
    top:-5px;
    right:0px;
}

padding-right: 30px;リストを削除するだけでなく、

#login_signup > li{
    float:left;    
    padding-right: 30px; /* <-- Remove this */
    list-style: none;
    line-height:25px;
    padding-top:6px;
    display:inline-block;           
}

デモ

注: これがあなたの望むものかどうかはわかりませんので、お気軽に詳細をお尋ねください。

于 2013-04-10T17:30:01.990 に答える