• SDN Forum üyelikleri çok yakında yeniden açılıyor. Siz de bu büyük topluluğun bir parçası olmak için bizi takipte kalın, gelişmeleri kaçırmayın!

Css Aşağı Sabitleme

L

lavbali

Öğrenci
Katılım
30 Temmuz 2012
Mesajlar
50
Reaksiyon puanı
0
Puanları
6
index

<div id="templatemo_footer_wrapper">

<div id="templatemo_footer">
ANKARA
<div class="cleaner"></div>
</div>
</div>


CSS


#templatemo_footer {
clear: both;
margin: 0 auto;
width: 960px;
padding: 25px 10px 20px;
color: #6c4e1c
text-align: center;
margin: 0 auto;


.cleaner { clear: both }

#templatemo_footer_wrapper {
clear: both;
width: 100%;
background: #171004 url(../images/templatemo_footer.jpg) top repeat-x


İçerisinde Ankara yazacak div i sayfanın altına nasıl sabitlerim.Her zaman sayfanın altında kalacak
 
sayfanın derken browser' ın en altında sabit kalacak demek istiyorsan;

position:fixed;

elementini kullanarak sabit kalmasını sağlayabilirsin. Sayfa aşağıya yukarıya kayar ancak o hep sabit kalır. Eğer bahsettiğin bu değilse yine elementlere position:absolute; position:relative; değerlerinden herhangi birini verip margin-top ve margin-bottom değerleri ile oynayarak yine aşağıda bir yere yerleştirebilirsin.
 
ugurturhal dedi ki:
sayfanın derken browser' ın en altında sabit kalacak demek istiyorsan;

position:fixed;

elementini kullanarak sabit kalmasını sağlayabilirsin. Sayfa aşağıya yukarıya kayar ancak o hep sabit kalır. Eğer bahsettiğin bu değilse yine elementlere position:absolute; position:relative; değerlerinden herhangi birini verip margin-top ve margin-bottom değerleri ile oynayarak yine aşağıda bir yere yerleştirebilirsin.
Genişletmek için tıkla ...






Uploaded with ImageShack.us

Kahverengi bölümü sayfanın sonunda yer almasını istiyorum.Yanlızca sayfanın altına indiğim zaman görünsün.Böyle yapmak istiyorum Nasıl yapacağım ?
 
Nasıl olacak o işlem anlatır mısınız ayrıntılı olarak
 
S.a

eğer yanlış anlamadıysam yapmak istediğini Çalışmalarım yazısının bulunduğu div' in height değeriyle oynayarak elde edebilirsin. Örnek olarak aşağıdaki kodlara göz atmanı tavsiye ederim..

<html>
<style>
.main{ width:100%; height:auto; margin:0px 0px 0px 0px; position:relative; }
.ust { width:100%; height:20%; background-color:#555; position:relative; }
.orta { width:100%; height:100%; background-color:#999; position:relative; }
.alt { width:100%; height:20%; background-color:#ccc; position:relative; }
h1 { margin:0px 0px 0px 0px; color:#900;}
</style>
<body>
<div class="main">
<div class="ust"><h1>Başlık</h1></div>
<div class="orta"><h1>Çalışmalar</h1></div>
<div class="alt"><h1>Alt Kısım</h1></div>
<div>
</body>
</html>


<!-- Burada ORTA adlı div'e vereceğin height değerine göre ALT isimli divi aşağı-yukarı kaydırabilirsin.. Düşük % değeri verirsen ALT div'i yukarı kayar. Yüksek değer verirsen aşağıya kayar. // -->


Umarım yapmak istediğini doğru anlamışımdır..
Kolay gelsin..
 
lavbali dedi ki:
index

<div id="templatemo_footer_wrapper">

<div id="templatemo_footer">
ANKARA
<div class="cleaner"></div>
</div>
</div>


CSS


#templatemo_footer {
clear: both;
margin: 0 auto;
width: 960px;
padding: 25px 10px 20px;
color: #6c4e1c
text-align: center;
margin: 0 auto;


.cleaner { clear: both }

#templatemo_footer_wrapper {
clear: both;
width: 100%;
background: #171004 url(../images/templatemo_footer.jpg) top repeat-x


İçerisinde Ankara yazacak div i sayfanın altına nasıl sabitlerim.Her zaman sayfanın altında kalacak
Genişletmek için tıkla ...
HTML: 
#templatemo_footer { 
   position:fixed;
   bottom:0;
   left:0;
   width:100%;
   height:35px;
Dener misiniz?
 
OnLT dedi ki:
HTML: 
#templatemo_footer { 
   position:fixed;
   bottom:0;
   left:0;
   width:100%;
   height:35px;
Dener misiniz?
Genişletmek için tıkla ...

Kodlar çalışmadı.Hocam anladığım kadarıyla siz sayfada mutlaka görülecek ve sayfa aşağı inse bile ekranda sabit kalacak şekılde düşündünüz.
Ben içerik eklendiğinde otomatik olarak aşağı inecek ve sayfanın altına yapışık şekilde görünmesini istiyorum
http://tinypic.com/view.php?pic=v48qki&s=6

ugurturhal dedi ki:
S.a

eğer yanlış anlamadıysam yapmak istediğini Çalışmalarım yazısının bulunduğu div' in height değeriyle oynayarak elde edebilirsin. Örnek olarak aşağıdaki kodlara göz atmanı tavsiye ederim..

<html>
<style>
.main{ width:100%; height:auto; margin:0px 0px 0px 0px; position:relative; }
.ust { width:100%; height:20%; background-color:#555; position:relative; }
.orta { width:100%; height:100%; background-color:#999; position:relative; }
.alt { width:100%; height:20%; background-color:#ccc; position:relative; }
h1 { margin:0px 0px 0px 0px; color:#900;}
</style>
<body>
<div class="main">
<div class="ust"><h1>Başlık</h1></div>
<div class="orta"><h1>Çalışmalar</h1></div>
<div class="alt"><h1>Alt Kısım</h1></div>
<div>
</body>
</html>


<!-- Burada ORTA adlı div'e vereceğin height değerine göre ALT isimli divi aşağı-yukarı kaydırabilirsin.. Düşük % değeri verirsen ALT div'i yukarı kayar. Yüksek değer verirsen aşağıya kayar. // -->


Umarım yapmak istediğini doğru anlamışımdır..
Kolay gelsin..
Genişletmek için tıkla ...

Ben Css ile Footer kısmını aşağı sabitlemeyi yapaıyorum.Footer kısmının sayfanın en altında sabit durmasını istiyorum.Sayfanın altına indiğim zaman görünsün.Sayfadaki içeriği silince Footer kısmı sayfanın ortasına kayıyor ve tasarım berbat duruyor. sorun şu http://tinypic.com/view.php?pic=v48qki&s=6

ugurturhal dedi ki:
S.a

eğer yanlış anlamadıysam yapmak istediğini Çalışmalarım yazısının bulunduğu div' in height değeriyle oynayarak elde edebilirsin. Örnek olarak aşağıdaki kodlara göz atmanı tavsiye ederim..

<html>
<style>
.main{ width:100%; height:auto; margin:0px 0px 0px 0px; position:relative; }
.ust { width:100%; height:20%; background-color:#555; position:relative; }
.orta { width:100%; height:100%; background-color:#999; position:relative; }
.alt { width:100%; height:20%; background-color:#ccc; position:relative; }
h1 { margin:0px 0px 0px 0px; color:#900;}
</style>
<body>
<div class="main">
<div class="ust"><h1>Başlık</h1></div>
<div class="orta"><h1>Çalışmalar</h1></div>
<div class="alt"><h1>Alt Kısım</h1></div>
<div>
</body>
</html>


<!-- Burada ORTA adlı div'e vereceğin height değerine göre ALT isimli divi aşağı-yukarı kaydırabilirsin.. Düşük % değeri verirsen ALT div'i yukarı kayar. Yüksek değer verirsen aşağıya kayar. // -->


Umarım yapmak istediğini doğru anlamışımdır..
Kolay gelsin..
Genişletmek için tıkla ...

Ben Css ile Footer kısmını aşağı sabitlemeyi yapaıyorum.Footer kısmının sayfanın en altında sabit durmasını istiyorum.Sayfanın altına indiğim zaman görünsün.Sayfadaki içeriği silince Footer kısmı sayfanın ortasına kayıyor ve tasarım berbat duruyor. sorun şu http://tinypic.com/view.php?pic=v48qki&s=6
 
o halde footer' dan önce bulunan div' in min-height değerini ata. Böylece Height değeri büyüyecek ancak küçülmeyecektir. Örnek olarak footer' dan önceki div wrapper ise;

height:900px;
min-height:700px;

değerlerini atarsan, içerik olsada olmasada wrapper sayfada bir yer kaplayacağından footer sayfanın altında görünecektir. Aklıma farklı yöntemler geliyor ancak ozaman da tasarımın dışına çıkar ve ileride yapacağın kodlamalarda sıkıntı yaşayabilirsin.

(Örnek olarak footer divini tüm sayfanın bağlı olduğu main div'in dışına çıkar. Main div' i kapattıktan sonra footer'ı yerleştir. Ozaman main div boyutuna göre footer en altta kalacaktır)
 
OnLT dedi ki:
HTML: 
#templatemo_footer { 
   position:fixed;
   bottom:0;
   left:0;
   width:100%;
   height:35px;
Dener misiniz?
Genişletmek için tıkla ...

Öncelikle tşk ederim.Tekrar kontrol ettim ama kod çalışıyor ama beni yanlış anlamışsın.

Ben sayfa sonunda görunmesini istiyorum footeri yani içeriğin altında sabit kalmasını, içeriği silince üste çıkmasın

OnLT dedi ki:
HTML: 
#templatemo_footer { 
   position:fixed;
   bottom:0;
   left:0;
   width:100%;
   height:35px;
Dener misiniz?
Genişletmek için tıkla ...

Öncelikle tşk ederim.Tekrar kontrol ettim ama kod çalışıyor ama beni yanlış anlamışsın.

Ben sayfa sonunda görunmesini istiyorum footeri yani içeriğin altında sabit kalmasını, içeriği silince üste çıkmasın

Biraz daha açıklayıcı olur musun? Yazdığım css kodları üzerinden yazabilirsen çok sevinirim ? İlgilendiğin için çok tşk ederim

ugurturhal dedi ki:
o halde footer' dan önce bulunan div' in min-height değerini ata. Böylece Height değeri büyüyecek ancak küçülmeyecektir. Örnek olarak footer' dan önceki div wrapper ise;

height:900px;
min-height:700px;

değerlerini atarsan, içerik olsada olmasada wrapper sayfada bir yer kaplayacağından footer sayfanın altında görünecektir. Aklıma farklı yöntemler geliyor ancak ozaman da tasarımın dışına çıkar ve ileride yapacağın kodlamalarda sıkıntı yaşayabilirsin.

(Örnek olarak footer divini tüm sayfanın bağlı olduğu main div'in dışına çıkar. Main div' i kapattıktan sonra footer'ı yerleştir. Ozaman main div boyutuna göre footer en altta kalacaktır)
Genişletmek için tıkla ...


Biraz daha açıklayıcı olur musun?Verdiğm css kodları üzzerinden ekleme veya çıkarma olarak gösterebilir misin? Tşk ederim ilgilendğin için

ugurturhal dedi ki:
o halde footer' dan önce bulunan div' in min-height değerini ata. Böylece Height değeri büyüyecek ancak küçülmeyecektir. Örnek olarak footer' dan önceki div wrapper ise;

height:900px;
min-height:700px;

değerlerini atarsan, içerik olsada olmasada wrapper sayfada bir yer kaplayacağından footer sayfanın altında görünecektir. Aklıma farklı yöntemler geliyor ancak ozaman da tasarımın dışına çıkar ve ileride yapacağın kodlamalarda sıkıntı yaşayabilirsin.

(Örnek olarak footer divini tüm sayfanın bağlı olduğu main div'in dışına çıkar. Main div' i kapattıktan sonra footer'ı yerleştir. Ozaman main div boyutuna göre footer en altta kalacaktır)
Genişletmek için tıkla ...


Biraz daha açıklayıcı olur musun?Verdiğm css kodları üzzerinden ekleme veya çıkarma olarak gösterebilir misin? Tşk ederim ilgilendğin için
 
Senin için sakıncası yoksa kodlarını (css ve 1 sayfa) upload edebilirsen daha iyi yardımcı olabilirim belki. Verdiğin kodlardan yardımcı olmam çok zor.
 
Arkadaşın dediği gibi sayfayı tamamen yüklersen daha iyi olur.
 
kodun düzeltilmiş hali linktedir. Ayrıca yapılan düzenlemeyi aşağıya da yazdım...

http://www.mediafire.com/download.php?8sdcrdgs9gr2tgb

#templatemo_outer_wrapper {
width: 100%;
height: auto; //
min-height:700px; //
background: url(../images/templatemo_body.jpg) center top no-repeat;
}


sadece // koyduğum kodları ekledim. Burada yaptığımız olay şu:


min-height:700px; ile div içerisinde veri olsa da olmasa da en az 700 pixellik bir alan kaplamasını sağladık. Böylece altında kalan footer div'i sayfanın altına kaydırdık. Ayrıca height:auto; kullanarak da footer divinin üzerindeki kısmın, içeriğe göre dinamik olarak değişmesini sağladık.


Umarım yardımcı olabilmişimdir..
Kolay gelsin.
 
internette sticky footer olarak aradığınızda çözüme ulaşabilirsiniz.
 
Cevap yazmak için kayıt ol veya giriş yap

Benzer konular

xacn
Öneri Sizler için yaptığım bio sitesi teması
Cevaplar
0
Görüntüleme
883
xacn
xacn
benkruz
Elementor’da Hotspot Oluşturma | Flip Box + CSS Anlatım
Cevaplar
0
Görüntüleme
819
benkruz
benkruz
A
  • Soru Soru
Soru arkadaşkar kendimi geliştirmek için bir proje konu hakkında yardımcı olursanız sevinirim
Cevaplar
2
Görüntüleme
1K
ardakrn52
A
sharp44
Yardım Margin çalışmıyor
Cevaplar
2
Görüntüleme
1K
sharp44
sharp44
M
Yardım CSS | Footer Kısmı Yatay Olması Gerekirken Dikey Oluyor
Cevaplar
0
Görüntüleme
1K
meterobben
M

Son mesajlar

Üst