Lupa ga bawa buku - CSS dasar

Mei 24, 2012

Aryan.ngrambe.net - Ceritanya lagi dikampus, lupa ga bawa buku, yaudah lah selagi ada PC yang terkoneksi, daripada ga ada bekas sama sekali mending saya catat disini ajalah, sapa tau aja ada yang butuh juga :D hehe...

Display

display : none, block, inline

visibility : hidden, visible

Position

static
normal / default

relative
sama dengan static tapi dipengaruhi elemen disekitarnya.

absolute
tidak dipengaruhi elemen sekitarnya

fixed
sama dengan absolute tapi ketika discroll tidak berpindah alias selalu berada di tempat yang sama

Align

top

bottom

left

right

End.

Nambah script Dewe Goro-goro virus yang bersemayam di PC LAB Kampus.

Contoh CSSnya :

#tdktampil{
display:none;
}
#sembunyi{
visibility:hidden;
}
#tampak{
visibility:visible;
}
#staticku{
position:static;
width:100px;
height:100px;
background-color:#ffff33;
top:0px;
left:0px;
}
#absoluteku{
position:absolute;
width:200px;
height:200px;
background-color:#ff0000;
top:400px;
left:400px;
}
#fixedku{
position:fixed;
width:150px;
height:50px;
background-color:#ffff33;
top:0px;
right:0px;
}

HTMLnya :

<html>
<head>
<title>Sinau position</title>
<link rel="stylesheet" type="text/css" href="ku.css">
</head>
<body>
<div id="tdktampil">Menghilang</div>
<div id="sembunyi">Petak umpet</div>
<div id="tampak">Badala</div>
<div id="staticku">Oki???</div>
<div id="absoluteku">Oku????</div>
<div id="fixedku">Woakakakak</div>
</body>
</html>

Silahkan di olak alik sendiri... wkwkwk