0
Kayıt Ol

CSS Slider Sorunu

2

●

1.349

  • 19-08-2012, 14:35:12
    #1
    oyunariy
    oyunariy
    Merhaba arkadaşlar bu benim ilk css ve html çalışmam bir yerde takıldım yardımlarınıza ihtiyacım var..

    İşaretlediğim yere yazı yazmak istiyorum..



    HTML 
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//TR" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-9" />
    <title>PSD TO CSS Çağrı Üçkan</title>
<link rel="stylesheet" type="text/css" media="screen" href="style.css" />
</head>
<body>

         <div id="header">
              <div class="ustcubuk"> </div>
                 <div class="logo">
                    <a href="#"><img src="images/logo.png" alt="Film Tema Logo">
                 </div>
              <div id="header-menu">
                 <div class="header-menu">
                    <a href="#">Anasayfa</a>
                    <a href="#">fragmanlar</a>
                    <a href="#">en çok izlenenler</a>
                    <a href="#">iletişim</a>
                    <a href="#">en çok yorumlananlar</a>
                    <a href="#">giriş yap</a>
                    <a href="#">editör olmak istiyormusun?</a>
              </div></div></div>
         <div id="slider">
           <div class="slider-menu">
            <a href="#">aile filmleri</a>
            <a href="#">animasyon</a>
            <a href="#">romantik filmler</a>
            <a href="#">korku/gerilim</a>
            <a href="#">belgesel</a>
            <a href="#">fantastik</a>
            <a href="#"><macera/a>
            <a href="#">polisiye/suç</a>
            <a href="#">türk filmleri</a>
            <a href="#">diğerleri</a>
           </div>
               <div id="slider-alt">
                   <img style="margin: 6px 25px" src="images/slider-avatar.png">
               </div>
               
         </div>

</body>
</html>
    CSS
    body {background: #f3f3f3; margin: auto; font-size: 12px; font-family: MS Reference Sans Serif;}

/*  ------------------- header-baslangic  ------------------- */

.ustcubuk {background: url(images/ust_cizgi.png); width: 1366px; height: 6px; }
.logo {margin: 35px 275px;}
#header-menu {background: url(images/headermenu_bg.png)repeat-x; width: 827px; height: 36px; margin: auto; }
.header-menu a{color: #ffffff; text-decoration: none; margin: 10px}
.header-menu a:hover {text-decoration: none; color: #c0c0c0;}
.header-menu {padding: 9px 10px 10px 15px}
/*  ------------------- header-bitis  ------------------- */

/*  ------------------- slider-baslangic  ------------------- */
#slider {background: url(images/slidermenu-bg.png)repeat-x; width: 827px; height: 31px; margin: auto; margin-top: 17px}
.slider-menu a{color: #ffffff; text-decoration: none; margin: 8px}
.slider-menu a:hover {text-decoration: none; color: #c0c0c0;}
.slider-menu {padding: 7px 10px 10px 18px}
#slider-alt {background: url(images/slideralt-bg.png)repeat-x; width: 827px; height: 165px; margin-top: -1px}
  • 19-08-2012, 14:46:13
    #2
    karacoder
    karacoder
    Alıntı
    <div id="slider-alt">
    <img style="margin: 6px 25px" src="images/slider-avatar.png">
    </div>
    imajdan sonra bir yazı eklemen yeterli. daha sonra o yazıya bir class değeri atamalısın. ve daha sonra,yüksekliğini-genişliğini vs. verip soldan boşluk hizalamalısın.
    bu arada imaja float left değerinide atamayı unutma.
  • 20-08-2012, 16:38:38
    #3
    hackersatranc
    hackersatranc
    Üyeliği durduruldu
    Alıntı
    <div id="slider-alt">
    <img style="margin: 6px 25px" src="images/slider-avatar.png">
    </div>
    yukarıdaki kodun içine yazı eklemen için 2 seçeneğin var img boşluk verir direk yazıyı yazarsın yada img ayrı yazı ayrı bir divde olur ona göre ayarlama yaparsın ben sana resim img kodunda yazıda div kodunda şeklinde yazıyorum buraya.
    HTML KODU :
    <div id="slider-alt">
<img src="images/slider-avatar.png" alt="konu adı" width="değer gir" height="değer gir" />
<div class="slideraltyazi">Buraya yazı gelicek dediler yazı getirdik nereye koyalım ?</div>
</div>
    CSS KODU :
    #slider-alt img{float:left;margin:6px 25px;}
.slideraltyazi{float:left;}
    Not : img kodunda değer gir dediğim yerlere resimin yükseklik genişliğini girmen her zaman yararına olucaktır çünki hem walidator hatası almazsın hemde tarayıcı açıldığı zaman resim açılmasa bile orada bir resim olduğu belli olur.
    Not2: Her zaman img kodunun sonunu /> diye kapatmayı ihmal etme.
    Not3: Kendini html kodlarına style vererek alıştırma sakın, ayrı bir style.css dosyasına yazarak ilerle (büyük avantaj sağlar ileride.)