Archive for January, 2012
Design page layout using CSS
Page layout and CSS code
Before you proceed, it’s useful to have an idea about page’s sections. I suggest to use this layout (2 column fixed size):
/* ------------------------------
PAGE STRUCTURE
------------------------------ */
/*
#container has an absolute width (780 pixel)
The width of inner elements is set to auto,
in this way all inner elements have the same
width of the element which contains them
*/
#container{width:780px; margin:0 auto;}
#topbar{width:auto; display:block; height:80px;}
#navbar{width:auto; display:block; height:24px;}
#main{width:auto; display:block;}
#column_left{width:560px; margin-right:20px; float:left;}
#column_right{width:200px; float:left;}
/*
div.spacer, solve an issue with #container height
in css 2 column layout.
*/
div.spacer{clear:both; height:10px; display:block;}
#footer{width:auto; display:block; height:24px;}
Source: http://woork.blogspot.com
Footer CSS Bottom Alignment
terkadang kita menginkinkan suatu footer div, dimana harus selau berada di layar browser, di berapapun ukuran layar dan resolusi nya. berikut ini dalah contih mudahnya untuk css tersebut:
#footer{
height:34px;
position:fixed;
bottom:0px;
z-index:1;
float:left;
background:#000;
}
keterangan:
position:fixed; bottom:0px; z-index:1;
ke tiga elemen tersebut adalah yg terpenting
CSS 100% Height Div
the body CSS:
body {
margin:0;
padding:0;
height:100%; /* this is the key! */
}
100% Height Div CSS
#fullHeight{
position:absolute;/* this is the key too! */
left:0;
top:0;
padding:0;
width:200px;
height:100%; /* works only if parent container is assigned a height value */
color:#333;
background:#eaeaea;
border:1px solid #333;
}
Html Example:
<body> <div id="fullHeight"> This design uses a defined body height of 100% which allows setting the contained left and right divs at 100% height.</p> </div> </body>
note: the 100% height div only works if parent container is assigned a height value (ex. 100%)
-
You are currently browsing the archives for January, 2012
Visitor
design, web & css 