私のコードを見て、私のフッターを手伝ってください。考えられることはすべて試しましたが、フッターを一番下に置くことはできません。一番下にとどまると、ウィンドウのサイズが変更されたときに上のコンテンツと重なります。ここでのアイデアは、フッターをコンテンツの下のページの下部に残し、ウィンドウのサイズを変更したりズームしたりしても移動しないようにすることです。
HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Sgembardesign.com</title>
<!-----CSS Library----->
<link href="assets/CSS/style sheet.css" rel="stylesheet">
<!----- Java Script Library ----->
<script src="assets/js/jquery.js"></script>
<script src="assets/js/my_code.js"></script>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-
ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js">
</script>
<style type="text/css">
</style>
</head>
<body>
<div class="wrapper">
<div id="menu_bar">
<div id="menu_li">
<ul>
<li><a href="index.html">home</a></li>
<li><a href="about.html">about</a></li>
<li><a href="projects.html">projects</a></li>
<li><a href="blog.html">blog</a></li>
</ul>
</div>
</div>
<hr noshade size="3">
<div id="catalogs">
<div id="web">
</div>
<div id="photo">
</div>
<div id="mobile">
</div>
</div>
<div class="push"></div>
<div class="footer">
<img class="img" src="assets/img/logo.gif" alt="logo" width="500" height="300"/>
</div>
</div>
</body>
</html>
**The CSS**
*
{
margin: 0;
}
body
{
height: 100%;
background-image: url("../img/dark-metal-grid-5.jpg");
}
html
{
height: 100%;
}
.wrapper
{
width: 950px;
min-width: 950px;
min-height: 100%;
height: auto;
height: 100%;
margin: 0 auto -142px;
border-bottom: 3px solid white;
sbackground:rgb(0,0,0); /* IE6/7/8 */
filter:alpha(opacity=60); /* IE6/7/8 */
background:rgba(0,0,0,0.6); /* Modern Browsers */
}
/*--------------menu items--------------*/
#menu_bar
{
width: 725px;
height: 95px;
float: left;
position: absolute;
padding: 4em;
}
a
{
color: white;
text-decoration: none;
position: relative;
left:95px;
}
ul
{
list-style-type: none;
}
li
{
display: inline;
margin-left: 20px;
}
#menu_li
{
font-size: 45px;
font-family: Impact, Charcoal, sans-serif;
line-height: 32px;
}
#menu_bar a:hover
{
text-decoration: none;
color: #C50F0F;
}
/*---------------hr------------------*/
hr
{
width: 950px;
color: #C50F0F;
background-color: #c50f0f;
position: absolute;
top: 105px;
border-width: 0;
line-height: 0;
height: 2px;
text-align: center;
}
/*---------------Catalogs-----------*/
#catalogs
{
text-align: center;
position: relative;
}
#web
{
width: 250px;
height:225px;
position:absolute;
top:200px;
overflow: hidden;
float: left;
left:40px;
background-color: #C50F0F;
background:rgba(255,0,0,0.4);
border-bottom-right-radius: 25px;
border-top-right-radius: 25px;
border-bottom-left-radius: 25px;
border-top-left-radius: 25px;
border: solid 3px black;
}
#photo
{
width: 250px;
height: 225px;
top: 200px;
position: absolute;
overflow: hidden;
display: inline;
border-bottom-left-radius: 25px;
border-bottom-right-radius: 25px;
border-top-left-radius: 25px;
border-top-right-radius: 25px;
background-color: #C50F0F;
background:rgba(255,0,0,0.4);
left: 37%;
border: solid 3px black;
}
#mobile
{
width: 250px;
height:225px;
position:relative;
top:200px;
overflow: hidden;
float: right;
right:40px;
background-color: #C50F0F;
background:rgba(255,0,0,0.4);
border-bottom-right-radius: 25px;
border-top-right-radius: 25px;
border-bottom-left-radius: 25px;
border-top-left-radius: 25px;
border: solid 3px black;
}
.push
{
height: 142px;
}
.footer
{
width: 950px;
height: 142px;
margin-top: -142px;
clear: both;
bottom: 0px;
sbackground:rgb(0,0,0); /* IE6/7/8 */
filter:alpha(opacity=60); /* IE6/7/8 */
background:rgba(0,0,0,0.6); /* Modern Browsers */
}
.img
{
position: relative;
top: -75px;
left: -75px;
}