Kullanıcı:
Filtreler

Scrool alt olarak ayarlama

memurvadisi1
memurvadisi1

memurvadisi1

Kayıtlı Üye
Katılım
12 Nisan 2014
Mesajlar
3.024
Tepkime puanı
0
Puan
0
QA1OJg.png


arkadaşlar ben scrolu yana doğru kaydırmak istiyorum fakat bu li leri yan sıra bittikten sonra alt alta ekliyor bu sebepten yan scrol aktif oluyor ama ben alta atamak istiyorum bunu nasıl yapabilirim.

sağ scroll görünmeme sebebi overflow-y:hidden; yaptım ondan yoksa o aktif olarak çalışıyor yani aşağı sürükleyince liste elemanlarımı görüyorum .

yapmak istediğim sağ scrollun görevini aşağı vermek.
 
Son düzenleme:
hocam sen alt scroll u kullanmak istiyorsun ama sorun scroll da değil. li 'lerin ekran boyutuna göre ayarlanıyor olmasında.

li 'ye float:left diyerek tek satır olmasını sağlarsan alt scroll kendiliğinden aktif olacaktır diye düşünüyorum.
 
sorunumvar' Alıntı:
hocam sen alt scroll u kullanmak istiyorsun ama sorun scroll da değil. li 'lerin ekran boyutuna göre ayarlanıyor olmasında.

li 'ye float:left diyerek tek satır olmasını sağlarsan alt scroll kendiliğinden aktif olacaktır diye düşünüyorum.
Genişletmek için tıkla ...

hocam liye float left verilmiş halde zaten yoksa yan yana sıralamazdı alt alta sıralardı.

sorunun bahsettiğin gibi olduğunun farkındayım fakat. diyelim li nin altındaki ul divini ben 999999px yaptım bu seferde sonsuza kadar sıralıyor yan yana bunu ayarlayabiliyormuyum?
 
memurvadisi1' Alıntı:
hocam liye float left verilmiş halde zaten yoksa yan yana sıralamazdı alt alta sıralardı.

sorunun bahsettiğin gibi olduğunun farkındayım fakat. diyelim li nin altındaki ul divini ben 999999px yaptım bu seferde sonsuza kadar sıralıyor yan yana bunu ayarlayabiliyormuyum?
Genişletmek için tıkla ...

height vererek deneyin bir de hocam.
 
sorunumvar' Alıntı:
height vererek deneyin bir de hocam.
Genişletmek için tıkla ...

onuda denedim hocam fakat ne yaptıysam liste bittikten sonra yan yana sıralamıyor müsayitseniz basit bir html sayfasıyla gösterebilirmisiniz?

<div id="aaa">
<ul>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
</ul>
</div>
 
Hocam tam olarak anlamadım, bütün itemleri yan yana sıralamak istiyorsun fakat, yana doğru scroll kaydırınca altamı gitmek istiyorsun?

Eğer normal olarak her bir elemanı yan yana sıralamak ve scroll'u kaydırınca sağa doğru gitsin istiyorsan; şu tip bir eklenti işini görecektir.

Sly
 
8gmGz1.png


resimde gördüğünüz gibi sağdaki scroll kullanılarak listenin diğer elemanları geliyor bunun sebebi listeyi sıra bittikten sonra alt alta eklemesi ama ben bunu yan yana sıralatmak yani alt scroll kullanmak istiyorum.

Kullandığım kod bu.

Kod: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "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=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
#aaa {
	position:relative;
	z-index:1;
	margin-right: auto;
	margin-left: auto;
	background-color: #C30;
	width: 600px;
}
#aaa ul {
	margin: 0px;
	padding: 0px;
	list-style-type: none;
	overflow: scroll;
	max-height: 75px;
}
#aaa ul li {
	float: left;
	padding-right: 5px;
	padding-left: 5px;
	background-color: #CCC;
	display: block;
	margin-right: 10px;
	margin-bottom: 10px;
	height: 55px;
	width: 55px;
}
</style>
</head>

<body>


<div id="aaa">
<ul>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
</ul></div>
</body>
</html>
 
Son düzenleme:
İstediğin bu olmalı;

Kod: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "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=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
#aaa {
	position:relative;
	z-index:1;
	margin-right: auto;
	margin-left: auto;
	background-color: #C30;
	width: 600px; height: 100px; border: 1px solid black; overflow-x: auto; white-space: nowrap;
	
}

#aaa ul{
	width: 10000px;
}

#aaa ul li {
	float: left;
	padding-right: 5px;
	padding-left: 5px;
	background-color: #CCC;
	display: block;
	margin-right: 10px;
	margin-bottom: 10px;
	height: 55px;
	width: 55px;
}
</style>
</head>

<body>


<div id="aaa">
<ul>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
</ul></div>
</body>
</html>
 
sorunumvar' Alıntı:
İstediğin bu olmalı;

Kod: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "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=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
#aaa {
	position:relative;
	z-index:1;
	margin-right: auto;
	margin-left: auto;
	background-color: #C30;
	width: 600px; height: 100px; border: 1px solid black; overflow-x: auto; white-space: nowrap;
	
}

#aaa ul{
	width: 10000px;
}

#aaa ul li {
	float: left;
	padding-right: 5px;
	padding-left: 5px;
	background-color: #CCC;
	display: block;
	margin-right: 10px;
	margin-bottom: 10px;
	height: 55px;
	width: 55px;
}
</style>
</head>

<body>


<div id="aaa">
<ul>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
</ul></div>
</body>
</html>
Genişletmek için tıkla ...

teşekkür ettim hocam aynen bu istediğim ben ula veriyordum scroll sanırım oradan sonuca gidemedim :D
 
Cevap yazmak için giriş yap yada kayıt ol.
Kişiselleştirme

Tema editörü

Ayarlar Renkler

  • Mobil kullanıcılar bu fonksiyonları kullanamaz.

    Alternatif header

    Farklı bir görünüm için alternatif header yapısını kolayca seçebilirsiniz.

    Görünüm Modu Seçimi

    Tam ekran ve dar ekran modları arasında geçiş yapın.

    Izgara Görünümü

    Izgara modu ile içerikleri kolayca inceleyin ve düzenli bir görünüm elde edin.

    Resimli Izgara Modu

    Arka plan görselleriyle içeriğinizi düzenli ve görsel olarak zengin bir şekilde görüntüleyin.

    Yan Paneli Kapat

    Yan paneli gizleyerek daha geniş bir çalışma alanı oluşturun.

    Sabit Yan Panel

    Yan paneli sabitleyerek sürekli erişim sağlayın ve içeriğinizi kolayca yönetin.

    Box görünüm

    Temanızın yanlarına box tarzı bir çerçeve ekleyebilir veya mevcut çerçeveyi kaldırabilirsiniz. 1300px üstü çözünürler için geçerlidir.

    Köşe Yuvarlama Kontrolü

    Köşe yuvarlama efektini açıp kapatarak görünümü dilediğiniz gibi özelleştirin.

  • Renginizi seçin

    Tarzınızı yansıtan rengi belirleyin ve estetik uyumu sağlayın.
Geri