Duyuruyu Kapat
Facebook Gözat
Twitter Gözat

resmin yanına yazı yazmak

Konu, 'Genel Webmaster Konuları' kısmında g_azlag tarafından paylaşıldı.

  1. g_azlag

    g_azlag Üye

    Kayıt:
    25 Ocak 2006
    Mesajlar:
    209
    Beğenilen Mesajlar:
    0
    merhaba arkadaşlar
    tablo kullanmadan resimdeki gibi resmin yanına nasıl yazı yazabilirim.
    yardımcı olursanız sevinirim
     
  2. turker

    turker Agresif Üye

    Kayıt:
    19 Temmuz 2002
    Mesajlar:
    5,988
    Beğenilen Mesajlar:
    0
    <img src="..." align="left" (right)....>
     
  3. KaravanaBatu

    KaravanaBatu Daimi Üye

    Kayıt:
    14 Haziran 2004
    Mesajlar:
    2,092
    Beğenilen Mesajlar:
    0
    Şehir:
    İskenderun
    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. serkan_u19911

    serkan_u19911 Üye

    Kayıt:
    24 Ocak 2008
    Mesajlar:
    142
    Beğenilen Mesajlar:
    0
    Meslek:
    Yönetici
    Şehir:
    New York
    bilgiler için sağolun bunu arıyordum....
     
  5. pi

    pi Üye

    Kayıt:
    17 Ağustos 2009
    Mesajlar:
    159
    Beğenilen Mesajlar:
    0
    Teşekkür ederim ben de bunu arıyordum..
     
  6. alico

    alico Daimi Üye

    Kayıt:
    20 Kasım 2003
    Mesajlar:
    2,064
    Beğenilen Mesajlar:
    2
  7. LaGaLuGa

    LaGaLuGa Yeni Üye

    Kayıt:
    5 Haziran 2004
    Mesajlar:
    7
    Beğenilen Mesajlar:
    0
    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>
     
  8. ekajordan

    ekajordan Yeni Üye

    Kayıt:
    4 Eylül 2010
    Mesajlar:
    1
    Beğenilen Mesajlar:
    0
    Meslek:
    Tekstil Mühendisliği öğrencisi
    Şehir:
    Ankara
    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. alico

    alico Daimi Üye

    Kayıt:
    20 Kasım 2003
    Mesajlar:
    2,064
    Beğenilen Mesajlar:
    2

    Yaptım Bakınız:
    http://www.thealico.com/atolye/code/sutun_sirali_haber/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}