Sayfada sabit duran alan oluşturmak

[kaberdey]

Başlıktan da anlaşılacağı gibi istediğimiz sayfanın alt ya da üstünde sabit duran, sayfa kaysa da yeri değişmeyen (Facebook'da altta sabit duran alan)
oluşturacağız.

Resim 1: Sabit alan için Facebook örneği

Ne Kullanacağız:
Sadece HTML ve CSS kodları.
(Ayrıntılı bilmeniz gerekmemektedir.)


Nasıl Yapacağız:

1. Aşama
Öncelikle bir HTML düzenleyicisi açalım.
Farklı programlar kullanabiliriz ben FrontPage üzerinden anlatacağım.

2. Aşama
Sayfaya içeriğimizi normal bir şekilde yerleştirelim, sadece sabit kalacak alanı ve o alana ekleyeceğimiz içeriğimiz kalsın.

3. Aşama
Normla içeriğin yerleştirilmesinin ardından;
Sayfanın HTML kod görünümünü açalım

Resim 2: Kod görünümü nasıl açılır?

Altta bulunan Böl ya da Kod düğmelerini kullanabiliriz.


4. Aşama
Daha sonra alttaki resimde görünen yere aynı kodları ekliyoruz

Resim 3 :CSS kodları ve Eklenecek yer

<style type="text/css">
#sabit 
{
display:block; 
bottom:0px; 
left:0px; 
width:130px; 
position:fixed; 
border:0px; 
text-align:center; 
font-weight:bold; 
width:100%;
}
</style>

5. Aşama
Şimdi sabit durmasını istediğimiz alanımızı oluşturalım. Yine kod görünümündeyken alttaki resimde görünen yere görünen kodu ekliyoruz.

Resim 4: Sabit alanın eklenmesi

NOT: alttaki yazıyı değil kod bölümündeki yazıyı yazıyoruz, alt alana kendisi sayfanın en üstünde görünecek şekilde çıkacaktır, ancak browser ile baktığımızda en altta göreceğiz...

6. Aşama
Son resimden anlaşılacağı gibi
"Bu araya eklediğimiz her şey sayfanın en altında sabit olarak duracaktır."
yazısının olduğu alanın içeriğini istediğiniz gibi değiştirebilirsiniz.

!!DİKKAT!!
1- Hazırladığınız çalışmaz ise resimlere bakarak kodları ve yerlerini kontrol ediniz.
2- Sayfanın altında değil de üstünde durmasını isterseniz;
Resim 3'te "bottom:0px; " yazan kodu "top:0px; " olarak değiştirmeniz yeterlidir.
3- Sabit alan içeriğini değiştirirken;

Resim 5: İçerik değiştirirken dikkat edilecek noktalar

Resimdeki gibi noktalar çıkacaktır, bu noktaları silmeye çalışmayın, sadece tasarım alanında görünecek ve sayfanızda görünmeyecektir. Bu noktalar silinirse hazırladığınız sayfa çalışmayacaktır

4- Resim 3'teki #sabit ile Resim 4'teki <div id="sabit"> kodlarındaki sabit isimlerinin aynı olmasına dikkat ediniz, değiştirmek isterseniz ikisini birden değiştirebilirsiniz...

Umarım işiniz görür,
Anlatım resimler bla bla bla hepsi bana aittir...

 

[CebraiL STARK]

güzel anlatım aynı işlem örneğin include ile header.php gibi oluyo çoğu script temalarında kullanılıyo

 

[PlainLogic]

Bende nasıl sayfada sabit duran alan oluşturmak nasıl olur diyordum biraz dalga geçer gibi oldu ama arayan arkadaşlar olabilir güzel ve temiz bir anlatım olmuş teşekürler.

 

[kaberdey]

güzel anlatım aynı işlem örneğin include ile header.php gibi oluyo çoğu script temalarında kullanılıyo

include kullanılırsa da;
ya include edilecek sayfada CSS ve DIV oluşturulmalıdır ya da bu include eden sayfada bu CSS kullanılıp, include edilen sayfada sabit id'li DIV kullanılmaılıdır.

 

[Rom.]

HErşeyi yerli yerinde yaptım en aşağıya da aekledi ama nasıl ortalayacağız bu yazıyı usta ?
Kodlar arasında center var ama bi işe yaramıyo heralde ?

 

[myefsane]

Güzel bir anlatım odlu teşekkürler.

 

[calvaria]

Gerçekten çok güzel bir anlatım olmuş...çok teşekkür ederim şahsım adına.

 

[kaberdey]

HErşeyi yerli yerinde yaptım en aşağıya da aekledi ama nasıl ortalayacağız bu yazıyı usta ?
Kodlar arasında center var ama bi işe yaramıyo heralde ?

Hangi yazıyı ortalayacaksın anlamadım, sabit alan içerisindeki yazıdan bahsediyorsan görsel tasarım görünümündeyken (word'deki gibi) ortalamak istediğin "şey"i seç ve ortala tuşuna bas, bu kadar...

Bende nasıl sayfada sabit duran alan oluşturmak nasıl olur diyordum biraz dalga geçer gibi oldu ama arayan arkadaşlar olabilir güzel ve temiz bir anlatım olmuş teşekürler.

Güzel bir anlatım odlu teşekkürler.

Gerçekten çok güzel bir anlatım olmuş...çok teşekkür ederim şahsım adına.

Rica ederim arkadaşlar; inşallah tezim bitince daha çok zamanım olacak, tecrübelerimi daha çok paylaşmaya çalışacağım.

 

[YoungClever]

denedim ancak, internet explorer'da işe yaramıyor(ie8 yüklü, diğer sürümleri bilemicem)