Css Aşağı Sabitleme

lavbali31.07.201216 cevap32.475 görüntüleme

2012'den beri50 mesaj

#1
31.07.2012 18:08

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

Cevaplar

ugurturhal

2010'den beri194 mesaj

#2
31.07.2012 18:18

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.

lavbali Konuyu açan

2012'den beri50 mesaj

#3
31.07.2012 18:27

ugurturhal dedi: ↑
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.

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 ?

lavbali Konuyu açan

2012'den beri50 mesaj

#4
31.07.2012 19:40

Nasıl olacak o işlem anlatır mısınız ayrıntılı olarak

ugurturhal

2010'den beri194 mesaj

#5
01.08.2012 12:01

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>



Umarım yapmak istediğini doğru anlamışımdır..
Kolay gelsin..

OnLT

2008'den beri8.427 mesaj

#6
01.08.2012 12:10

lavbali dedi: ↑
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


#templatemo_footer { 
   position:fixed;
   bottom:0;
   left:0;
   width:100%;
   height:35px;

Dener misiniz?

lavbali Konuyu açan

2012'den beri50 mesaj

#7
01.08.2012 16:02

OnLT dedi: ↑


#templatemo_footer { 
   position:fixed;
   bottom:0;
   left:0;
   width:100%;
   height:35px;

Dener misiniz?

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: ↑
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>



Umarım yapmak istediğini doğru anlamışımdır..
Kolay gelsin..

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: ↑
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>



Umarım yapmak istediğini doğru anlamışımdır..
Kolay gelsin..

ugurturhal

2010'den beri194 mesaj

#8
01.08.2012 16:39

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)

lavbali Konuyu açan

2012'den beri50 mesaj

#9
01.08.2012 17:50

OnLT dedi: ↑


#templatemo_footer { 
   position:fixed;
   bottom:0;
   left:0;
   width:100%;
   height:35px;

Dener misiniz?

OnLT dedi: ↑


#templatemo_footer { 
   position:fixed;
   bottom:0;
   left:0;
   width:100%;
   height:35px;

Dener misiniz?

Ö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: ↑
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)

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: ↑
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)

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

2010'den beri194 mesaj

#10
01.08.2012 19:18

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

2008'den beri8.427 mesaj

#11
01.08.2012 20:27

Arkadaşın dediği gibi sayfayı tamamen yüklersen daha iyi olur.

lavbali Konuyu açan

2012'den beri50 mesaj

#12
01.08.2012 23:00

Hayır sorun değil.

https://hotfile.com/dl/165234680/3ceb4b7/htmlcss.rar.html

Uğraştırdım sizleride düşüncem olur veya olmaz teşekkür ederim hepinize uğraşmanız yeter benim için

ugurturhal

2010'den beri194 mesaj

#13
01.08.2012 23:28

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.

Okan Uslu

2011'den beri36 mesaj

#14
01.08.2012 23:30

ugurturhal benimde işime yaradı saolasın :)

ugurturhal

2010'den beri194 mesaj

#15
01.08.2012 23:32

Rica ederim, işinize yaramasına sevindim.

lavbali Konuyu açan

2012'den beri50 mesaj

#16
01.08.2012 23:47

Eline Sağılık

Misafir

#17
06.08.2013 18:50

internette sticky footer olarak aradığınızda çözüme ulaşabilirsiniz.

Cevabını yaz

Cevap yazmak için giriş yap ya da üye ol. Eski forum kullanıcı adın ve parolanla girebilirsin.