Beranda > css > div position relative terhadap absolute

div position relative terhadap absolute

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”&gt;
<html xmlns=”http://www.w3.org/1999/xhtml”&gt;
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>div posisi</title>

<style>
body{
margin:0px auto;
width:500px;
background-color:red;
}
.wrapper{
padding:10px 10px 10px 10px;
border:1px solid #000;
background-color:#E9E9E9;
position:absolute;
width:500px;
}
.header{
border:1px solid #000;
background-color:#F6F;
position:absolute;
width:500px;
z-index:1;
}
.tengah{
position:relative;
border:1px solid #000;
width:250px;
margin-left:115px;
margin-top:10px;
z-index:10;
text-align:center;
background-color:#FF0;
}
.footer{
border:1px solid #000;
}
.cl{
clear:both;
}
</style>
</head>

<body>
<div class=”wrapper”>
<div class=”header”>
Hello i’am header
</div>

<div class=”tengah”>
I’am Content <br />
I’am Content <br />
I’am Content <br />
I’am Content <br />
I’am Content <br />

<div class=”cl”>&nbsp;</div>

<div class=”footer”>
Hello I’am footer
</div>
</div>

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

 

NB: Contoh ini bisa diliat di web http://www.praktekpsikolog.com

Kategori:css Tag:
  1. Belum ada komentar.
  1. No trackbacks yet.

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s

%d blogger menyukai ini: