1 reply [Last post]
notice88
notice88's picture
Offline
newbie
San Pablo City Laguna
Last seen: 3 years 3 weeks ago
San Pablo City Laguna
Timezone: GMT+8
Joined: 2011-11-27
Posts: 1
Points: 2

Here is my CSS Code:

html,
body {
margin:0;
padding:0;
height:100%;
width:100%;
overflow-x:visible;
}
 
#container {
min-height:100%;
position:relative;
}
 
#header {
position:relative;
top:0;
width:100%;
height:75px; /* Height of the footer */
background: rgb(54,60,63); /* Old browsers */
background: -moz-linear-gradient(top, rgba(54,60,63,1) 0%, rgba(66,73,76,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(54,60,63,1)),
color-stop(100%,rgba(66,73,76,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(54,60,63,1) 0%,rgba(66,73,76,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(54,60,63,1) 0%,rgba(66,73,76,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(54,60,63,1) 0%,rgba(66,73,76,1) 100%); /* IE10+ */
background: linear-gradient(top, rgba(54,60,63,1) 0%,rgba(66,73,76,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradie… startColorstr='#363c3f', endColorstr='#42494c',GradientType=0 ); /* IE6-9 */
 
 
}
 
#header2 {
position:relative;
top:0;
width:100%;
height:2px; /* Height of the footer */
background:#999;
}
 
#header3{
position:relative;
top:0;
width:100%;
height:40px; /* Height of the footer */
background: rgb(80,87,90); /* Old browsers */
background: -moz-linear-gradient(top, rgba(80,87,90,1) 0%, rgba(92,100,103,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(80,87,90,1)), color-stop(100%,rgba(92,100,103,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(80,87,90,1) 0%,rgba(92,100,103,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(80,87,90,1) 0%,rgba(92,100,103,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(80,87,90,1) 0%,rgba(92,100,103,1) 100%); /* IE10+ */
background: linear-gradient(top, rgba(80,87,90,1) 0%,rgba(92,100,103,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradie… startColorstr='#50575a', endColorstr='#5c6467',GradientType=0 ); /* IE6-9 */
}
 
#content{
margin-left:auto;
margin-right:auto;
width:1324px;
position:relative;
padding:10px;
padding-bottom:99px; /* Height of the footer */
border:solid;
min-height:900px;
 
}
 
#navigation{
position:relative;
min-height:400px;
width:200px;
margin-left:0px;
margin-right:auto;
border:solid;
}
 
#userlogs {
position:relative;
min-height:200px;
width:200px;
margin-left:0px;
margin-right:auto;
top:20px;
border:solid;
}
 
#filter{
position:relative;
min-height:200px;
width:880px;
margin-left:auto;
margin-right:auto;
top:-612px;
border:solid;
}
#calendar{
position:relative;
min-height:200px;
width:200px;
margin-left:auto;
margin-right:0px;
top:-818px;
border:solid;
}
 
#quickgraph{
position:relative;
min-height:200px;
width:200px;
margin-left:auto;
margin-right:0px;
top:-800px;
border:solid;
}
 
#footer3 {
position:absolute;
bottom:49px;
width:100%;
height:50px; /* Height of the footer */
background:#434a4d;
}
 
#footer2{
position:absolute;
bottom:48px;
width:100%;
height:1px; /* Height of the footer */
background:#565d60;
}
 
#footer {
position:absolute;
bottom:0;
width:100%;
height:48px; /* Height of the footer */
background:#2b2f31;
}

Here is my HTML COde:

<html>
<head>
<title>Untitled Document</title>
<link href="../css/admin.css" rel="stylesheet" type="text/css">
</head>
 
<body>
 
<div id="container">
 
<div id="header"></div><!-- end header -->
<div id="header2"></div><!-- end header2 -->
<div id="header3"></div><!-- end header3 -->
 
<div id="content">
 
<div id="navigation">
NAVIGATION
</div><!-- end nav -->
 
<div id="userlogs">
USERS' LOGS
</div>
 
<div id="filter">
FILTER
</div>
 
<div id="calendar">
CALENDAR
</div>
 
<div id="quickgraph">
QUICK GRAPH
</div>
 
</div><!-- end content -->
 
<div id="footer3"></div><!-- end footer3 -->
<div id="footer2"></div><!-- end footer2 -->
<div id="footer"></div><!-- end footer -->
</div><!-- end container -->
</body>
</html>

i use div tags to make my footer and my header as my body background but.. it looks nice in normal and zoomed out view but when YOu zoomed in and scrolled to the right side of the page, my footer and header was cut, how will i handle that?

//mod edit: bbcodes added ~gt

balajidesign
balajidesign's picture
Offline
Enthusiast
Last seen: 1 year 9 weeks ago
Timezone: GMT+5.5
Joined: 2012-01-31
Posts: 116
Points: 124

use this

use this changes:

#content{
margin-left:auto;
margin-right:auto;
width:1002px;
position:relative;
padding:10px;
padding-bottom:99px; /* Height of the footer */
border:solid;
min-height:900px;
 
}
 
#navigation{
position:relative;
min-height:400px;
width:200px;
margin-left:0px;
margin-right:auto;
border:solid;
}
 
#userlogs {
position:relative;
min-height:200px;
width:200px;
margin-left:0px;
margin-right:auto;
top:20px;
border:solid;
}
 
#filter{
position:relative;
min-height:200px;
width:580px;
margin-left:auto;
margin-right:auto;
top:-612px;
border:solid;
}