frontend yardım edermisiniz

24-11-2021, 22:08:15

instagram loginin clonunu yapmaya çalışıyordum bu siyah alan içerisine aldığım kutuları nasıl oraya o şekilde yerleştirdiler
kutuların nasıl yapıldığı değil kutuların nasıl yerleştirildiği benim için önemli position relative mi aticam napıcam şaşırdım marginle ellemi dengelesem diye düşündüm

24-11-2021, 22:09:34

#2

may34

https://www.w3schools.com/css/css_positioning.asp Burdan yardım alabilirsin belki yardımcı olur

24-11-2021, 22:14:02

#3

Developer

Ortada 2 kutu var. Onları da çevreleyen bir kutu var. Dış kutu genel genişliği ve ortalamayı sağlıyor. İç kutularda kendi genişliklerine göre yan yana alınmış. Display: flexi araştır.

24-11-2021, 22:18:24

#4

Devaloper

Yerleşim için Flexbox kullanabilirsiniz. Türkçe kaynak lazım olursa Flexbox ve bazı web geliştirme konuları ile ilgili yazılarımı aşağıya bırakıyorum.

https://medium.com/kodcular/css-flexbox-3a2cec1f7614
https://github.com/devalopercom/yazilar

24-11-2021, 22:26:53

#5

Misafir

css 'de olmazsa olmaz şeylerden birisi konumlandırma bilgisi diyebilirim. Hedef görüntüyü yakalamak için birden fazla metot var. Lakin söylediğiniz elle dengeleme mevzusuna hiç girmeyin derim. (Elinden geldiğince kısa ve kolay yolu uygula. Kodlamaya başlamadan kafanda canlandır).

25-11-2021, 21:38:58

#6

fms34

Flexle yapabilirsiniz.

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body style="width:100%; height: 100vh; display: flex; justify-content:center; align-items: center">
  <div style="width: 50%; height: 80%; background-color: blue; display: flex; gap: 5px">
    <div style = "background-color: yellow; width:50%;"> </div>
     <div style = "background-color: yellow; width:50%; display: flex; flex-direction: column; justify-content: space-evenly"> 
       <div style= "background-color: red; height: 200px">  </div>
       <div style= "background-color: red; height: 100px">  </div>
       <div style= "background-color: red; height: 100px"> </div>
       <div style= "background-color: red; height: 100px; display:flex; justify-content:center; align-items: center; gap:10px"> 
         <div style= "background-color: orange; height: 50px; width: 60px"> </div>
         <div style= "background-color: orange; height: 50px; width: 60px"> </div>
       </div>
    </div>
  </div>
</body>
</html>