1. дома
  2. Вопрос и ответ
  3. Форма не реагирует на изменение размера окна

Форма не реагирует на изменение размера окна

2016-10-27 4 views
0

Я воссоздаю страницу входа в Apple. Одна из проблем, однако, входы формы не реагируют. При изменении размера окна фон меняется в соответствии с окном, но форма входа в систему отсутствует. Вот мой код, как html, так и css.Форма не реагирует на изменение размера окна

* { 
    margin: 0; 
    padding: 0; 
    box-sizing: border-box; 
} 

header { 
    background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url(hero.jpeg); 
    background-size: cover; 
    background-position: center; 
    height: 100vh; 
} 

.login { 
    position: absolute; /* Turns the the text box to absolute from static (allows free control of placement) */ 
    width: 1140px; 
    top: 30%; 
    left: 500; 
    height: auto; 
    font-size: 23pt; 
} 

#space-password { 
    padding-top: 20px; 
} 

html { 
    color: whitesmoke; 
    font-weight: 100; 
    font-family: 'Lato', 'Arial', sans-serif; 
    text-rendering: optimizeLegibility; 
} 

input{ 
    border-radius: 50px; 
    color: aliceblue; 
    background-color: #34495e; 
}

и вот HTML:

<!DOCTYPE> 
<html lan="en"> 
    <head> 
     <link rel="stylesheet" type="text/css" href="vendors/css/normalize.css"> 
     <link rel="stylesheet" type="text/css" href="css/style.css"> 
     <link href="https://fonts.googleapis.com/css?family=Lato:300,400"  rel="stylesheet"> 
     <title>Welcome-Sign in</title> 

    </head> 
    <body> 
     <header> 
      <form class="login"> 
       <p>Apple ID:</p><br> 
       <input type="text" name="Apple ID"><br> 
       <p id="space-password">Password:</p><br> 
       <input type="password" name="Password"> 
      </form> 

     </header> 
    </body> 
</html>

Edit: Все ваши ребята решения работают только сейчас ширина поля ввода заполняет весь экран! В любом случае, чтобы остановить это?

источник

2016-10-27 Temple Naylor

+0

использование макс-ширина: 100% во входном {макс-ширина: 100%} –

ответ

0 

* { 
 
margin: 0; 
 
padding: 0; 
 
box-sizing: border-box; 
 
} 
 

 
header { 
 
background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url(hero.jpeg); 
 
background-size: cover; 
 
background-position: center; 
 
height: 100vh; 
 
} 
 

 
.login { 
 
width:50%; 
 
margin:0 auto; 
 
height: auto; 
 
font-size: 23pt; 
 
} 
 
.login p{ text-align:left} 
 
#space-password { 
 
padding-top: 20px; 
 
} 
 

 
html { 
 
    color: whitesmoke; 
 
font-weight: 100; 
 
font-family: 'Lato', 'Arial', sans-serif; 
 
text-rendering: optimizeLegibility; 
 
} 
 

 
input{ 
 
border-radius: 50px; 
 
color: aliceblue; 
 
background-color: #34495e; 
 
width:80%; 
 
}
<!DOCTYPE> 
 
    <html lan="en"> 
 
    <head> 
 
    <link rel="stylesheet" type="text/css" href="vendors/css/normalize.css"> 
 
    <link rel="stylesheet" type="text/css" href="css/style.css"> 
 
    <link href="https://fonts.googleapis.com/css?family=Lato:300,400"  rel="stylesheet"> 
 
    <title>Welcome-Sign in</title> 
 

 
</head> 
 
<body> 
 
    <header> 
 
     <form class="login"> 
 
      <p>Apple ID:</p><br> 
 
      <input type="text" name="Apple ID"><br> 
 
      <p id="space-password">Password:</p><br> 
 
      <input type="password" name="Password"> 
 
     </form> 
 

 
    </header> 
 

 

 

 
</body> 
 
</html>

источник

2016-10-27 08:00:39

+0

Вы не можете сделать ширину на 100% иначе поля ввода заполняют весь экран. –

+0

Это зависит от ширины родительского поля ввода. Если вы не хотите заполнять весь экран, тогда объявите ширину в своей форме. См. Мой отредактированный ответ. –

+0

А, я вижу, спасибо. –

0 
replace this css 

     * { 
margin: 0; 
padding: 0; 
box-sizing: border-box; 
} 

header { 
background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url(hero.jpeg); 
background-size: cover; 
background-position: center; 
height: 100vh; 
} 

.login { 
position: absolute; /* Turns the the text box to absolute from static (allows free control of placement) */ 
width: auto; 
top: 30%; 
left: 0; 
right:0; 
margin:0 auto; 
height: auto; 
font-size: 23pt; 
} 
.login p{ text-align:left} 
#space-password { 
padding-top: 20px; 
} 

html { 
    color: whitesmoke; 
font-weight: 100; 
font-family: 'Lato', 'Arial', sans-serif; 
text-rendering: optimizeLegibility; 
} 

input{ 
border-radius: 50px; 
color: aliceblue; 
background-color: #34495e; 
width:100%; 
}

источник

2016-10-27 07:58:56

+0

Это делает входные коробки заполнить всю ширину экрана. –

+0

ввод {ширина: авто;} –

0

изменения width: 1140px; к width: 100% или ширине: 80% (ур пожеланий) .. В основном для гибкой установки всех значений параметров в% (в процентах).

* { 
 
margin: 0; 
 
padding: 0; 
 
box-sizing: border-box; 
 
} 
 

 
header { 
 
background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url(hero.jpeg); 
 
background-size: cover; 
 
background-position: center; 
 
height: 100vh; 
 
} 
 

 
.login { 
 
position: absolute; /* Turns the the text box to absolute from static (allows free control of placement) */ 
 
width: auto; 
 
top:10%; 
 
left: 10%; 
 
right:0; 
 
margin:0 auto; 
 
height: auto; 
 
font-size: 23pt; 
 
} 
 
.login p{ text-align:left} 
 
#space-password { 
 
padding-top: 20px; 
 
} 
 

 
html { 
 
    color: whitesmoke; 
 
font-weight: 100; 
 
font-family: 'Lato', 'Arial', sans-serif; 
 
text-rendering: optimizeLegibility; 
 
} 
 

 
input{ 
 
border-radius: 50px; 
 
color: aliceblue; 
 
background-color: #34495e; 
 
width:80%; 
 
}
<!DOCTYPE> 
 
    <html lan="en"> 
 
    <head> 
 
    <link rel="stylesheet" type="text/css" href="vendors/css/normalize.css"> 
 
    <link rel="stylesheet" type="text/css" href="css/style.css"> 
 
    <link href="https://fonts.googleapis.com/css?family=Lato:300,400"  rel="stylesheet"> 
 
    <title>Welcome-Sign in</title> 
 

 
</head> 
 
<body> 
 
    <header> 
 
     <form class="login"> 
 
      <p>Apple ID:</p><br> 
 
      <input type="text" name="Apple ID"><br> 
 
      <p id="space-password">Password:</p><br> 
 
      <input type="password" name="Password"> 
 
     </form> 
 

 
    </header> 
 

 

 

 
</body> 
 
</html>

источник

2016-10-27 08:05:46 cna327

+0

Спасибо, что это сработало, но теперь поля ввода текста заполняют всю ширину экрана. В любом случае, чтобы исправить это? –

+0

Установите 'ширина: 50%' или меньше – cna327

0

Вы должны использовать width: 80% со свойствами min-width: ZZZpx и max-width: YYYpx. Это сделает вашу форму 80% вашего тела, но если маленький экран сделает форму меньше, чем ZZZpx, ширина формы будет постоянной (ZZZpx). Кроме того, если большой экран делает форму больше YYYpx, ширина формы будет постоянной (YYYpx). margin/padding: 0 auto - горизонтально.

Чтобы вычислить ZZZ и YYY, вы должны проверить некоторые размеры экрана, чтобы увидеть, что должно быть мин. и макс. стоимость.

Наконец, я советую вам изменить html {} в css, до body {}; добавив max-width и min-width.

Это может быть ваш код:

* { 
 
    margin: 0; 
 
    padding: 0; 
 
    box-sizing: border-box; 
 
} 
 
    
 
header { 
 
    background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url(hero.jpeg); 
 
    background-size: cover; 
 
    background-position: center; 
 
    height: 100vh; 
 
} 
 
.login { 
 
    /* Quit also this */ 
 
    /* 
 
    position: absolute; 
 
    top:10%; 
 
    left: 10%; 
 
    right:0;   
 
    width: auto; 
 
    margin:0 auto; 
 
    height: auto; 
 
    */ 
 
    padding-top: 10%; 
 
    padding-left: 10%; 
 
    font-size: 23pt; 
 
} 
 

 
.login p{ 
 
    text-align:left 
 
} 
 

 
#space-password { 
 
    padding-top: 20px; 
 
} 
 

 
body { 
 
    color: whitesmoke; 
 
    font-weight: 100; 
 
    font-family: 'Lato', 'Arial', sans-serif; 
 
    text-rendering: optimizeLegibility; 
 

 
    width: 90%; 
 
    margin: 0 auto; 
 
    min-width: 1220px; 
 
    max-width: 1600px; 
 
} 
 

 
input{ 
 
    border-radius: 50px; 
 
    color: aliceblue; 
 
    background-color: #34495e; 
 

 
    width:80%; 
 
    min-width: 800px; 
 
    max-width: 1400px; 
 
    margin: 0 auto; 
 
}
<!DOCTYPE> 
 
    <html lan="en"> 
 
    <head> 
 
    <link rel="stylesheet" type="text/css" href="vendors/css/normalize.css"> 
 
    <link rel="stylesheet" type="text/css" href="css/style.css"> 
 
    <link href="https://fonts.googleapis.com/css?family=Lato:300,400"  rel="stylesheet"> 
 
    <title>Welcome-Sign in</title> 
 

 
</head> 
 
<body> 
 
    <header> 
 
     <form class="login"> 
 
      <p>Apple ID:</p><br> 
 
      <input type="text" name="Apple ID"><br> 
 
      <p id="space-password">Password:</p><br> 
 
      <input type="password" name="Password"> 
 
     </form> 
 

 
    </header> 
 

 

 

 
</body> 
 
</html>

источник

2016-10-27 08:49:40

0

Вы отсутствуют макс-ширина в классе УСС собственности .login. И ширина должно быть 100%.

jsfiddle.net/raeeshalam/ao7j0us5/

источник

2016-10-27 08:59:09

+0

Проверьте этот URL ** https: //jsfiddle.net/raeeshalam/ao7j0us5/**. Надеюсь, этот фрагмент поможет вам. –

0

Я думаю, что этот фрагмент помочь вам для лучшего понимания.

* { 
 
    margin: 0; 
 
    padding: 0; 
 
    box-sizing: border-box; 
 
} 
 
header { 
 
    background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url(hero.jpeg); 
 
    background-size: cover; 
 
    background-position: center; 
 
    height: 100vh; 
 
} 
 
.login { 
 
    position: absolute; /* Turns the the text box to absolute from static (allows free control of placement) */ 
 
    width: 100%; 
 
    max-width: 420px; 
 
    top: 30%; 
 
    left: 0px; 
 
    right: 0px; 
 
    height: auto; 
 
    font-size: 20pt; 
 
    margin: 0px auto; 
 
    padding: 15px; 
 
} 
 
#space-password { 
 
    padding-top: 20px; 
 
} 
 
html { 
 
    color: whitesmoke; 
 
    font-weight: 100; 
 
    font-family: 'Lato', 'Arial', sans-serif; 
 
    text-rendering: optimizeLegibility; 
 
background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url(hero.jpeg); 
 
} 
 

 
input{ 
 
    border-radius: 50px; 
 
    height: 38px; 
 
    width: 100%; 
 
    color: aliceblue; 
 
    border: 2px solid #999; 
 
    background-color: #34495e; 
 
    box-sizing: border-box; 
 
    padding-left: 14px; 
 
    padding-right: 14px; 
 
    margin-top: 5px; 
 
    font-size: 17px; 
 
}
<header> 
 
    <form class="login"> 
 
    <p>Apple ID:</p> 
 
    <input type="text" name="Apple ID"> 
 

 
    <p id="space-password">Password:</p> 
 
    <input type="password" name="Password"> 
 
    </form> 
 
</header>

источник

2016-10-27 09:02:26

 Смежные вопросы

  • Нет связанных вопросов^_^