Resim Yanındaki Yazının Taşması

08-03-2015, 20:51:33

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

MandalinaJolie

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

Z9Real

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

MandalinaJolie

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

Z9Real

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

MandalinaJolie

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

Z9Real

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

MandalinaJolie

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.