HTML'de resimler yan yana hizalanıp altlarına nasıl yazı yazılır?

Acı Rakı · 27 Nisan 2022

Selamlar, bir web site yapıyorum fakat ufak bir sorunum var. Resimdeki ana sayfam ve donut resimlerini yan yana sıralamam lazım. Sıralanıyor ama hepsinin kendi altına yazı eklemem lazım ve ekleyince üst üste duruyor. Bunu nasıl düzeltebilirim?

BlackShadow · 27 Nisan 2022

Resimleri bir div container içerisine alarak flexbox özelliği ile yan yana sıralayabilirsin.
CSS Flexbox'u araştırmanı öneririm.

kaan.w · 8 Mayıs 2022

Aşağıda html kodunu bıraktım, img src kısmına resimlerinizin yollarını yazmanız gerek sadece.

[CODE lang="html" title="HTML"]<div class="container">
<div class="card">
<img src="" alt="donut1">
<h1> Donut 1 </h1>
</div>
<div class="card">
<img src="" alt="donut2">
<h1> Donut 2 </h1>
</div>
<div class="card">
<img src="" alt="donut3">
<h1> Donut 3 </h1>
</div>
</div>[/CODE]

Alttaki css'te pek bişey yapmadım gerisini size bırakıyorum, takıldığınız bir yer olursa yardımcı olurum.

[CODE lang="css" title="CSS"].container {
/* display flex yan yana gelmelerini sağlayacaktır
daha fazla bilgi için flexbox yapısına göz atabilirsiniz. */
display: flex;
}

.card h1 {
/* burayı kullanarak resmin altındaki başlığı
düzenleyebilirsiniz */
}

.card img {
/* burayı kullanarak resmi düzenleyebilirsiniz */
}[/CODE]

EMİR37 · 10 Mayıs 2022

kaan.w dedi:
Aşağıda html kodunu bıraktım, img src kısmına resimlerinizin yollarını yazmanız gerek sadece.

[CODE lang="html" title="HTML"]<div class="container">
<div class="card">
<img src="" alt="donut1">
<h1> Donut 1 </h1>
</div>
<div class="card">
<img src="" alt="donut2">
<h1> Donut 2 </h1>
</div>
<div class="card">
<img src="" alt="donut3">
<h1> Donut 3 </h1>
</div>
</div>[/CODE]

Alttaki css'te pek bişey yapmadım gerisini size bırakıyorum, takıldığınız bir yer olursa yardımcı olurum.

[CODE lang="css" title="CSS"].container {
/* display flex yan yana gelmelerini sağlayacaktır
daha fazla bilgi için flexbox yapısına göz atabilirsiniz. */
display: flex;
}

.card h1 {
/* burayı kullanarak resmin altındaki başlığı
düzenleyebilirsiniz */
}

.card img {
/* burayı kullanarak resmi düzenleyebilirsiniz */
}[/CODE]

Bende CSS'yi yapamıyorum.

Kutleloove · 21 Mayıs 2022

EMİR37 dedi:
Bende CSS'yi yapamıyorum.

CSS oldukça basit. Hiç yapamıyorsan tarayıcıyı aç diğer web sitelerine girerek öğeyi denetle ile kodları incele. Biraz İngilizcen varsa zaten hangi kod ne işe yarıyor anlıyorsun. (Kodu çal demiyorum öğren ve geliştir)

EMİR37 · 21 Mayıs 2022

Kutleloove dedi:
CSS oldukça basit. Hiç yapamıyorsan tarayıcıyı aç diğer web sitelerine girerek öğeyi denetle ile kodları incele. Biraz İngilizcen varsa zaten hangi kod ne işe yarıyor anlıyorsun. (Kodu çal demiyorum öğren ve geliştir)

Zaten Öyle yapıyorum hocam.

blamenvidia · 21 Mayıs 2022

Acı Rakı dedi:
Selamlar, bir web site yapıyorum fakat ufak bir sorunum var. Resimdeki ana sayfam ve donut resimlerini yan yana sıralamam lazım. Sıralanıyor ama hepsinin kendi altına yazı eklemem lazım ve ekleyince üst üste duruyor. Bunu nasıl düzeltebilirim?

Eki Görüntüle 1371990

Grid kullan.

CSS:

.column {
  text-align: center;
  max-width: 1200px
  margin: 0 auto;
  display: grid;
}

@media (min-width: 600px) {
  .column { grid-template-columns: repeat(2, 1fr); }
}

HTML:

<div class="column">
<div>
    <img>
    <h1>
    </h1>
    </div>
<div>
    <img>
    <h1>
    </h1>
    </div>
<div>
    <img>
    <h1>
    </h1>
    </div>
</div>

HTML'de resimler yan yana hizalanıp altlarına nasıl yazı yazılır?

Ayrıntılı düzenleme

Acı Rakı

Hectopat

BlackShadow

Kilopat

kaan.w

Megapat

EMİR37

Kilopat

Kutleloove

Decapat

EMİR37

Kilopat

blamenvidia

Hectopat

Benzer konular

Technopat Haberler

Yeni konular

Yeni mesajlar

Gizliliğinize önem veriyoruz