Mart 1005

Statik Div

Statik Div ne işe yarar? Sayfanızın içinde öyle bir menünüz olsun ki, sayfanın neresine giderseniz gidin, o menünün görünmesini istiyorsunuz. İlla menü olmak zorunda değil, herhangi bir veri yada bağlantı da olabilir. İşte bu isteğinizi statik div karşılıyor. Örnek; sol tarafta yer alan sosyal ağ bağlantılarım sayfanın neresine giderseniz gidin, hep sizle birlikte gelmekte. Ben bu işlem için style.css dosyasına internette dolaşırken bulduğum kodları koydum: html, body { margin:0; padding:0; height:100%; } .layout { position:relative; margin: 0 auto; border:solid 1px #000000; border-bottom:0; border-top:0; width:762px; min-height:100%; } .statictopbar { font-family: "Century Gothic"; font-size: 12px; color: #999999; height: 30px; border:solid 0px #000000; width:150px; position: fixed; top:0; left:50%; margin-left:-600px; } .csharpcode, .csharpcode pre { font-size: small; color: black; font-family: consolas, "Courier New", courier, monospace; background-color: #ffffff; /*white-space: pre;*/ } .csharpcode pre { margin: 0em; } .csharpcode .rem { color: #008000; } .csharpcode .kwrd { color: #0000ff; } .csharpcode .str { color: #006080; } .csharpcode .op { color: #0000c0; } .csharpcode .preproc { color: #cc6633; } .csharpcode .asp { background-color: #ffff00; } .csharpcode .html { color: #800000; } .csharpcode .attr { color: #ff0000; } .csharpcode .alt { background-color: #f4f4f4; width: 100%; margin: 0em; } .csharpcode .lnum { color: #606060; } Zaten burda işlem bitti sayılır. Sadece bu yeni css sınıfını kullanmak kaldı. Onu da şu şekilde kullanabilirsiniz: <div class="statictopbar"> <a id="twitter" href="http://twitter.com/makcura" title="Twitter"> <img src="http://www.makcura.com/pics/twitter.png" width="30" height="30" style="opacity: 0.4; filter: alpha(opacity=40)" onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100" onmouseout="this.style.opacity=0.4;this.filters.alpha.opacity=40" alt="twitter" /></a> </div> Bu div’i body içinde herhangi bir yere koyabiliriz. Hiçbir sorun çıkmayacaktır. .csharpcode, .csharpcode pre { font-size: small; color: black; font-family: consolas, "Courier New", courier, monospace; background-color: #ffffff; /*white-space: pre;*/ } .csharpcode pre { margin: 0em; } .csharpcode .rem { color: #008000; } .csharpcode .kwrd { color: #0000ff; } .csharpcode .str { color: #006080; } .csharpcode .op { color: #0000c0; } .csharpcode .preproc { color: #cc6633; } .csharpcode .asp { background-color: #ffff00; } .csharpcode .html { color: #800000; } .csharpcode .attr { color: #ff0000; } .csharpcode .alt { background-color: #f4f4f4; width: 100%; margin: 0em; } .csharpcode .lnum { color: #606060; } Tags: | Categories: HTML