Div Katmanı Ve Css Sorunsalı?

Osmanosaman · 12 Temmuz 2010

Arkadaslar benim 3 katmanım var header footer content diyelim ben bu header alanının üstte tabiki footer alanının alta yapışmasını istiyorum content alanında dinamik olarak büyüyüp küçülebilcek nasıl üstesinden gelebilirim...

kaberdey · 12 Temmuz 2010

HTML:

<html>

<head>
<meta http-*****="Content-Type" **********text/html; charset=windows-1254">
<title>Yeni Sayfa 1</title>
<style type="text/css">
#container{width:1000px;}
#header {float:left; width:1000px; height:120px; border:1px solid; font-size:30pt; text-align:center; font-weight:bold;}
#content {float:left; width:1000px; border:1px solid;}
#footer {float:left; width:1000px; height:120px; border:1px solid; font-size:20pt; text-align:center; font-weight:bold;}

</style>
</head>

<body>
<div id="container">
    <div id="header">BURASI HEADER</div>
    <div id="content">BURASI ORTA İÇERİK</div>
    <div id="footer">BURASI FOOTER</div>
</div>
</body>

</html>

ERL · 12 Temmuz 2010

Bu footer alta yapışmaz.

Osmanosaman · 12 Temmuz 2010

@kaderbey dostum senin yöntemin malesef işe yaramıyo Firefox 3.6 da denedim...

HapS · 12 Temmuz 2010

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-*****="Content-Type" **********text/html; charset=UTF-8" />
<title>yapışan footer</title>
<style type="text/css">
* {/* for demo only*/
margin:0;
padding:0
}
html, body {
height:100%;/* needed to base 100% height on something known*/
text-align:center;
}
#outer {
width:760px;
background:#ffffcc;
margin:auto;
min-height:100%;
margin-top:-40px;/*footer height - this drags the outer 40px up through the top of the monitor */
text-align:left;
}
* html #outer {
height:100%
}
#header {
background:red;
border-top:40px solid #fff; /* soak up negative margin and allows header to start at top of page*/
}
#footer {/* footer now sits at bottom of window*/
background:red;
width:760px;
margin:auto;
height:40px;/* must match negative margin of #outer */
clear:both;
}
/*Opera Fix*/
body:before {/* thanks to Maleika (Kohoutec)*/
content:"";
height:100%;
float:left;
width:0;
margin-top:-32767px;/* thank you Erik J - negate effect of float*/
}
h1, h2, p {
padding:0 10px;
}
#outer:after {/* thank you Erik J - instead of using display table for ie8*/
clear:both;
display:block;
height:1%;
content:" ";
}
</style>
</head>
<body>
<div id="outer">
<div id="header">
<h1>Yapışan Footer</h1>
</div>
<h2>bön kaplümbö terbiyecisiyööm</h2>
<p>AArkadaslar benim 3 katmanım var header footer content diyelim ben bu header alanının üstte tabiki footer alanının alta yapışmasını istiyorum content alanında dinamik olarak büyüyüp küçülebilcek nasıl üstesinden gelebilirim...</p>
</div>
<div id="footer">
<p>Yapşmış footer</p>
</div>
</body>
</html>

bana ait değil ama işini görür saniyorum

ERL · 12 Temmuz 2010

Footer ın alta yapışması için

position:absolute; bottom:0%; left:0%; width:100%; height:100px;

Header in üste yapışması için

position:absolute; top:0%; left:0%; width:100%; height:100px;

height degerlerini istediğiniz şekilde değiştirebilirsiniz.

İçerik alanı icin

position:absolute; top:0%; left:0%; width:100%; height:100px; padding-bottom:110px; padding-top:110px;

Bu arada "sorunsal" ne demek onuda açıklarsanız sevinirim.

kaberdey · 12 Temmuz 2010

yapışmaktan kastınız nedir?
benim verdiğim kod content'in hemen altına footer'ı ekler ve content içeriğe göre uzayabilir.

eğer kastınız sürekli footer'ın sabit kalması ise benimki işe yaramayacaktır.
NOT:içerik uzadığı zaman Haps'ın verdiği örnekte de footer sabit kalmaz

ilkayaltay06 · 20 Mayıs 2016

kaberdey dedi ki:
yapışmaktan kastınız nedir?
benim verdiğim kod content'in hemen altına footer'ı ekler ve content içeriğe göre uzayabilir.

eğer kastınız sürekli footer'ın sabit kalması ise benimki işe yaramayacaktır.
NOT:içerik uzadığı zaman Haps'ın verdiği örnekte de footer sabit kalmaz

şimdi bilen bilmeyen zıplamış soru net bir şekilde sorulduğu halde cevaplar aniden türemiş önce bir soruyu inceleyelim isterseniz

arkadaş demişki alta yapışmasını istiyorum footerı yani bizim divler zaten boyut olarak ekrana sığmadıkca alt alta binecek bu arkadaş footer için senin gösterdiğin olayı neden sorsun orjinalde böyle zaten olay clear: both; yaz bi css koduyla alt alta çak gitsin ama bu arkadaş footeri alta yapıştırcak yani navbar ve body içerik kısmı nerde nekadarsa farketmez arada ne olursa olsun olmasın footer altta yapışmalı ozman

dostum anlatıyım hala sorun için girenler varsa tabi ölüyü dirilttik burda ama yinede googleye yazıp girenler vardır soruyu çözelim herkez aydınlansın bu site üzerinden

divleri alt alta atmak için css kodu ile

#footer {
clear:both;
}

------bu div ne olursa olsun boyutunu 5px de yapsan koyduğun konumda body içinden başka bir şeyin içinde değilse hemen altına yapışır.

divleri ekranda sabit tutmak için ise

divimize footer idsini verdiğimizi varsayarak css ile

#footer {
width: 100%;
height: 100px;
background: red;
position: fixed;
bottom:0;
left: 0;
z-index:100;
}

width ile genişliği tam sayfaya yaydık height ile 100 piksellik bir uzunluk belirledik bunları footerınızın ayarlamaları için değiştirebilirsiniz arkaplanıda kırmızı yaptık belli olsun diye şimdi position fixed ile sabitlediğimiz divin nerde sabit kalacağını ayarlamak içinde bottom yani tabandan 0piksel yukarı doğru olsun dedik left soldanda 0 olsun dedik yani divin konumu en alt en soldan başlayacaktır fixedlede sabitledik orda kal diye z indeks100 ilede en üstte olmasını sağladık olay bukadar üste alıcaksak aynı kodların bottom bölümünü top yaparsanız olay çözülmüş olur sağa sola içinde left 0 yada right 0 ilede düzenlemerinizi yapabilirsiniz. hala işe yarıyorsa iyi çalışmalar herkeze

Div Katmanı Ve Css Sorunsalı?

Osmanosaman

Öğrenci

kaberdey

Profesör

ERL

Asistan

Osmanosaman

Öğrenci

HapS

Müdavim

ERL

Asistan

kaberdey

Profesör

ilkayaltay06

Öğrenci

Benzer konular

SDN Haberleri

Son mesajlar

Forum istatistikleri

Sosyal ağlar