Web programlamada konumlandırma en iyi nasıl yapılır?

Egid Dikmen · 21 Mayıs 2022

Bir proje ödevim var yani boostrap kullanmaktansa kod yazmam gerekiyor ancak neyi yaparsam yapayım konumlandırmayı başaramıyorum. Margin , Padding , Grid... bin tane şey var ancak ben ne yapacağımı halen anlamadım. Konumlandırmayı kodla değil görsel olarak yapabileceğim bir uygulama var mı? Eğer yoksa yerleştirmeyi güzel anlatan kaynak biliyorsanız yazarsanız sevinirim.
Not : Ana div'i (turuncu olan) ın içine formu koyunca hiçbir şey yapmamama rağmen kendi kendine sağ üste gitti ve üstteki divin alanını daralttı. Çakışmamalarını istiyorum bunu nasıl yapabilirim? Siz konumlandırmayı nasıl yapıyorsunuz?
Not 2 : Burada çerçeve 2 divden olşuyor. 4 köşesinde de radius olan en büyük çerçeve var ve bu çerçevenin içinde en üstte içinde "BİZE ULAŞIN" yazan ayrı bir div var.

Kodlar :

HTML:

<!DOCTYPE html>
<HTML>

<HEAD>
<title>Bize Ulaşın</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="css/style.css">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@100&display=swap" rel="stylesheet">
</HEAD>

<BODY>

 
   <div class="kutu">
        <div class="kutu_ust">BİZE ULAŞIN</div>
        <form id="contact" action="" method="">
         
            <div class="form-control">
                <input placeholder="Ad/Soyad" type="text" required autofocus>
            </div>
         
            <div class="form-control">
                <input placeholder="E-Posta Adresi" type="email" required>
            </div>
         
            <div class="form-control">
                <input placeholder="Konu" type="text" required>
            </div>
         
            <div class="form-control">
                <textarea placeholder="Mesajınızı Buraya Yazın.." required></textarea>
            </div>
         
            <div class="form-control">
                <button name="submit" type="submit" id="submit">GÖNDER</button>
            </div>
        </form>
     


   
    </div>







</BODY>
</HTML>

CSS:

body {
    background: #FFE6D7;
}

.kutu      {
    font-family:                  'JetBrains Mono',monospace ;
    border:                        8px solid #EB5800 ;
    border-radius:                 80px ;
    height:                        800px ;
    width:                         800px ;
    margin-left:                   auto;
    margin-right:                  auto;
    margin-top:                    150px;
    display:                       flex;
    }
.kutu_ust    {
    font-family:                   'JetBrains Mono',monospace ;
    font-size:                      70px ;
    font-weight:                    bold;
    color :                         white ;
    border:                         8px solid #EB5800 ;
    background-color:               #EB5800 ;
    height:                         100px ;
    width:                          800px ;
    border-top-left-radius:         60px ;
    border-top-right-radius:        60px ;
    text-align:                     center;
    }

Kafamdaki :

Çıktı :

tristessehivernale · 21 Mayıs 2022

Dreamweaver kullan ve textbox/checkboxlar için ayrı class oluşturup marginle dene.

ibrahimkpsz · 21 Mayıs 2022

CSS:

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
}


body {
    background: #FFE6D7;
}

h1{
    background-color: #264a97;
    padding: 10px;
    color: #FFE6D7;
}

#box {
    transform: translate(50%, 50%);
    text-align: center;
    background-color: #c1da34;
    width: 50%;
    overflow: hidden;
    border-radius: 50px;
}

form {
    margin: 50px;
}

textarea {
    width: 100%;
    height: 50px;
    margin-bottom: 30px;
    padding: 10px;
}

.form-control {
    width: 100%;
    padding: 10px;
    margin: 10px;
    margin-left: -5px;
}

button {
    padding: 15px 50px;
    border-radius: 15px;
    border: 1px solid #fff;
}

button:hover{
    padding: 15px 50px;
    border-radius: 15px;
    border: 1px solid #264a97;
    background-color: #264a97;
    transition: all 0.2s;
    color: #fff;
}

HTML:

<!DOCTYPE html>
<html>

<head>
    <title>Bize Ulaşın</title>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="style.css">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@100&display=swap" rel="stylesheet">
</head>

<body>

    <div id="box">
        <h1>Bize Ulaşın</h1>
        <form>
            <input type="text" class="form-control" placeholder="Ad ve Soyad"><br>
            <input type="email" class="form-control" placeholder="E-mail"><br>
            <input type="text" class="form-control" placeholder="Konu"><br>
            <textarea placeholder="Mesajınızı Girin..."></textarea><br>
            <button type="submit">Gönder</button>
        </form>
    </div>

</body>
</html>

Hızlıca bir şeyler yaptım. Belki yardımcı olur.

laislabonita · 21 Mayıs 2022

Figma

Web programlamada konumlandırma en iyi nasıl yapılır?

Ayrıntılı düzenleme

Egid Dikmen

Hectopat

tristessehivernale

Terapat

ibrahimkpsz

Decapat

laislabonita

Hectopat

Benzer konular

Yeni konular

Yeni mesajlar

Gizliliğinize önem veriyoruz