Bulunan 1 den 9 - Toplam 9
resmin yanına yazı yazmak - - Web & Grafik - Ceviz Forum
  1. #1
    Ceviz Üyesi
    Üyelik Tarihi
    25-Ocak-2006
    Mesaj
    209

    Varsayılan resmin yanına yazı yazmak

    merhaba arkadaşlar
    tablo kullanmadan resimdeki gibi resmin yanına nasıl yazı yazabilirim.
    yardımcı olursanız sevinirim
    Eklenen Resimler Eklenen Resimler  

  2. #2
    Agresif Üye turker Üyenin Avatarı
    Üyelik Tarihi
    19-Temmuz-2002
    Mesaj
    6,092

    Varsayılan

    <img src="..." align="left" (right)....>

  3. #3
    Ceviz Üyesi KaravanaBatu Üyenin Avatarı
    Üyelik Tarihi
    14-Haziran-2004
    Nereden
    İskenderun
    Mesaj
    2,084

    Varsayılan

    CSS ile yapmak daha doğru olacaktır. CSS'de resimin class'ına float:left; ile resimi sola alırsın ekteki gibi. Sağ yapmak için ise left yerine right yazın.

    Yandaki yazı ile boşluğu ayarlamak için margin-right ve margin-bottom fonksiyonlarını kullanabiliriz. Margin-right resimin sağ tarafındaki yazı ile arasındaki boşluğu ayarlarken margin-bottom ise resmin altında kalan boşluğu ayarlamamızı sağlar.

  4. #4
    Ceviz Üyesi serkan_u19911 Üyenin Avatarı
    Üyelik Tarihi
    24-Ocak-2008
    Nereden
    New York
    Mesaj
    142

    Varsayılan

    bilgiler için sağolun bunu arıyordum....

  5. #5
    pi
    pi Çevrimdışı
    Ceviz Üyesi pi Üyenin Avatarı
    Üyelik Tarihi
    17-Ağustos-2009
    Mesaj
    159

    Varsayılan

    Teşekkür ederim ben de bunu arıyordum..

  6. #6
    Ceviz Üstadı
    Üyelik Tarihi
    20-Kasım-2003
    Nereden
    Kocaeli
    Mesaj
    2,118
    Front-end Dev & UI Designer
    alico.me

  7. #7
    Ceviz Üyesi
    Üyelik Tarihi
    05-Haziran-2004
    Mesaj
    7

    Varsayılan

    Soruyu biraz değiştirip tekrar güncel halle getirmek istiyorum.
    3 Tane Yan Yana Resmimiz var diyelim.
    Bu resimlerin her birisinin altına resim ile ilgili yazı yamak istesek bunu nasıl yapabiliriz.

    Resim kodu örneği Aşağıdadır. Resimlerin her birisi için hemen resmin altına bir açıklama yazmak istiyorum.

    <a href="#" target="_blank"><img src="#" alt="#" width="200" height="150" border="0" /> </a>
    <a href="#" target="_blank"><img src="#" alt="#" width="200" height="150" border="0" /> </a>
    <a href="#" target="_blank"><img src="#" alt="#" width="200" height="150" border="0" /> </a>
    Semtimiz Buğaza Karşı Bu Alemde KRAL Ç@R$!

  8. #8
    Ceviz Üyesi ekajordan Üyenin Avatarı
    Üyelik Tarihi
    04-Eylül-2010
    Nereden
    Ankara
    Mesaj
    1

    Varsayılan

    Selamlar Forumunuza yeni üye oldum web tasarımı konusunda yeniyim ve birşeyler öğrenmek için elimden geleni yapmaya çalışıyorum.Nvu programını kullanarak bir tasarım yapıyorum ancak bu dediğiniz işlemleri açıkcası pek anlamıyorum.Bana msn den yada burdan yardımcı olabilcek arkadaşlar olursa çok sevinirim.
    şimdiden teşekkürler iyi günler dilerim

  9. #9
    Ceviz Üstadı
    Üyelik Tarihi
    20-Kasım-2003
    Nereden
    Kocaeli
    Mesaj
    2,118

    Varsayılan

    Alıntı LaGaLuGa Demiş ki: Mesajı Görüntüle
    Soruyu biraz değiştirip tekrar güncel halle getirmek istiyorum.
    3 Tane Yan Yana Resmimiz var diyelim.
    Bu resimlerin her birisinin altına resim ile ilgili yazı yamak istesek bunu nasıl yapabiliriz.

    Resim kodu örneği Aşağıdadır. Resimlerin her birisi için hemen resmin altına bir açıklama yazmak istiyorum.

    <a href="#" target="_blank"><img src="#" alt="#" width="200" height="150" border="0" /> </a>
    <a href="#" target="_blank"><img src="#" alt="#" width="200" height="150" border="0" /> </a>
    <a href="#" target="_blank"><img src="#" alt="#" width="200" height="150" border="0" /> </a>

    Yaptım Bakınız:
    http://www.thealico.com/atolye/code/...aber/index.php


    Html
    Kod:
    <ul class="column_news">
      <li><img src="one.jpg" alt=""/><h4><a href="#">Google TV on the way</a></h4><p>Google will launch its service to bring the Web to TV screens in the U.S. this autumn as it extends its reach from the desktop to the living room. </p></li>
      <li><img src="two.jpg" alt=""/><h4><a href="#">Google TV on the way</a></h4><p>Google will launch its service to bring the Web to TV screens in the U.S. this autumn as it extends its reach from the desktop to the living room. </p></li>
      <li><img src="tre.jpg" alt=""/><h4><a href="#">Google TV on the way</a></h4><p>Google will launch its service to bring the Web to TV screens in the U.S. this autumn as it extends its reach from the desktop to the living room. </p></li>
    </ul>
    Css
    Kod:
    .column_news		  {overflow:hidden;width:100%}
    .column_news li		  {float:left; width:220px; background:white; padding:8px;margin-left:20px}
    .column_news li:first-child	{margin:0}
    .column_news li img			{margin:0 0 5px 0;}
    .column_news li h4 a		{font:bold 12px arial; color:#00A1CD; text-decoration:none}
    .column_news li h4 a:hover	{text-decoration:underline}
    .column_news li p			{font-size:11px; color:#666; text-align:justify; line-height:15px}
    Front-end Dev & UI Designer
    alico.me

Konu Bilgileri

Bu Konuya Gözatan Kullanıcılar

Şu anda 1 kullanıcı bu konuyu görüntülüyor. (0 kayıtlı ve 1 misafir)

Yer İmleri

Mesaj Yetkileriniz

  • Yeni konu açmaya yetkiniz yok
  • Cevap yazmaya yetkiniz yok
  • Eklenti yüklemeye yetkiniz yok
  • Mesajınızı düzeltmeye yetkiniz yok
  •