Çö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.
Katılım
5 Mart 2014
Mesajlar
5.701
Makaleler
12
Çözümler
44


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
[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.
Resmi divin içine koyarak.
HTML:
 <div class = 'MainForum'><a class = 'MainForum' href ='#'>Resmî Forumlar<img class = 'ForumIcon' src='Pen.png'></a></div>
 
[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.
 
Çözüm

Bu görselin sağdaki ile ortalanmasını nasıl sağlayacağız? Yani biraz aşağı inmesi lazım.
 
@SadeceBirİnsanAHuman
[CODE lang="css" title="CSS"]
.ForumIcon{
border: 1px solid none;
margin: auto 0;
width: 20px;
height: 20px;
}[/CODE]
diye değiştirsen olması gerekli.

(İlk yanlış yazmışım, düzelttim şimdi.)
 
Bu siteyi kullanmak için çerezler gereklidir. Siteyi kullanmaya devam etmek için çerezleri kabul etmelisiniz. Daha Fazlasını Öğren.…