Neler yeni

Resimleri Yan Yana Dizme HTML (CSS Destekli)

Ad
Soyad
Katılım
18 Ağustos 2023
Konum
Ankara
Konular
61
Mesajlar
81
Ticaret - 0%
0   0   0
  
iletişim
Meslek
Ruhen İşsiz
Detay  
Meslek
Ruhen İşsiz
Üyelik tipi
  1. Bireysel
Merhaba

Resimleri kodlama yaparken html ve css kodları ile yanyana ekleyebilirsiniz aşağıdaki kodları kendinize göre düzenlemeniz yeterli olacaktır.

Css Kodu;
CSS:
ul {overflow:hidden;}
ul li {float:left; margin-right:20px;}
ul li img {border:2px solid #000;}
.clear {clear: both}

Uygulanacak HTML kodu;
HTML:
<ul>
   <li><img src="resim url adres" alt="alt yazısı buraya" title="title yazısı buraya" width="genişlik boyutu piksel" height="yükseklik boyutu piksel"></li>
   <li><img src="resim url adres" alt="alt yazısı buraya" title="title yazısı buraya width="genişlik boyutu piksel" height="yükseklik boyutu piksel"></li>
   <li><img src="resim url adres" alt="alt yazısı" title="title yazısı yazısı buraya" width="genişlik boyutu piksel" height="yükseklik boyutu piksel"></li>
   <li><img src="resim url adres" alt="alt yazısı" title="title yazısı yazısı buraya" width="genişlik boyutu piksel" height="yükseklik boyutu piksel"></li>
   <li><img src="resim url adres" alt="alt yazısı" title="title yazısı yazısı buraya" width="genişlik boyutu piksel" height="yükseklik boyutu piksel"></li>
   <li class="clear"></li>
</ul>
 
Ad
Soyad
Katılım
13 Kasım 2024
Konum
Güzelkent
Konular
0
Mesajlar
1
Ticaret - 0%
0   0   0
  
iletişim
Meslek
Bilgisayar Programcısı
Detay  
Meslek
Bilgisayar Programcısı
Merhaba

Resimleri kodlama yaparken html ve css kodları ile yanyana ekleyebilirsiniz aşağıdaki kodları kendinize göre düzenlemeniz yeterli olacaktır.

Css Kodu;
CSS:
ul {overflow:hidden;}
ul li {float:left; margin-right:20px;}
ul li img {border:2px solid #000;}
.clear {clear: both}

Uygulanacak HTML kodu;
HTML:
<ul>
   <li><img src="resim url adres" alt="alt yazısı buraya" title="title yazısı buraya" width="genişlik boyutu piksel" height="yükseklik boyutu piksel"></li>
   <li><img src="resim url adres" alt="alt yazısı buraya" title="title yazısı buraya width="genişlik boyutu piksel" height="yükseklik boyutu piksel"></li>
   <li><img src="resim url adres" alt="alt yazısı" title="title yazısı yazısı buraya" width="genişlik boyutu piksel" height="yükseklik boyutu piksel"></li>
   <li><img src="resim url adres" alt="alt yazısı" title="title yazısı yazısı buraya" width="genişlik boyutu piksel" height="yükseklik boyutu piksel"></li>
   <li><img src="resim url adres" alt="alt yazısı" title="title yazısı yazısı buraya" width="genişlik boyutu piksel" height="yükseklik boyutu piksel"></li>
   <li class="clear"></li>
</ul>
peki aynı kod ile resimlere link verebilirmiyiz. ??
 
1 Yorum
Volkyci
Volkyci
HTML:
src="link buraya verebilirsiniz"
yukarıdaki kod da gerekli alanı doldurup link tabiki verebilirsiniz.
 

Impossible

Yönetici
Marka yöneticisi
Ad
Soyad
Katılım
12 Temmuz 2024
Konular
3
Mesajlar
5
Ticaret - 0%
0   0   0
  
iletişim
peki aynı kod ile resimlere link verebilirmiyiz. ??
Aşağıdaki kod ile yapabilirsiniz.
Kod:
<ul>
   <li><a href="burayalink"><img src="resim url adres" alt="alt yazısı buraya" title="title yazısı buraya" width="genişlik boyutu piksel" height="yükseklik boyutu piksel"></a></li>
   <li><a href="burayalink"><img src="resim url adres" alt="alt yazısı buraya" title="title yazısı buraya" width="genişlik boyutu piksel" height="yükseklik boyutu piksel"></a></li>
   <li><a href="burayalink"><img src="resim url adres" alt="alt yazısı" title="title yazısı yazısı buraya" width="genişlik boyutu piksel" height="yükseklik boyutu piksel"></a></li>
   <li><a href="burayalink"><img src="resim url adres" alt="alt yazısı" title="title yazısı yazısı buraya" width="genişlik boyutu piksel" height="yükseklik boyutu piksel"></a></li>
   <li><a href="burayalink"><img src="resim url adres" alt="alt yazısı" title="title yazısı yazısı buraya" width="genişlik boyutu piksel" height="yükseklik boyutu piksel"></a></li>
   <li class="clear"></li>
</ul>
 
Yorum

Tema özelleştirme sistemi

Bu menüden forum temasının bazı alanlarını kendinize özel olarak düzenleye bilirsiniz.

Zevkine göre renk kombinasyonunu belirle

Gece/Gündüz modunu seç

Gece ve gündüz modlarından tarzınıza yada ihtiyaçlarınıza uygun olanı seçerek kullana bilirsiniz.

Tam ekran yada dar ekran

Temanızın gövde büyüklüğünü sevkiniz, ihtiyacınıza göre dar yada geniş olarak kulana bilirsiniz.

Izgara yada normal mod

Temanızda forum listeleme yapısını ızgara yapısında yada normal yapıda listemek için kullanabilirsiniz.

Forum arkaplan resimleri

Forum arkaplanlarına eklenmiş olan resimlerinin kontrolü senin elinde, resimleri aç/kapat

Sidebar blogunu kapat/aç

Forumun kalabalığında kurtulmak için sidebar (kenar çubuğunu) açıp/kapatarak gereksiz kalabalıklardan kurtula bilirsiniz.

Yapışkan sidebar kapat/aç

Yapışkan sidebar ile sidebar alanını daha hızlı ve verimli kullanabilirsiniz.

Radius aç/kapat

Blok köşelerinde bulunan kıvrımları kapat/aç bu şekilde tarzını yansıt.