As I work on building my own website for showcasing my art portfolio, I came across a helpful resource at . However, I am facing some challenges when trying to incorporate an additional element into it.
The current HTML structure looks like this:
<html>
<head>
<link rel="stylesheet" href="style.css" ... />
<link rel="stylesheet" href="layout.css" ... />
</head>
<body>
<div class="wrapper">
<p>Your website content here.</p>
<div class="push"></div>
</div>
<div class="footer">
<p>Copyright (c) 2008</p>
<img src="image.png>
</div>
</body>
I am also using the following style.css:
.wrapper {
position: relative;
width: 800px;
margin: 0 auto -50px;
}
.footer {
position: relative;
width: 100%;
margin: 0 auto;
padding: 0;
background-color:#000000;
text-align:center;
}
.footer img {
position: relative;
width: 400px;
top: -238px;
margin: 0 auto;
}
.footer a {
color: #fff;
text-decoration: underline;
border: 0;
}
.footer p {
position: absolute;
left: 0;
bottom: 4px;
width: 100%;
padding: 0;
color: #fff;
font: 0.8em arial,sans-serif;
}
In addition, I have a layout.css file with the following code:
* {
margin: 0;
}
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -50px;
}
.footer {
height: 50px;
}
.push {
height: -100px;
}
While attempting to create a sticky footer design with an image that overlaps the main content when the window is resized, I encountered difficulty eliminating unwanted negative space caused by the existing code. Do you have any suggestions?
**Update: After overcoming the initial obstacle, I realized that the original sticky-footer tutorial created a fixed footer within the border of the main body. What I actually wanted was a top-layer fixed footer that extends over the main body and includes a bottom border element. By making adjustments in both the HTML and CSS, I found a solution:
<div class="footer">
<img src="Image.png" width="400" height="238" />
<div class="bottom-border">
<p>Copyright (c) 2008</p>
</div>
</div>
and updated CSS styling:
.footer img {
position: relative;
width: 400px;
margin: 0 auto;
}
.bottom {
position: relative;
width: 100%;
height: 20px;
margin: 0 auto 0;
padding: 0;
text-align:center;
background-color: #000000;
}
Following the guidelines proposed in the 'layout.css' comments included in the sticky-footer tutorial, I synchronized the heights of .wrapper, .footer, and .push elements accordingly.**