css ile slider ortalama

30-01-2013, 17:22:36

Mrb :

<div id="HCB3_SlideStart"><div class="HCB3_SlideB"><ul>
<li><a href=""><div class="HCB3_Slide"><img src="header1.jpg" height="485" width="1980" border="0" /></div></a></li>
<li><a href=""><div class="HCB3_Slide"><img src="header2.jpg" height="485" width="1980" border="0" /></div></a></li>
<li><a href=""><div class="HCB3_Slide"><img src="header3.jpg" height="485" width="1980" border="0" /></div></a></li>
</ul></div> </div>

devamlı sola doğru akan bir slider bu. fakat çozunurluk 1980x485. bunu 1024 ile gösteren bir browserda nasıl ortalanmış ( sağdan ve soldan eşit miktarda gözükmeyecek şekilde) olarak nasıl kodlayabiliriz.. Arka resmi ortaladığımızı düşünün

sayfa küçüldüğü zaman bu sliderın solundan ve sağından eşit miktarda gözükmeyecek. tam ortası görünecek şekilde. teşekkürler şimdiden.

30-01-2013, 19:49:31

#2

Hakibey

yokmudur fikri olan ?

Aşağıdaki resimde anlatmaya çalıştım. Jquery slider kodunuda verdim yukarda

31-01-2013, 11:56:07

#3

~~HELIOS~~

Üyeliği durduruldu

width alanını 1000px yapın ve altına overflow:hidden komutunu ekleyin.

31-01-2013, 13:05:49

#4

Hakibey

HELIOS adlı üyeden alıntı: mesajı görüntüle

width alanını 1000px yapın ve altına overflow:hidden komutunu ekleyin.

#HCB3_SlideStart                        	{
	width: 1980px;
	left: auto;
	right: auto;
	height: 485px;
	position: relative;
	z-index: 1;
	overflow: hidden;
}
#HCB3_SlideStart .HCB3_SlideB               { width:1980px; width: 1980px; height: 485px; overflow: auto;  position: absolute; }
.HCB3_Slide img								{ width:1980px; height:485px;  overflow:hidden;}
#HCB3_SlideStart .HCB3_SlideB ul            { 	background-position: center top;
	margin-top: 0;
	margin-right: auto;
	margin-left: auto;
	background-attachment: fixed;width: 48500px; list-style: none; position: absolute; top: 0; left: 0; margin: 0; padding:0; }
#HCB3_SlideStart ul li                   	{ display: block; float: left; padding: 0; height: 485px; width: 1980px; margin: 0; position: relative; }
#HCB3_SlideStart a.back:hover				{ background-position:-5006px -32px;}
#thumbNav                               	{ position:absolute; bottom:5px; left:5px; height:20px;  z-index:0;}
#thumbNav a                            		{ background:url(../images/controlsA.png) -20px 0; width:20px; height:20px; display:block; float:left; text-indent:-9999px; cursor:pointer}
#thumbNav a:hover ,#thumbNav a.cur			{ background-position:0 0}
#start-stop                            		{ display:none}
#HCB3_SlideStart .HCB3_SlideB ul ul         { position: static; margin: 0; background: none; overflow: visible; width: auto; border: 0; }
#HCB3_SlideStart .HCB3_SlideB ul ul li      { float: none; height: auto; width: auto; background: none; }

<div class="HCB-KALIP">
<div id="HCB3_SlideStart"><div class="HCB3_SlideB"><ul>
<li><a href=""><div class="HCB3_Slide"><img src="header1.jpg" height="485" width="1980" border="0" /></div></a></li>
<li><a href=""><div class="HCB3_Slide"><img src="header2.jpg" height="485" width="1980" border="0" /></div></a></li>
<li><a href=""><div class="HCB3_Slide"><img src="header3.jpg" height="485" width="1980" border="0" /></div></a></li>
</ul></div> </div>
</div>

31-01-2013, 13:53:38

#5

~~HELIOS~~

Üyeliği durduruldu

Hakibey adlı üyeden alıntı: mesajı görüntüle

#wrapper {
width:100%;
overflow:hidden
}
#HCB3_SlideStart                        	{
	width:100%;
        margin:0px auto;
	height: 485px;
	position: relative;
	z-index: 1;
	overflow: hidden
}
#HCB3_SlideStart .HCB3_SlideB               { width:100%; height: 485px; overflow: auto;  position: absolute; }
.HCB3_Slide img								{ width:100%; height:485px }
#HCB3_SlideStart .HCB3_SlideB ul            { 	background-position: center top;
	margin: 0px auto;
	background-attachment: fixed;width: 100%; list-style: none; position: absolute; top: 0; left: 0; margin: 0; padding:0; }
#HCB3_SlideStart ul li                   	{ display: block; float: left; padding: 0; height: 485px; width: 100%; margin: 0; position: relative; }
#HCB3_SlideStart a.back:hover				{ background-position:-5006px -32px;}
#thumbNav                               	{ position:absolute; bottom:5px; left:5px; height:20px;  z-index:0;}
#thumbNav a                            		{ background:url(../images/controlsA.png) -20px 0; width:20px; height:20px; display:block; float:left; text-indent:-9999px; cursor:pointer}
#thumbNav a:hover ,#thumbNav a.cur			{ background-position:0 0}
#start-stop                            		{ display:none}
#HCB3_SlideStart .HCB3_SlideB ul ul         { position: static; margin: 0; background: none; overflow: visible; width: auto; border: 0; }
#HCB3_SlideStart .HCB3_SlideB ul ul li      { float: none; height: auto; width: auto; background: none; }

<div id="wrapper">
<div class="HCB-KALIP">
<div id="HCB3_SlideStart"><div class="HCB3_SlideB"><ul>
<li><a href=""><div class="HCB3_Slide"><img src="header1.jpg" height="485" width="1980" border="0" /></div></a></li>
<li><a href=""><div class="HCB3_Slide"><img src="header2.jpg" height="485" width="1980" border="0" /></div></a></li>
<li><a href=""><div class="HCB3_Slide"><img src="header3.jpg" height="485" width="1980" border="0" /></div></a></li>
</ul></div> </div>
</div>
</div>

Birde böyle dener misiniz?

31-01-2013, 17:29:22

#6

Hakibey

HELIOS adlı üyeden alıntı: mesajı görüntüle

Birde böyle dener misiniz?

yok olmadı üstad. ortalamak yerine daraltıyor slideri. browser küçüldükçe sliderın sağı ve solundan içeri doğru girsin istiyorum. örn : çözünürlük 1920 1080 ken slider tam, 1280 768 ken sliderın 1280 kısımda kalan tam ortası ortalanmış, kenarları gizlenmiş şekilde olması gerek.

www.merakliturkler.com/Umit.rar dosyayı buraya ekledim. bir bakarsan çok sevinirim.ayrıca şimdi gördüm kirlisepeti.com.tr de buna benzer birşey var ama benim istediğim sadece ordada olduğu gibi browser küçüldüğünde slider ın ortası küçülmesin. sağdan ve soldan gizlensin kenar.

02-02-2013, 23:24:19

#7

Hakibey

fikri olan yokmu ?

yada böyle bişe yokmu. alt tarafı sayfa kçüldükçe slider sabit kalıcak ve sağdan soldan büyük ekranda gözüken ayrıntılar gözükmeyecek sadece

yardım ltfn ?