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
 
U

ugurturhal

Asistan
Katılım
10 Mayıs 2010
Mesajlar
194
Reaksiyon puanı
1
Puanları
16
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.
 
L

lavbali

Öğrenci
Katılım
30 Temmuz 2012
Mesajlar
50
Reaksiyon puanı
0
Puanları
6
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 ?
 
L

lavbali

Öğrenci
Katılım
30 Temmuz 2012
Mesajlar
50
Reaksiyon puanı
0
Puanları
6
Nasıl olacak o işlem anlatır mısınız ayrıntılı olarak
 
U

ugurturhal

Asistan
Katılım
10 Mayıs 2010
Mesajlar
194
Reaksiyon puanı
1
Puanları
16
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..
 
OnLT

OnLT

Müdavim
Müdavim
Katılım
22 Ocak 2008
Mesajlar
8,427
Reaksiyon puanı
149
Puanları
1,243
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?
 
L

lavbali

Öğrenci
Katılım
30 Temmuz 2012
Mesajlar
50
Reaksiyon puanı
0
Puanları
6
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
 
U

ugurturhal

Asistan
Katılım
10 Mayıs 2010
Mesajlar
194
Reaksiyon puanı
1
Puanları
16
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)
 
L

lavbali

Öğrenci
Katılım
30 Temmuz 2012
Mesajlar
50
Reaksiyon puanı
0
Puanları
6
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
 
U

ugurturhal

Asistan
Katılım
10 Mayıs 2010
Mesajlar
194
Reaksiyon puanı
1
Puanları
16
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.
 
OnLT

OnLT

Müdavim
Müdavim
Katılım
22 Ocak 2008
Mesajlar
8,427
Reaksiyon puanı
149
Puanları
1,243
Arkadaşın dediği gibi sayfayı tamamen yüklersen daha iyi olur.
 
U

ugurturhal

Asistan
Katılım
10 Mayıs 2010
Mesajlar
194
Reaksiyon puanı
1
Puanları
16
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.
 
O

Okan Uslu

Öğrenci
Katılım
7 Mayıs 2011
Mesajlar
36
Reaksiyon puanı
1
Puanları
0
[MENTION=105244]ugurturhal[/MENTION] benimde işime yaradı saolasın :)
 
S

SDN Okuru

SDN Okuru
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
764
xacn
xacn
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
Gece baykuşu
Yardım Container Div Yükseklik Verince Flex Oln Divler Arası Boşluk Artması
Cevaplar
2
Görüntüleme
1K
Gece baykuşu
Gece baykuşu

SDN Haberleri

Son mesajlar

Üst