CSS div bottom problemi?

09-04-2010, 18:45:03

Merhaba arkadaşlar, bu sorun üzerinde forumu aradım ama bulamadım. Önceden açılmış bir konu ise özür dilerim.

aşağıdaki kodlamada;

<div style="width:100%; height:300px; background-color:#00FF00; top:0;"></div>

<div style="width:100%; height:200px; background-color:#FF0000; bottom:0; "></div>

şeklinde belirttim.

sonuç ilk resimdeki gibi;

Resim-1:

Sonra:
DIV-2'ye position:absolute; ekledim. Sonra sonuç aşağıdaki gibi;

Resim-2:

Şimdi internet tarayıcısını alt taraftan biraz sıkıştırdığımda ise "DIV-2" "DIV-1" in üstüne çıkmış gözüküyor.
Resim-3:

Bunu yapmamdaki amaç her tarayıcıda ve her çözünürlükteki ekranda bakılırken; alt tarafta kalacak bir bölüm oluşturmak.

Yani DIV-1 ile DIV-2 tarayıcımda position:absolute ile normal gözükürken; (bknz resim2) arada çıkan ARA BOŞLUK resim-3 deki gibi çektiğim zaman tamamen kapanmalı ancak div-1in üstüne çıkmamalı ve yan tarafta doğal olarak scroll gözükmeli. İkisine de aynı z-index değerini verdiğimde de yine aynı sorunla karşılaşıyorum.

Teşekkürler...

11-04-2010, 16:46:35

#2

~~JustGo~~

Üyeliği durduruldu

Absolute derdine derman olmaz. Fixed kullanmayı dene bu kounda. Ayrıca ie için fix gerektirir bu yaptığın.

11-04-2010, 19:18:50

#3

esattuncer

<body>

<div style="top:0px; width:100%; background-color:#333333; height:150px; position:fixed;"></div>

<div style="bottom:0px; width:100%; background-color:#66CCFF; height:300px; position:fixed;"></div>
</body>

yine div-2; div-1 in üstüne cıkıyor

11-04-2010, 19:19:30

#4

~~JustGo~~

Üyeliği durduruldu

Bak bi örnek hazırladım ie6 hariç istediğini elde edersin kaynak kodları incelemen yeterli. IE6 çok sorun diyorsan buradan.

11-04-2010, 19:38:23

#5

Kapitan

<div id="birinci" style="float: left ; width: 700px>falan</div>
<div id="ikinci" style="float: left ; width: 700px>filan</div>

bu sekilde cozersin illede position vermene gerek yok

11-04-2010, 19:49:10

#6

esattuncer

evet tam olarak yapmak istedigim buydu;

çok teşekkürler JustGo +REP

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
<title>Position Fixed</title>
<style type="text/css">
* { margin:0; padding: 0; }
#wrapper { margin: 0 auto; width: 980px; }
.content { padding: 10px; color: white; background: fuchsia; border-bottom: 5px solid gray; }
.content p { margin: 5px 0; }
#fixedlayer { position: fixed; bottom: 0; padding: 15px; background: white; width: 950px; border-top: 3px solid blue; text-align: center; z-index:100; }
#fixedtop { position: fixed; top: 0; padding: 15px; background: white; width: 950px; border-top: 3px solid red; border-bottom: 3px solid red; text-align: center; z-index:999; }

</style>
</head>
<body>
<div id="wrapper">
<div id="fixedtop">
<h3>Lorem ipsum dolor sit amet</h3>
</div>
<div class="content">
<h1><em>Im title.</em></h1>

<p><strong>Im description, say hello.</strong></p>
<p>Lorem ipsum dolor sit amet...

... nulla vel massa bibendum a viverra diam pellentesque. Vestibulum pellentesque aliquet porttitor.</p>
</div>

<div id="fixedlayer"><h3>Im fixed, im happy.</h3></div>

</div>
</body>
</html>

11-04-2010, 19:54:11

#7

~~JustGo~~

Üyeliği durduruldu

Sorunun çözüldüyse ne mutlu