• 08-03-2015, 20:51:33
    #1
    Merhaba arkadaşlar

    bir popüler kısmı oluşturmaya çalışıyorum. ul li etiketinin içinde img var. yazıyı resmin yanında ortalamak istiyorum yalnız yazının devamı taşıyor.

    Resim


    css kodlarım
    #populerdiziler {float:left; width:260px; height:340px; border:1px solid red; overflow-y:scroll}
    #populerdiziler ul li {float:left;display:block; margin:5px; border:1px solid red; }
    #populerdiziler ul li img {vertical-align:middle;}
    html kodlarım
    <div id="populerdiziler">
    <ul>
    <li><img src="#" width="75" height="180"> The Last Game1 deneme </li>
    </ul>
    </div>
    Float:left; denedim ama bu seferde vertial-align:middle özelliğini kaybediyor.


    Yardımcı olabilirseniz sevinirim.
  • 08-03-2015, 22:24:50
    #2
    Sorun şu;
    populerdiziler id'sine verilen 260px'liksınırı aşıyor ve aşağıya taşıyor

    Çözüm şu;

    #populerdiziler {float:left; width:350px; height:340px; border:1px solid red; overflow-y:scroll}
    #populerdiziler id'ine sahip width özelliğini yükseltirsin örneğin 350px yaptım ben.
  • 09-03-2015, 00:09:50
    #3
    MandalinaJolie adlı üyeden alıntı: mesajı görüntüle
    Sorun şu;
    populerdiziler id'sine verilen 260px'liksınırı aşıyor ve aşağıya taşıyor

    Çözüm şu;

    #populerdiziler {float:left; width:350px; height:340px; border:1px solid red; overflow-y:scroll}
    #populerdiziler id'ine sahip width özelliğini yükseltirsin örneğin 350px yaptım ben.
    İlginiz için sağolun ama yapmak istediğimle alakası yok
    Ben yazıyı tamamen ortalamak istiyorum alan zaten sınırda daha fazla genişletemem.
  • 09-03-2015, 00:22:24
    #4
    Z9Real adlı üyeden alıntı: mesajı görüntüle
    İlginiz için sağolun ama yapmak istediğimle alakası yok
    Ben yazıyı tamamen ortalamak istiyorum alan zaten sınırda daha fazla genişletemem.
    Merhaba,
    Soruyu yanlış anlamışım,pekala şöyle bir şey yapılabilir;
    li içerisindeki metni span içerisine (başka bi etikette olabilir) alalım ve o span'a da font-size sığacak şekilde güncelleyelim.

    ve daha sonra #populerdiziler ul li img {vertical-align:middle;} özelliğini silelim tamamen, burada gerek kalmıyor ve #populerdiziler ul li span {font-size:12px;float:right;line-height:170px;} şunu ekleyelim,burada; span içeriğimizi sola yasladık resmin sağına dayadık ve div yüksekliğinin yarısı kadar (340px/2 = 170) bi değer girelim.test ettim çalıştı.


    Örn;
     <div id="populerdiziler">
            <ul>
                <li><img src="#" width="75" height="180"> <span>The Last Game1</span> </li>
            </ul>
        </div>
    #populerdiziler {float:left; width:260px; height:340px; border:1px solid red; overflow-y:scroll}
    #populerdiziler ul li {float:left;display:block; margin:5px; border:1px solid red; }
    #populerdiziler ul li img {}
    #populerdiziler ul li span {font-size:12px;float:right;line-height:170px;}
  • 09-03-2015, 00:37:46
    #5
    MandalinaJolie adlı üyeden alıntı: mesajı görüntüle
    Merhaba,
    Soruyu yanlış anlamışım,pekala şöyle bir şey yapılabilir;
    li içerisindeki metni span içerisine (başka bi etikette olabilir) alalım ve o span'a da font-size sığacak şekilde güncelleyelim.

    ve daha sonra #populerdiziler ul li img {vertical-align:middle;} özelliğini silelim tamamen, burada gerek kalmıyor ve #populerdiziler ul li span {font-size:12px;float:right;line-height:170px;} şunu ekleyelim,burada; span içeriğimizi sola yasladık resmin sağına dayadık ve div yüksekliğinin yarısı kadar (340px/2 = 170) bi değer girelim.test ettim çalıştı.


    Örn;
     <div id="populerdiziler">
            <ul>
                <li><img src="#" width="75" height="180"> <span>The Last Game1</span> </li>
            </ul>
        </div>
    #populerdiziler {float:left; width:260px; height:340px; border:1px solid red; overflow-y:scroll}
    #populerdiziler ul li {float:left;display:block; margin:5px; border:1px solid red; }
    #populerdiziler ul li img {}
    #populerdiziler ul li span {font-size:12px;float:right;line-height:170px;}
    Hocam tekrar yazıyı uzattığımda bozukluklar meydana geliyor
  • 09-03-2015, 00:50:26
    #6
    Z9Real adlı üyeden alıntı: mesajı görüntüle
    Hocam tekrar yazıyı uzattığımda bozukluklar meydana geliyor
    Merhaba kodlarda değişiklik yaptım,aynen şu şekilde düzenlersen istediğin olmuş olacak;

    <div id="populerdiziler">
            <ul>
                <li><img src="#" width="75" height="180"> <p><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat id, necessitatibus quo ullam provident, earum iure eos. Perferendis fugit alias dolore quae, tempora quasi rerum officia vero libero totam distinctio repudiandae ab possimus error odio asperiores tenetur ducimus eos! Nobis aspernatur cum eos laudantium consequatur similique deserunt eius, iure aut..</span></p> </li>
            </ul>
        </div>
    #populerdiziler {float:left; width:260px; height:340px; border:1px solid red; overflow-y:scroll}
    #populerdiziler ul {margin:0;padding:0;}
    #populerdiziler ul li {float:left;display:block; margin:5px; border:1px solid red; }
    #populerdiziler ul li img {vertical-align:middle;width:80px;}
    #populerdiziler ul li p {font-size:12px;float:right;width:150px;margin-top:0;}
    resim alanına ve text alanına genişlik vermek gerekiyordu genişlik verildi.
  • 09-03-2015, 01:00:31
    #7
    MandalinaJolie adlı üyeden alıntı: mesajı görüntüle
    Merhaba kodlarda değişiklik yaptım,aynen şu şekilde düzenlersen istediğin olmuş olacak;

    <div id="populerdiziler">
            <ul>
                <li><img src="#" width="75" height="180"> <p><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat id, necessitatibus quo ullam provident, earum iure eos. Perferendis fugit alias dolore quae, tempora quasi rerum officia vero libero totam distinctio repudiandae ab possimus error odio asperiores tenetur ducimus eos! Nobis aspernatur cum eos laudantium consequatur similique deserunt eius, iure aut..</span></p> </li>
            </ul>
        </div>
    #populerdiziler {float:left; width:260px; height:340px; border:1px solid red; overflow-y:scroll}
    #populerdiziler ul {margin:0;padding:0;}
    #populerdiziler ul li {float:left;display:block; margin:5px; border:1px solid red; }
    #populerdiziler ul li img {vertical-align:middle;width:80px;}
    #populerdiziler ul li p {font-size:12px;float:right;width:150px;margin-top:0;}
    resim alanına ve text alanına genişlik vermek gerekiyordu genişlik verildi.
    Hocam ilginiz için teşekkür ederim ama yazı fazla olunca tam görünüyor ben sadece kısa bir yazı yazıcam ve onun ortalanması gerek
  • 09-03-2015, 01:19:10
    #8
    Z9Real adlı üyeden alıntı: mesajı görüntüle
    Hocam ilginiz için teşekkür ederim ama yazı fazla olunca tam görünüyor ben sadece kısa bir yazı yazıcam ve onun ortalanması gerek
    eğer sabit bi genişlik olacaksa #populerdiziler ul li p {display:table-cell;vertical-align: middle; font-size:12px;float:right;width:150px;margin-top:30px;} kodunu güncelleyebilir kendinize göre margin-top'u değiştirebilirsiniz.