Css ile Box Yerleşim Ayarlama

Bu konuyu okuyanlar

mstfcck

Asistan
Katılım
18 Mart 2010
Mesajlar
174
Reaksiyon puanı
5
Puanları
0
Merhaba,

Sorum uzun ama basit. Merak etmeyin.. :) Kendim yapamadım, o yüzden fikir almak istiyorum.

Arkadaşlar, 700x400 boyutunda, "positon:absolute" ile sabitlenmiş, bir alan içerisine aşağıda resimdeki gibi bir liste yapmak istiyorum.
Portal'imizde kullanacağız.

Ör:

Kod:
<div style="position:absolute; width:700px; height:400px; background:#333;">

<div style="width:200px; height:50px; background:#FFF; color:#333; font-size:18pt;">[B]A[/B]</div>
<div style="width:200px; height:50px; background:#FFF; color:#333; font-size:18pt;">[B]B[/B]</div>
<div style="width:200px; height:50px; background:#FFF; color:#333; font-size:18pt;">[B]C[/B]</div>
<div style="width:200px; height:50px; background:#FFF; color:#333; font-size:18pt;">[B]D[/B]</div>
<div style="width:200px; height:50px; background:#FFF; color:#333; font-size:18pt;">[B]E[/B]</div>
[B]...[/B]

</div>

Detay:

Yukarıdaki code örneğinde olduğu gibi tablo olmadan sadece div veya ul list kullanılarak olması gerekiyor.
Yükseklik sabit olduğu için (resimdeki gibi, yukarıdan-aşağı) A, B, C, D, E, F'den sonra listenin devamı 2. bir sutun gibi sağ taraftan devam edecek.
L'den sonra yine sağ taraftan devam edecek.

div genişlik olarak da sabit olduğu için liste alana sığmadığı durumda sadece yatay olarak scrollbar çıkacak ve listenin devamı yine aynen gözükecek.
Listenin sağ tarafını görmek için scrollbar yatay olarak kaydırılmalı. Kesinlikle dikey olarak scroolbar istemiyorum.

Böyle bir liste nasıl yapılabilir, çok uğraştım ben ama yapamadım. Listedeki div'lere "float:left" vermek gibi şeyler de denedim ama bu sefer liste yan yana gidip aşağıdan devam ediyor. Benim istediğim bu değil. Fikirlerinizi bekliyorum..

i703mw.jpg
 

cngzkyz

Profesör
Katılım
28 Temmuz 2012
Mesajlar
2,856
Reaksiyon puanı
276
Puanları
83
Tablo'a neden üvey evlat muamelesi yapıyorsunuz :D Halbuki istediğiniz için biçilmiş kaftan. css ile bunun tek başına yapılması çok zor gibi.
 
S

SDN Okuru

SDN Okuru
Tablo'a neden üvey evlat muamelesi yapıyorsunuz :D Halbuki istediğiniz için biçilmiş kaftan. css ile bunun tek başına yapılması çok zor gibi.

Because, I hate from the table :)

Tablo'da da bu istediğim tam olarak istediğim gibi olmuyor. Teşekkür ederim ama bu konuyu tartışmak yerine çözüm önermenizi rica ediyorum :)

Çözüm için sadece Css zorunlu değildir, javascript, jquery'de kullanılabilir..
 

mstfcck

Asistan
Katılım
18 Mart 2010
Mesajlar
174
Reaksiyon puanı
5
Puanları
0
Tablo'a neden üvey evlat muamelesi yapıyorsunuz :D Halbuki istediğiniz için biçilmiş kaftan. css ile bunun tek başına yapılması çok zor gibi.

Because, I hate from the table :)

Tablo'da da bu istediğim tam olarak istediğim gibi olmuyor. Teşekkür ederim ama bu konuyu tartışmak yerine çözüm önermenizi rica ediyorum :)

Çözüm için sadece Css zorunlu değildir, javascript, jquery'de kullanılabilir..
 
Katılım
31 Aralık 2007
Mesajlar
17,485
Reaksiyon puanı
188
Puanları
63
JQuery ile bunu çözen eklenti vardı da hatrımda değil. Onun dışında CSS ile de yapmak için column kullanmak gerekiyor. Gerekli bilgiyi buradan bulabilirsin...

Edit : jQuery için de şöyle bir eklenti buldum. Sanırım işini görür...
 

mstfcck

Asistan
Katılım
18 Mart 2010
Mesajlar
174
Reaksiyon puanı
5
Puanları
0
JQuery ile bunu çözen eklenti vardı da hatrımda değil. Onun dışında CSS ile de yapmak için column kullanmak gerekiyor. Gerekli bilgiyi buradan bulabilirsin...

Edit : jQuery için de şöyle bir eklenti buldum. Sanırım işini görür...

Teşkküler..

JQuery için olan örnek güzel ama istediğim sonucu vermiyor gibi duruyor örneklerde..

CSS3'ün column özelliğini biliyorum fakat Internet Explorer gerçeğinden malesef kaçamıyorum, desteklemiyor!
Bütün şirkette IE kullanılıyor (ki diğer browser'lar da local linkleri açmıyor).

Firefox ve Chrome için örnek aşağıdaki gibi, hemen hemen istediğim sonucu aldım:

Kod:
<!DOCTYPE html>
<html>
    <head>
        <style> 
            .newspaper
            {
                background:#333;
                height:280px; width:700px; padding:10px; overflow-y:hidden; overflow-x:scroll;
                -moz-column-width:200px; /* Firefox */
                -webkit-column-width:200px; /* Safari and Chrome */    
                -moz-column-gap:0px; /* Firefox */
                -webkit-column-gap:0px; /* Safari and Chrome */
            }
            .tile                 { width:200px; height:50px; padding:5px; border-left:1px solid #f00; background:#ccc; }
            .tile:hover        { background:#A00; }
        </style>
    </head>
<body>

<p>

    <div class="newspaper">
        
            <div class="tile">AAAAAAAAAAAA</div>
            <div class="tile">BBBBBBBBBBBB</div>
            <div class="tile">CCCCCCCCCCCC</div>
            <div class="tile">DDDDDDDDDDDD</div>
            <div class="tile">EEEEEEEEEEEE</div>
            <div class="tile">FFFFFFFFFFFFF</div>
            <div class="tile">GGGGGGGGGGG</div>
            <div class="tile">HHHHHHHHHHHH</div>
            <div class="tile">IIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIII</div>
            <div class="tile">JJJJJJJJJJJJJJJJJJ</div>
            <div class="tile">KKKKKKKKKKKK</div>
            <div class="tile">LLLLLLLLLLLLLLL</div>
            <div class="tile">MMMMMMMMMM</div>
            <div class="tile">NNNNNNNNNNNN</div>
            <div class="tile">OOOOOOOOOOO</div>
            <div class="tile">ÖÖÖÖÖÖÖÖÖÖÖ</div>
            <div class="tile">PPPPPPPPPPPP</div>        

    </div>

</body>
</html>
 

Son mesajlar

Üst