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

SadeceBirİnsanAHuman · 29 Ekim 2021

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ı.

Ecmel · 29 Ekim 2021

[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.

DjKedi · 29 Ekim 2021

Resmi divin içine koyarak.

HTML:

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

SadeceBirİnsanAHuman · 29 Ekim 2021

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>

Ben ayrı olmasını istiyorum. Böyle yapınca arka planın içine giriyor. Div içerisinde olmayacak.

Ecmel · 29 Ekim 2021

[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.

SadeceBirİnsanAHuman · 29 Ekim 2021

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.

Bu görselin sağdaki ile ortalanmasını nasıl sağlayacağız? Yani biraz aşağı inmesi lazım.

Ecmel · 29 Ekim 2021

SadeceBirİnsanAHuman dedi:
Eki Görüntüle 1201215
Bu görselin sağdaki ile ortalanmasını nasıl sağlayacağız? Yani biraz aşağı inmesi lazım.

Görseli atabilir misin? Düzenleyip kodu gönderirim sana.

SadeceBirİnsanAHuman · 29 Ekim 2021

Ecmel dedi:
Görseli atabilir misin? Düzenleyip kodu gönderirim sana.

Penalty free icons designed by Wichai.wi

Free vector icon. Download thousands of free icons of business and finance in SVG, PSD, PNG, EPS format or as ICON FONT #flaticon #icon #penalty #paper #document

www.flaticon.com

Ecmel · 29 Ekim 2021

@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.)

RaSGooL · 29 Ekim 2021

SadeceBirİnsanAHuman dedi:
Eki Görüntüle 1201215
Bu görselin sağdaki ile ortalanmasını nasıl sağlayacağız? Yani biraz aşağı inmesi lazım.

main classına align-items:center; ekleyin.

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

Ayrıntılı düzenleme

SadeceBirİnsanAHuman

Gigapat

Ecmel

DjKedi

Kilopat

SadeceBirİnsanAHuman

Gigapat

Ecmel

Megapat

SadeceBirİnsanAHuman

Gigapat

Ecmel

Megapat

SadeceBirİnsanAHuman

Gigapat

Penalty free icons designed by Wichai.wi

Ecmel

Megapat

RaSGooL

Kilopat

Benzer konular