Site içi scrollbar yapımı

Spike

Arkadaşlar bir navbar oluşturdum ve bunun içine üyelerin profil linklerini yerleştirdim. Ama yerleştirilen profil linkleri alta iniyor. Ben yan yana aynı çizgi üzerinde olmasını ve altlarında bir scrollbar oluşmasını (ki sağa sola kaydırabilelim) - Flarum gibi - istiyorum. Nasıl yapabilirim?

https://eksiup.com/p/q414789126b8

kadirglck

Merhaba Spike ,
Öncelikle sorunundan anladığım kadarıyla üyelerinin sembol fotolarının yanında linklerinin olmasını istiyorsun. Açıkcası pek açıklayıcı olmamış sorunun. Biraz daha açıklarsan eğer sana yardımcı olabilirim diye düşünüyorum. İyi akşamlar.

Halil Han BADEM

Spike Bunun için frame kullanabilirsin. Frame içerisine HTML kodu ile kullanıcıları tek satırda dizip, frame penceresini genel sitenin çözünürlüğünde yaparsan en azında scroll çıktığında siten değil frame ekranı yana kayar. Buna ek olarak frame ayarının border değerini "0" yaparsan frame yokmuş gibi bir tasarıma sahip olabilirsin.

Spike

Halil Han BADEM bir örnekle gösterebilir misiniz

Halil Han BADEM

Spike Sürekli seyahat halinde olduğum için örnek hazırlama durumum pek yok. Lakin aşağıdaki linkler ile veritabanından çektiğin verileri frame'ye gömerek işlemini halledebilirsin.

https://www.w3schools.com/tags/tag_frameset.asp
https://www.tutorialspoint.com/html/html_frames.htm

Spike

<frameset>
<nav class="navbar navbar-default friends">
	<div class="container">
		<ul class="nav navbar-nav">
			<li>
				<a class="friends_li" href="#">
					<img src="https://wallpapercave.com/wp/pq1ICtw.jpg" class="img-circle person friendfoto" alt="test">
					<br>
					YuiMaqui
				</a>
			</li>
			<li>
				<a class="friends_li" href="#">
					<img src="https://wallpaperplay.com/walls/full/a/a/d/285919.jpg" class="img-circle person friendfoto" alt="test">
					<br>
					Orihime
				</a>
			</li>
			<li>
				<a class="friends_li" href="#">
					<img src="http://getwallpapers.com/wallpaper/full/a/8/d/342971.jpg" class="img-circle person friendfoto" alt="test">
					<br>
					Grimmjow
				</a>
			</li>
			<li>
				<a class="friends_li" href="#">
					<img src="https://static.zerochan.net/Coyote.Starrk.full.571807.jpg" class="img-circle person friendfoto" alt="test">
					<br>
					Starrk
				</a>
			</li>
			<li>
				<a class="friends_li" href="#">
					<img src="https://images6.alphacoders.com/947/thumb-350-947135.png" class="img-circle person friendfoto" alt="test">
					<br>
					Aizen
				</a>
			</li>
			<li>
				<a class="friends_li" href="#">
					<img src="https://wallpapercave.com/wp/pq1ICtw.jpg" class="img-circle person friendfoto" alt="test">
					<br>
					YuiMaqui
				</a>
			</li>
			<li>
				<a class="friends_li" href="#">
					<img src="https://wallpaperplay.com/walls/full/a/a/d/285919.jpg" class="img-circle person friendfoto" alt="test">
					<br>
					Orihime
				</a>
			</li>
			<li>
				<a class="friends_li" href="#">
					<img src="http://getwallpapers.com/wallpaper/full/a/8/d/342971.jpg" class="img-circle person friendfoto" alt="test">
					<br>
					Grimmjow
				</a>
			</li>
			<li>
				<a class="friends_li" href="#">
					<img src="https://static.zerochan.net/Coyote.Starrk.full.571807.jpg" class="img-circle person friendfoto" alt="test">
					<br>
					Starrk
				</a>
			</li>
			<li>
				<a class="friends_li" href="#">
					<img src="https://images6.alphacoders.com/947/thumb-350-947135.png" class="img-circle person friendfoto" alt="test">
					<br>
					Aizen
				</a>
			</li>
			<li>
				<a class="friends_li" href="#">
					<img src="https://wallpapercave.com/wp/pq1ICtw.jpg" class="img-circle person friendfoto" alt="test">
					<br>
					YuiMaqui
				</a>
			</li>
			<li>
				<a class="friends_li" href="#">
					<img src="https://wallpaperplay.com/walls/full/a/a/d/285919.jpg" class="img-circle person friendfoto" alt="test">
					<br>
					Orihime
				</a>
			</li>
			<li>
				<a class="friends_li" href="#">
					<img src="http://getwallpapers.com/wallpaper/full/a/8/d/342971.jpg" class="img-circle person friendfoto" alt="test">
					<br>
					Grimmjow
				</a>
			</li>
			<li>
				<a class="friends_li" href="#">
					<img src="https://static.zerochan.net/Coyote.Starrk.full.571807.jpg" class="img-circle person friendfoto" alt="test">
					<br>
					Starrk
				</a>
			</li>
			<li>
				<a class="friends_li" href="#">
					<img src="https://images6.alphacoders.com/947/thumb-350-947135.png" class="img-circle person friendfoto" alt="test">
					<br>
					Aizen
				</a>
			</li>
		</ul>
	</div>
</nav>
</frameset>

Bu şekilde deniyorum ama halen aynı.

Spike

Güncel

Halil Han BADEM

Lütfen sorularınızın çözümü için yardımcı olmak adına daha fazla bilgi veriniz.

Kendi hazırladığım bir örnek:

index.html

<!DOCTYPE html>
<html>
<head>
	<title>Yazılım Topluluğu</title>
</head>
 <style type="text/css">
 	iframe {
 		overflow-y: scroll;
 	}
 </style>
<body>
 <iframe src="profiller.html" width="100%" height="110" frameborder="0"></iframe>
</body>
</html>

profiller.html

<!DOCTYPE html>
<html>
<head>
	<title>Profiller</title>
</head>
<style type="text/css">
	img {
		margin: 10px;
	}

	#images {
		white-space: nowrap;
	}
</style>
<body>

	<div id="images">
		<img src="https://icon-library.net/images/profile-png-icon/profile-png-icon-16.jpg" alt="" width="50" height="50" />
		<img src="https://icon-library.net/images/profile-png-icon/profile-png-icon-16.jpg" alt="" width="50" height="50"/>
		<img src="https://icon-library.net/images/profile-png-icon/profile-png-icon-16.jpg" alt="" width="50" height="50"/>
		<img src="https://icon-library.net/images/profile-png-icon/profile-png-icon-16.jpg" alt="" width="50" height="50"/>
		<img src="https://icon-library.net/images/profile-png-icon/profile-png-icon-16.jpg" alt="" width="50" height="50"/>
		<img src="https://icon-library.net/images/profile-png-icon/profile-png-icon-16.jpg" alt="" width="50" height="50"/>
		<img src="https://icon-library.net/images/profile-png-icon/profile-png-icon-16.jpg" alt="" width="50" height="50"/>
		<img src="https://icon-library.net/images/profile-png-icon/profile-png-icon-16.jpg" alt="" width="50" height="50"/>
		<img src="https://icon-library.net/images/profile-png-icon/profile-png-icon-16.jpg" alt="" width="50" height="50"/>
		<img src="https://icon-library.net/images/profile-png-icon/profile-png-icon-16.jpg" alt="" width="50" height="50"/>
		<img src="https://icon-library.net/images/profile-png-icon/profile-png-icon-16.jpg" alt="" width="50" height="50"/>
		<img src="https://icon-library.net/images/profile-png-icon/profile-png-icon-16.jpg" alt="" width="50" height="50"/>
		<img src="https://icon-library.net/images/profile-png-icon/profile-png-icon-16.jpg" alt="" width="50" height="50"/>
		<img src="https://icon-library.net/images/profile-png-icon/profile-png-icon-16.jpg" alt="" width="50" height="50"/>
		<img src="https://icon-library.net/images/profile-png-icon/profile-png-icon-16.jpg" alt="" width="50" height="50"/>
		<img src="https://icon-library.net/images/profile-png-icon/profile-png-icon-16.jpg" alt="" width="50" height="50"/>
		<img src="https://icon-library.net/images/profile-png-icon/profile-png-icon-16.jpg" alt="" width="50" height="50"/>
		<img src="https://icon-library.net/images/profile-png-icon/profile-png-icon-16.jpg" alt="" width="50" height="50"/>
		<img src="https://icon-library.net/images/profile-png-icon/profile-png-icon-16.jpg" alt="" width="50" height="50"/>
		<img src="https://icon-library.net/images/profile-png-icon/profile-png-icon-16.jpg" alt="" width="50" height="50"/>
		<img src="https://icon-library.net/images/profile-png-icon/profile-png-icon-16.jpg" alt="" width="50" height="50"/>
		<img src="https://icon-library.net/images/profile-png-icon/profile-png-icon-16.jpg" alt="" width="50" height="50"/>
	</div>
</body>
</html>

Mobil görünüm (PC ile aynı):

İyi çalışmalar.

Spike

Halil Han BADEM Teşekkür ederim. Kullanımını şimdi anlamış bulundum.