Çözüldü Görsel ile divi yan yana getirmek

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

SadeceBirİnsanAHuman

Gigapat
Forumun Hafızası Zamanın Tanığı
Katılım
5 Mart 2014
Mesajlar
5.701
Makaleler
12
Çözümler
44
1635501121351.png


HTML: 
 <img class = 'ForumIcon' src='Pen.png'>
 <div class = 'MainForum'><a class = 'MainForum' href ='#'>Resmî Forumlar</a></div>

CSS: 
 .MainForum
 {
 text-decoration: none;
 margin-top: 5px;
 font-size: 24px;
 background-image: linear-gradient(to bottom, #b5d8fc, white);
 color: rgb(30, 110, 150);
 }
 .ForumIcon
 {
 border: 1px solid none;
 width: 20px;
 height: 20px;
 margin-top: 5px;
 margin-left: 2px;
 }

Görseli "resmî forumlar" yazısının sol tarafına nasıl alırım? Birkaç kod denedim ama yan yana durmadı.
 
Çözüm
Ecmel
[CODE lang="html" title="HTML"]<div class= 'main'>
<img class = 'ForumIcon' src='Pen.png'>
<div class = 'MainForum'><a class = 'MainForum' href ='#'>Resmî Forumlar</a>
</div>
</div>[/CODE]

[CODE lang="css" title="CSS"] .main{
display:flex;
}
.MainForum
{
text-decoration: none;
margin-top: 5px;
font-size: 24px;
background-image: linear-gradient(to bottom, #b5d8fc, white);
color: rgb(30, 110, 150);
}
.ForumIcon
{
border: 1px solid none;
width: 20px;
height: 20px;
margin-top: 5px;
margin-left: 2px;
}[/CODE]

Bu şekilde yapabilirsin. İkisini bir div'in içine alıp aynı satırda yazdırırsan sorun çözülür. Responsive olması içinde div yapısını flex kullanırsın.
Tarihe göre sırala Puana göre sırala
DjKedi dedi:
Resmi divin içine koyarak.
HTML: 
 <div class = 'MainForum'><a class = 'MainForum' href ='#'>Resmî Forumlar<img class = 'ForumIcon' src='Pen.png'></a></div>
Genişletmek için tıkla...
Ben ayrı olmasını istiyorum. Böyle yapınca arka planın içine giriyor. Div içerisinde olmayacak.
 
Artı 0 Eksi
[CODE lang="html" title="HTML"]<div class= 'main'>
<img class = 'ForumIcon' src='Pen.png'>
<div class = 'MainForum'><a class = 'MainForum' href ='#'>Resmî Forumlar</a>
</div>
</div>[/CODE]

[CODE lang="css" title="CSS"] .main{
display:flex;
}
.MainForum
{
text-decoration: none;
margin-top: 5px;
font-size: 24px;
background-image: linear-gradient(to bottom, #b5d8fc, white);
color: rgb(30, 110, 150);
}
.ForumIcon
{
border: 1px solid none;
width: 20px;
height: 20px;
margin-top: 5px;
margin-left: 2px;
}[/CODE]

Bu şekilde yapabilirsin. İkisini bir div'in içine alıp aynı satırda yazdırırsan sorun çözülür. Responsive olması içinde div yapısını flex kullanırsın.
 
Artı 0 Eksi
Çözüm
Ecmel dedi:
[CODE lang="html" title="HTML"]<div class= 'main'>
<img class = 'ForumIcon' src='Pen.png'>
<div class = 'MainForum'><a class = 'MainForum' href ='#'>Resmî Forumlar</a>
</div>
</div>[/CODE]

[CODE lang="css" title="CSS"] .main{
display:flex;
}
.MainForum
{
text-decoration: none;
margin-top: 5px;
font-size: 24px;
background-image: linear-gradient(to bottom, #b5d8fc, white);
color: rgb(30, 110, 150);
}
.ForumIcon
{
border: 1px solid none;
width: 20px;
height: 20px;
margin-top: 5px;
margin-left: 2px;
}[/CODE]

Bu şekilde yapabilirsin. İkisini bir div'in içine alıp aynı satırda yazdırırsan sorun çözülür. Responsive olması içinde div yapısını flex kullanırsın.
Genişletmek için tıkla...
1635502002340.png

Bu görselin sağdaki ile ortalanmasını nasıl sağlayacağız? Yani biraz aşağı inmesi lazım.
 
Artı 0 Eksi
Artı 0 Eksi
Uyarı! Bu konu 5 yıl önce açıldı.
Muhtemelen daha fazla tartışma gerekli değildir ki bu durumda yeni bir konu başlatmayı öneririz. Eğer yine de cevabınızın gerekli olduğunu düşünüyorsanız buna rağmen cevap verebilirsiniz.

Benzer konular

asnc
MySQL ile çekilen her veri nasıl yan yana yazdırılır?
Mesaj
1
Görüntüleme
288
dgknbzglu
dgknbzglu
I
DataTable Liste Yan Yana Geliyor
Mesaj
1
Görüntüleme
387
dgknbzglu
dgknbzglu
TeknoEmir
  • Soru
CSS elemanları yan yana sıralama
Mesaj
7
Görüntüleme
730
RaSGooL
RaSGooL
ErrorCorrection
  • Çözüldü
Çözüldü  CSS yazılar yan yana gelmiyor
3 4 5
Mesaj
41
Görüntüleme
4.904
300319
3
jevousaime
  • Çözüldü
Çözüldü  İki H1 etiketini yan yana yazabilmek
Mesaj
7
Görüntüleme
355
jevousaime
jevousaime

Technopat Haberler

Yeni konular

Yeni mesajlar

Geri
Yukarı