как правильно сделать планку?

Question

как правильно сделать планку?

0

у меня есть проблемы.. сначала: я сделал страницу входа в систему и сделал вкладку входа фиксированной вверху и сделал абсолютное окно регистрации, а затем, когда я прокручиваю вниз, окно регистрации переходит через панель входа

второй: я изменил размер поля имени пользователя и пароля и сделал их больше, проблема в том, что коробка становится больше, но слова, которые я пишу в них, все еще там, где есть правильный размер.

мой код:

html:

<!doctype html>
<html>
<head>
<title>Taabe3</title>

<link rel="stylesheet" type="text/css" href="stylesheet.css">

<script type="text/javascript" src="script.js"></script>

</head>

<body background="img/background.jpg" id="background">
<img src="img/bar.png" id="bar">
<div class="login_form">
<div  id="username">

<form>
<p><span>UserName:</span>
<input name="UserName" type="text" size="0" id="box1" >
</p>
</form>
</div>


<div class="login_form" id="pass"><form>
<p><span>Password:</span>
<input  name="lastname" type="password" id="box2">
</p>
</form>
</div>
<a href="" id="link" >
<div id="login"  >Login</div>
</a>

<div id="sbackground">
</div>

<div id="sign up">

<form>
<p><span id="text6"><strong>UserName:</strong></span>
<input name="UserName" type="text" size="0" id="box6" >
</p>
</form>


<form>
<p><span id="text5"><strong>Email:</strong></span>
<input name="Email" type="text" size="0" id="box5" >
</p>
</form>

<form>
<p><span id="text4"><strong>Password:</strong></span>
<input name="Password" type="password" size="0" id="box4" >
</p>
</form>

<form>
<p ><span id="text3" ><strong>Confirm Password:</strong></span>
<input name="Password" type="Password" size="0" id="box3" >
</p>
</form>

<a href="" id="link" >
<div id="signup"  ><p id="stext">Sign Up<p></div>
</a>


<img src="img/Untitled-1.png" width="640" height="35"  id="line"/> </div>

<img src="img/login_with_facebook.png" width="602" height="60" id="facebook"/>
</body>
</html>

CSS:

    #pass{
position: fixed;
top: 22px;
left: 963px;
right: 10%;
width: 280px;
height: 62px;
border-radius: 20px;
font-family: corbel;
    }

    #username{
position:fixed;
top: 23px;
left: 709px;
right: 10%;
width: 280px;
height: 61px;
font-family: corbel;
border:medium;
border-color:black;

    }

    #background{
height: 1000px;
    }

    #button{
position: fixed;
left: 1170px;
top: 40px;
background-color: #FFFFFF;
    font-family:corbel;
}

    #loginform{position:fixed;left:100px}

    #bar{
position:fixed;
    top:0;
    left:0;
    background-color:black;
    border:solid 2px;
    border-color:#09F
    }

    #login{
    position: fixed;
    top: 38px;
    left: 1202px;
    width: 63px;
    height: 23px;
    background-color: #2799b6;
    text-align: center;
    font-family: corbel;
    border-radius:20px;
    color:#FFF;
    font-size:15px;
    opacity:1;
    -moz-transition:    opacity .5s;
    -o-transition:      opacity .5s;
    -webkit-transition: opacity .5s;
    transition:         opacity .5s;

    }

    #link{text-decoration:none}

    #login:hover{
    opacity:0.7;
   -moz-transition:    opacity .5s;
   -o-transition:      opacity .5s;
   -webkit-transition: opacity .5s;
   transition:         opacity .5s;
   }

   #box1{border: 2px solid #bfbfbf;
   border-radius:20px;
    height:20px;
    }

   #box2{border: 2px solid #bfbfbf;
   border-radius:20px;
    height:20px;

    }

   #box1:focus {
   border: 2px solid #5ad3de;
outline:none;
    }

   #box2:focus {
border: 2px solid #5ad3de;
outline:none;

    }

    #sbackground{background-color:white;
    height:550px;
    width:350px;
    position:absolute;
    top:200px;
    right:100px;
    border-radius:20px;
    opacity:0.7;

    }

    #box3{border: 2px solid #bfbfbf;
    border-radius:20px;
    height:20px;
    position:absolute;
    top:508px;
    right:150px;
    height:30px;
    width:250px
    }
    #text3{position:absolute;
    top:478px;
    right:160px;
    font-family:corbel;
    color: #2799B6;
    font-size:20px
            }

            #box3:focus {
border: 2px solid #5ad3de;
outline:none;}

            #box4{border: 2px solid #bfbfbf;
    border-radius:20px;
    height:20px;
    position:absolute;
    top:429px;
    right:150px;
    height:30px;
    width:250px
    }
    #box4:focus {
border: 2px solid #5ad3de;
outline:none;}
    #text4{position:absolute;
    top:399px;
    right:160px;
    font-family:corbel;
    color: #2799B6;
    font-size:20px
             }


             #box5{border: 2px solid #bfbfbf;
    border-radius:20px;
    height:20px;
    position:absolute;
    top:350px;
    right:150px;
    height:30px;
    width:250px

    }
    #box5:focus {
              border: 2px solid #5ad3de;
outline:none;}
    #text5{position:absolute;
    top:320px;
    right:160px;
    font-family:corbel;
    color: #2799B6;
    font-size:20px
            }


            #box6{border: 2px solid #bfbfbf;
    border-radius:20px;
    height:20px;
    position:absolute;
    top:270px;
    right:150px;
    height:30px;
    width:250px
    }
    #box6:focus {
border: 2px solid #5ad3de;
outline:none;}
          #text6{position:absolute;
    top:240px;
    right:160px;
    font-family:corbel;
    color: #2799B6;
    font-size:20px
            }

            #signup{
             position: absolute;
            top: 580px;
           right: 230px;
           width: 110px;
            height: 40px;
             background-color: #2799b6;
            text-align: center;
              font-family: corbel;
                  border-radius:20px;
               color:#FFF;
           font-size:19px;
            opacity:1;
            -moz-transition:    opacity .5s;
            -o-transition:      opacity .5s;
               -webkit-transition: opacity .5s;
               transition:         opacity .5s;

                }
                #stext{position:absolute;top:-10px;
                 left: 26px;}

                  #link{text-decoration:none}

                 #signup:hover{
                opacity:0.7;
                -moz-transition:    opacity .5s;
                -o-transition:      opacity .5s;
                    -webkit-transition: opacity .5s;
                    transition:         opacity .5s;
                       }


                  #line{position: absolute;
               top: 640px;
                right: 212px;
                width:150px}

                  #facebook{
             position: absolute;
         top: 665px;
          right: 19px;
opacity: 1;
-moz-transition: opacity .5s;
-o-transition: opacity .5s;
-webkit-transition: opacity .5s;
transition: opacity .5s;
width: 506px;
height: 74px;

        }
#facebook:hover{
         opacity:0.7;
      -moz-transition:    opacity .5s;
     -o-transition:      opacity .5s;
     -webkit-transition: opacity .5s;
      transition:         opacity .5s;
           }

user3516809 16 апр. 2014, в 14:54

Источник

Теги:

html

css

1 ответ

Ещё вопросы

eskimomatt · Answer 1 · 2014-04-16T13-49-00.000Z

для порядка укладки (например, слои в фотошопе) - если вы не установите z-index, то, что когда-либо отображается последним на странице, будет предыдущим элементом при абсолютно позиционированном. взгляните на свойство css z-index - так скажем set

#bar{
  z-index:5;
}

#login-form{
  z-index:4;
}

вам нужно будет внимательно изучить ваш HTML, хотя я не уверен, что вы понимаете, как работают элементы div и form; divs позволяют содержать несколько элементов (они являются контейнерами), и вам нужно вложить все элементы формы в один тег формы, если вы хотите их разумно использовать. Также проверьте разницу между фиксированным, абсолютным и относительным позиционированием здесь.

спасибо, что это сломало, но знаете ли вы решение для второй проблемы, и когда я установил z-index, имя пользователя и пароль исчезают.