Çözüldü CSS yazının yerini değiştirme

Bu konu çözüldü olarak işaretlenmiştir. Çözülmediğini düşünüyorsanız konuyu rapor edebilirsiniz.

DnzCgn

Hectopat
Katılım
20 Kasım 2019
Mesajlar
547
Çözümler
5
Yer
İstanbul
Daha fazla  
Sistem Özellikleri
1 - İ5 13400F - Zotac Rtx 4060 Ti 8gb - G.Skill RipjawsV Black 8 GB 3200 MHz (X2) - Gigabyte H610M H V2 - Crucial P5 Plus - Rampage Carisma Mesh 650W

Monitör:165Hz 1 Ms 2K
Klavye: SUMMONER5C-BKCTR

2 - Excalibur G911 - i7 11800H - Rtx 3060 - Kioxia Exceria G2 1TB - 16gb 3200 Mhz Ram
Cinsiyet
Erkek
Meslek
Junior Dev.
Merhaba, ben bir film inceleme sitesi teması yapıyorum ancak bir yerde tıkandım. P taglarını CSS ile açtığımda başlığın(H1) altına yazılması gerekirken yazının yanına yazılıyor. Bunu nasıl başlığın altına yazabilirim? (anlamayanlar resme bakabilir.)

Kodlar:
.kutu2{ width: 820px; height: 350px; padding: 20px; background-color: rgb(14,15,28); display: flex; justify-content: center; border-radius: 20px/20px; margin: auto; flex-directon: column; } .img1{ width: 150px; justify-content: center; height: 300px; } .h1s{ margin-left: 235px; color: whitesmoke; } .p1s { margin-left: 100px; color: whitesmoke; width: 150px; }

kutu2: kutunun css
p1s: p nin css
h1s: h nin css
img: resimin css

<div class="kutu2"> <img src="indir.jpg" class="img1"> <h2 class="h1s">Thor: Love and Thunter İnceleme</h2> <p class="p1s"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p> </div>


1660668566474.png
 
Çözüm
Online yaptığım için kodun diğer kısmını gözden kaçırdım. Tekrardan şöyle dener misiniz?

HTML:
<div class="kutu2">
<img src="indir.jpg" class="img1">
<div class="contentBox">
<h2 class="h1s">Thor: Love and Thunter İnceleme</h2>
<p class="p1s">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod.
tempor incididunt ut labore et dolore magna aliqua.
</p>
</div>
</div>

CSS:
.contentBox
{
 flex-direction:column;
 display:flex;
}
Online yaptığım için kodun diğer kısmını gözden kaçırdım. Tekrardan şöyle dener misiniz?

HTML:
<div class="kutu2">
<img src="indir.jpg" class="img1">
<div class="contentBox">
<h2 class="h1s">Thor: Love and Thunter İnceleme</h2>
<p class="p1s">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod.
tempor incididunt ut labore et dolore magna aliqua.
</p>
</div>
</div>

CSS:
.contentBox
{
 flex-direction:column;
 display:flex;
}
 
Çözüm
Online yaptığım için kodun diğer kısmını gözden kaçırdım. Tekrardan şöyle dener misiniz?

HTML:
<div class="kutu2">
<img src="indir.jpg" class="img1">
<div class="contentBox">
<h2 class="h1s">Thor: Love and Thunter İnceleme</h2>
<p class="p1s">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod.
tempor incididunt ut labore et dolore magna aliqua.
</p>
</div>
</div>

CSS:
.contentBox
{
 flex-direction:column;
 display:flex;
}

Teşekkürler
 
Şimdide posterin yanına yapıştı. Margin left ile ayarlayabilir miyim? Vede yazı kare şeklinde oldu biraz daha nasıl genişletebilirim?

Margin ile kendi isteğinize göre ayarlayabilirsiniz. Div iç in genişlik vererek artırabilirsiniz. Div için px yerine % ile genişlik vermeye çalışın.
 
Margin ile kendi isteğinize göre ayarlayabilirsiniz. Div iç in genişlik vererek artırabilirsiniz. Div için px yerine % ile genişlik vermeye çalışın.
Teşekkür ederim.
 

Technopat Haberler

Geri
Yukarı