CSS va HTML harakatlanuvchi elementlar

Men hozirda veb-sayt loyihasida ishlayapman, lekin uni ishlab chiqishda ba'zi muammolar bilan duch keldim. Asosan, men hozirda kirish sahifasini yaratishga harakat qilmoqdamiz. Internetda juda keng tarqalgan xatolikni boshdan kechiryapman. brauzer miqdori qayta o'lchamoqda.

Before : enter image description here

After: enter image description here

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

/* Bordered form */
form {

     margin-left: 220px;
     margin-right: 220px;
     background-position: top center;

}

body{
    background-image: url("/images/background.jpeg");
    background-position: top center;
    min-width:450px;
    max-width:960px; 


}

/* Full-width inputs */
input[type=text], input[type=password] {
    width: 100%;
    padding: 12px 20px;
    margin: 8px 0;
    display: inline-block;
    border: 1px solid #ccc;
    box-sizing: border-box;
    background-position : top center;
}

/* Set a style for all buttons */
button {
    background-color: #4CAF50;
    color: white;
    padding: 14px 20px;
    margin: 8px 0;
    border: none;
    cursor: pointer;
    width: 100%;
}

/* Center the avatar image inside this container */
.imgcontainer {
    padding-top: 60px;
    position: relative;
    left: 17%;
    top: 200%;
    width: 150%;
    text-align: center;
    font-size: 18px;
}


/* Avatar image */
img.avatar {
    text-align: center;
    width: 40%;
    border-radius: 50%;
      display: block;
  margin-left: auto;
  margin-right: auto;
}

/* Add padding to containers */
.container {
    padding: 20px;
    margin-left: 232px;
    margin-right: 200px;   
     min-width:450px;
  max-width:960px; 
}

/* The "Forgot password" text */
span.psw {
    float: right;
    padding-top: 16px;
}
<!DOCTYPE HTML>
<head>
<link rel="stylesheet" type="text/css" href="login.css" media="screen" />
<title>Admin Panel</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
</head>
<body>
<div id = form >
<form action="action_page.php">
<div class="imgcontainer">
    Avatar
  </div>

  <div class="container">
    
    <input type="text" placeholder="Enter Username" name="uname" required>

    
    <input type="password" placeholder="Enter Password" name="psw" required>

    <button type="submit">Login</button>
    <input type="checkbox" checked="checked"> Remember me
    Forgotten password?
  </div>
</form>
</div>
</body>
</div> </div>

Quyida keltirilgan kod men hozirgacha yozgan koddir. Men bu muammo juda kichik va ahmoq ekanligimni his qilyapman, lekin faqat uni ko'rmayapman. Men bunga o'xshash ko'p mavzular borligini bilaman, lekin 2 soatdan beri javobni ko'rib chiqdim. Men foydali ma'lumot topmadim. Siz menga yordam bera olasizmi :)

0
Siz javob berish ni izlayapsiz. Siz uzoq vaqtdan beri o'qib oldingiz.
qo'shib qo'ydi muallif Andrei Gheorghiu, manba
Siz aynan nimani xohlaysiz? Mobil versiya uchun xuddi shunday natija? Turli natijalar bormi?
qo'shib qo'ydi muallif Armin, manba

7 javoblar

siz javob berishni kodlashingiz kerak

misol

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

/* Bordered form */

form {
  max-width: 500px;
  background-position: top center;
  margin: 0 auto;
}

body {
  background-image: url("/images/background.jpeg");
  background-position: top center;
}


/* Full-width inputs */

input[type=text],
input[type=password] {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  display: inline-block;
  border: 1px solid #ccc;
  box-sizing: border-box;
  background-position: top center;
}


/* Set a style for all buttons */

button {
  background-color: #4CAF50;
  color: white;
  padding: 14px 20px;
  margin: 8px 0;
  border: none;
  cursor: pointer;
  width: 100%;
}


/* Center the avatar image inside this container */


/* Avatar image */

img.avatar {
  text-align: center;
  width: 40%;
  border-radius: 50%;
  display: block;
  margin-left: auto;
  margin-right: auto;
}


/* Add padding to containers */


/* The "Forgot password" text */

span.psw {
  float: right;
  padding-top: 16px;
}
<!DOCTYPE HTML>

<head>
  <link rel="stylesheet" type="text/css" href="login.css" media="screen" />
  <title>Admin Panel</title>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
</head>

<body>
  <div class="container">
    <div class="row">

      <form action="action_page.php">
        <div class="imgcontainer">
          Avatar
        </div>

        <div class="form">
          
          <input type="text" placeholder="Enter Username" name="uname" required>

          
          <input type="password" placeholder="Enter Password" name="psw" required>

          <button type="submit">Login</button>
          <input type="checkbox" checked="checked"> Remember me
          Forgotten password?
        </div>
      </form>

    </div>
  </div>
</body>
</div> </div>
1
qo'shib qo'ydi

siz javob berishni kodlashingiz kerak

misol

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

/* Bordered form */

form {
  max-width: 500px;
  background-position: top center;
  margin: 0 auto;
}

body {
  background-image: url("/images/background.jpeg");
  background-position: top center;
}


/* Full-width inputs */

input[type=text],
input[type=password] {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  display: inline-block;
  border: 1px solid #ccc;
  box-sizing: border-box;
  background-position: top center;
}


/* Set a style for all buttons */

button {
  background-color: #4CAF50;
  color: white;
  padding: 14px 20px;
  margin: 8px 0;
  border: none;
  cursor: pointer;
  width: 100%;
}


/* Center the avatar image inside this container */


/* Avatar image */

img.avatar {
  text-align: center;
  width: 40%;
  border-radius: 50%;
  display: block;
  margin-left: auto;
  margin-right: auto;
}


/* Add padding to containers */


/* The "Forgot password" text */

span.psw {
  float: right;
  padding-top: 16px;
}
<!DOCTYPE HTML>

<head>
  <link rel="stylesheet" type="text/css" href="login.css" media="screen" />
  <title>Admin Panel</title>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
</head>

<body>
  <div class="container">
    <div class="row">

      <form action="action_page.php">
        <div class="imgcontainer">
          Avatar
        </div>

        <div class="form">
          
          <input type="text" placeholder="Enter Username" name="uname" required>

          
          <input type="password" placeholder="Enter Password" name="psw" required>

          <button type="submit">Login</button>
          <input type="checkbox" checked="checked"> Remember me
          Forgotten password?
        </div>
      </form>

    </div>
  </div>
</body>
</div> </div>
1
qo'shib qo'ydi

Cnsvnc tomonidan taqdim etilgan javobdan tashqari.

Shuningdek, qattiq o'lchamli px o'lchamlari emas, balki% qiymatlari kabi sezgir vositalardan foydalanish kabi siz ham ommaviy axborot so'rovlariga murojaat qilishingiz mumkin.

Media queries allow you to apply specific styles based on the viewport size. You can learn more here: https://www.w3schools.com/css/css_rwd_mediaqueries.asp

Masalan, media so'rovi:

@media only screen and (max-width: 500px) {
//your styles here
}

Bundan tashqari, namoyish qilish uchun tezkor namunaga aylandim. ushbu skripka ichidagi brauzerni qayta o'lchamaslikka harakat qiling va yangi uslublarni ko'rib chiqing.

https://jsfiddle.net/kfy3jj1q/

0
qo'shib qo'ydi

Cnsvnc tomonidan taqdim etilgan javobdan tashqari.

Shuningdek, qattiq o'lchamli px o'lchamlari emas, balki% qiymatlari kabi sezgir vositalardan foydalanish kabi siz ham ommaviy axborot so'rovlariga murojaat qilishingiz mumkin.

Media queries allow you to apply specific styles based on the viewport size. You can learn more here: https://www.w3schools.com/css/css_rwd_mediaqueries.asp

Masalan, media so'rovi:

@media only screen and (max-width: 500px) {
//your styles here
}

Bundan tashqari, namoyish qilish uchun tezkor namunaga aylandim. ushbu skripka ichidagi brauzerni qayta o'lchamaslikka harakat qiling va yangi uslublarni ko'rib chiqing.

https://jsfiddle.net/kfy3jj1q/

0
qo'shib qo'ydi

Bootstripning panjara rejasiga qarashingiz mumkin. Sizning kodingizni o'zaro faoliyat brauzer sinovlaridan va barcha turli ekranlarni qamrab oladigan eng qulay va keng qo'llaniladigan platformadir. Sistemani ochish uchun havola:

http://getbootstrap.com/css/#grid (try resizing the browser here in the example).

Faqat CSS va JS fayllarini ishlatishingiz kerak va siz borishingiz kerak.

0
qo'shib qo'ydi

Bootstripning panjara rejasiga qarashingiz mumkin. Sizning kodingizni o'zaro faoliyat brauzer sinovlaridan va barcha turli ekranlarni qamrab oladigan eng qulay va keng qo'llaniladigan platformadir. Sistemani ochish uchun havola:

http://getbootstrap.com/css/#grid (try resizing the browser here in the example).

Faqat CSS va JS fayllarini ishlatishingiz kerak va siz borishingiz kerak.

0
qo'shib qo'ydi

Bootstripning panjara rejasiga qarashingiz mumkin. Sizning kodingizni o'zaro faoliyat brauzer sinovlaridan va barcha turli ekranlarni qamrab oladigan eng qulay va keng qo'llaniladigan platformadir. Sistemani ochish uchun havola:

http://getbootstrap.com/css/#grid (try resizing the browser here in the example).

Faqat CSS va JS fayllarini ishlatishingiz kerak va siz borishingiz kerak.

0
qo'shib qo'ydi