Div Üzeri Div Bindirme Sorunu ;

airweb

Yukarıdaki resimden de anlaşıldığı gibi, div leri üst üste nasıl bindirilebilir.
z-index ve position özellikleri ekledim ve denedim. Olmadı.

yagmayok · 16 Ocak 2011

CSS kodlarını paylaşabilir misiniz ?

Angelo · 16 Ocak 2011

Menu divine relative position, top -100px, left 100px, zindex 2 verirseniz olur gibi.

yagmayok · 16 Ocak 2011

position: absolute; left: 199px; top: 40px;

gibi bir uygulamada yeterli olabilir.

Kodları görebilseydik daha güzel olurdu.

airweb · 16 Ocak 2011

Css ve html kodlarına bilerek konu içinde yer vermedim.
Acaba siz nasıl bir css kod kurgulardınız ?
Örnekleyebilecek arkadaşların kodlarını görmek isterim.

yagmayok · 16 Ocak 2011

O zaman şuaradaki makale işinizi görecektir.
En iyi anlatım burada yer almaktadır.
http://www.fatihhayrioglu.com/z-index/

airweb · 16 Ocak 2011

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Div Üzerine Div Bindirme</title>
<style>

#flash { margin:auto; width:600px; height:200px; border:1px solid #e1e1e1; background:#FF00FF; }

#menu { margin:auto; width:300px; height:80px; border:1px solid #e1e1e1; background:#000; }

</style>
</head>

<body>

<div id="flash"> </div>

<div id="menu"> </div>

</body>
</html>

Teşekkürler. Makaleyi incelemiştim, yagmayok.

airweb · 16 Ocak 2011

Angelo' Alıntı:
Menu divine relative position, top -100px, left 100px, zindex 2 verirseniz olur gibi.

Dediğiniz gibi oldu, teşekkürler.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Div Üzerine Div Bindirme</title>
<style>
#header { margin:auto; width:800px; height:500px; border:1px solid #e1e1e1; background:#CCCCCC; }
#flash { margin:auto; width:600px; height:200px; border:1px solid #e1e1e1; background:#FF00FF; }
#menu { margin:auto; width:300px; height:80px; border:1px solid #e1e1e1; background:#000; position:relative; top:-50px; left:15px; z-index:2; }
</style>
</head>
<body>
<div id="header">
<div id="flash"> </div>
<div id="menu"> </div>
</div>
</body>
</html>