Web sayfasında sabit duran alan oluşturmak

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

HTML-Kodu:
<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

This image has been resized. Click this bar to view the full image. The original image is sized 680×257.

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

This image has been resized. Click this bar to view the full image. The original image is sized 818×63.

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…

Web sayfasında sabit duran alan oluşturmak için 4 cevap

  1. merhaba diyor ki:

    merhaba web siteme ekledim verdiğiniz kodu ama sayfayı aşağıya indirdiğimde orta alandaki manşet scrpitinin arkasında kalıyor acaba nasıl üst tarafta gösterebilirim bilgi verebilirmisiniz cevabınızı bekliyorum kolay gelsin.

    • PHP'ci diyor ki:

      Manşet kodları flash ile hazırlanmış olabilir bu durumda allta kalması normaldir. Eğer flash değil ise z-index değerini yükselterek daha yukarıya çıkmasını sağlayabilirsiniz.

  2. bi dost diyor ki:

    Çoook işime yaradı Allah Razı olsun ne deyim. Başarılar.

  3. bedri diyor ki:

    İ.E ÇALIŞMIYOR NE YAPABİLİRİM?

Bir Cevap Yazın

Aşağıya bilgilerinizi girin veya oturum açmak için bir simgeye tıklayın:

WordPress.com Logosu

WordPress.com hesabınızı kullanarak yorum yapıyorsunuz. Log Out / Değiştir )

Twitter resmi

Twitter hesabınızı kullanarak yorum yapıyorsunuz. Log Out / Değiştir )

Facebook fotoğrafı

Facebook hesabınızı kullanarak yorum yapıyorsunuz. Log Out / Değiştir )

Google+ fotoğrafı

Google+ hesabınızı kullanarak yorum yapıyorsunuz. Log Out / Değiştir )

Connecting to %s

%d blogcu bunu beğendi: