Endersqui
Femtopat
- Katılım
- 19 Eylül 2023
- Mesajlar
- 71
Daha fazla
- Cinsiyet
- Erkek
Css ve HTML ile yaptığım sayfada 3 farklı buton var (evet, hayır ve tamam) bunları ortalamaya çalışırken "position: relative" kullanıp "left:550px" gibi uzaklıklar veriyorum fakat bu uzaklıklar pc de iyi görünüyor fakat telefonda çok kötü duruyor. Number input alanını ayrı evet hayır butonlarını ayrı olarak sayfanın tam ortasında yan yana durmasını istiyorum yardım eder misiniz?
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body>
<!--butonlara js ile gereklilik eklenmeli-->
<!--js ile değer hata mesajı eklenmeli-->
<div class="anasayfa">
<form action="veriler.js" method="post" id="anaform">
<h2>Evinizde kaç kişi yaşıyor?</h2>
<input class="number" type="number" placeholder="Sayı giriniz" min="1" max="10" required>
<input class="submit" type="submit" value="Tamam">
<hr>
<h2>Evinizde haftada kaç kez duş alınıyor?</h2>
<input class="number" type="number" placeholder="Sayı giriniz" min="1" required>
<input class="submit" type="submit" value="Tamam">
<hr>
<h2>Tıraş olurken su açık bırakılır mı?</h2>
<input class="evet" type="submit" value="Evet" >
<input class="hayir" type="submit" value="Hayır">
<hr>
<h2>Diş fırçalanırken su açık bırakılıyor mu?</h2>
<input class="evet" type="submit" value="Evet">
<input class="hayir" type="submit" value="Hayır">
<hr>
<h2>Evinizde günde kaç yumurta haşlanır?</h2>
<input class="number" type="number" placeholder="Sayı giriniz" max="20" required>
<input class="submit" type="submit" value="Tamam">
<hr>
<h2>Evinizde günde kaç kez sebze-meyve yıkanır?</h2>
<input class="number" type="number" placeholder="Sayı giriniz" required>
<input class="submit" type="submit" value="Tamam">
<hr>
<h2>Evinizde günde kaç kez sifon çekilir?</h2>
<input class="number" type="number" placeholder="Sayı giriniz" max="30" required>
<input class="submit" type="submit" value="Tamam">
<hr>
</form>
</div>
</body>
</html>
CSS:
body{
background-color:aliceblue;
}
hr{
border-style: solid;
border-width: 2px;
border-color: black;
}
h2{
font-family: Arial, Helvetica, sans-serif;
font-size: 25px;
text-align: center;
}
.submit{
width: 80px;
height: 50px;
border-style: solid;
border-width: 3px;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: 16px;
background-color:yellow;
border-radius: 50px;
position: relative;
left: 500px;
}
.number{
width: 80px;
height: 30px;
border-style: solid;
border-color: black;
border-width: 3px;
position: relative;
left: 550px;
}
.evet{
width: 80px;
height: 50px;
border-style: solid;
border-width: 3px;
border-radius: 50px;
background-color: #4CAF50;
font-family: Arial, Helvetica, sans-serif;
font-size: 18px;
font-weight: bold;
position: relative;
left: 550px;
}
.hayir{
width: 80px;
height: 50px;
border-style: solid;
border-width: 3px;
border-radius: 50px;
background-color: #f44336;
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
font-weight: bold;
position: relative;
left: 600px;
}
Son düzenleyen: Moderatör:
