I'm facing an issue with the footer and header that is preventing me from properly positioning any content on the website

When attempting to include an h3 element on the website, it remains stuck at the top. I have tried using CSS properties like position, top, and left but it does not respond to them. Additionally, I experimented with a gallery template from w3schools to see if I could relocate the gallery, but unfortunately, I had no success in doing so. Despite conducting research on this issue, I was unable to find a solution. I apologize for the lengthy code provided.

<html>
<link rel="stylesheet"  href="sheet.css">
<head>
<title> Jon Barton </title> 
</head>
<header>
<ul class= "nav-men">
<li><a HREF="Gallery.html"> Gallery</a> </li>    
<li><a HREF= "JB.html">About me</a> </li>
<li><a HREF= "contractme.html"> Contact me</a></li>
</ul> 
<h1><span> Software Developer </span> </h1>
<p class = "kicker" >Ideas // Designer // Implementer </p>
</header>
<body>
<h3> Work</h3>
<footer>
<div class = "footer">
<div class ="content-wrap">
<ul>
<li><a href=  "Gallery.html "> </a></li>
<li><a href = "JB.html"> </a></li>
<li><a href= "contactme.html"> </a></li>
</ul>
<p class = "copyright"> All content copyright 2016</p>
</div>
</div>
</html>

Apologies for the extended CSS code as some of it may appear redundant.

#css 
header {
background: url(.//277H.jpg);
text-align: center;
width: 100%;
height: auto;
position: absolute;
}

.nav-men li {
display:inline;
margin-left: 100px;
}

.nav-men ul {
margin: 30px 30px 0px 0px;
padding: 0;
list-style-type: none;
text-align: center;
text-decoration: none;
}

.nav-men a {
color:white;
} 

.nav-men a:hover,
a:visited,
a:link,
a:active {
text-decoration: none;
}

h1 {
font-size: 60px;
color: white;
letter-spacing: 0.05em;
text-transform: uppercase;
text-align: center;
font-weight: 700;
margin-bottom: 20px;
}

span {
display: inline-block;
padding: 0.2em 0.6em;
border: white solid 10px;
}

.kicker {
text-align: center;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.5em;
color: white;
}

body {
margin: 0;
padding: 0;
height: 100%;
}

.alt-selection {
background: black;
}

.thumb-container {
max-width: 980px;
margin: 0px auto;
padding-bottom: 100px;
}

.thumb-unit {
display:block;
width: 25%;
height: 150px;
float:left;
}

.footer {
margin: 30px;
background: url(../277H.jpg);
width: 100%;
height: 100px;
clear: both;
bottom: -53px;
left:-30;
right:0;
position: absolute;
background-size: cover;
float: left;
}

.content-wrap {
float: left;
}

li {
display:inline;
margin-left: 100px;
}

ul {
margin: 30px 30px 0px 0px;
padding: 0;
list-style-type: none;
text-align: center;
text-decoration: none;
}

a {
color:white;
}

a:hover,
a:visited,
a:link,
a:active {
text-decoration: none;
}

Answer №1

The reason for this issue is the absolute positioning of the <header> and <footer>. When using position:absolute, an element is positioned relative to its nearest positioned ancestor instead of being positioned relative to the viewport, like fixed (source: here).

To resolve this problem, remove the position:absolute from the classes .header and .footer. This will allow you to place any content between them.

Answer №3

To improve your website layout, I suggest starting by organizing your HTML code so that the header and footer are enclosed within the body element. Make sure to close the body element properly to avoid potential issues in the future.

You can view an example of this structure here: https://jsfiddle.net/jowxoaca/1/

In addition, following jonju's advice to remove the position:absolute from the header and footer elements will help resolve any ordering problems you may be experiencing.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is it possible to determine the height of a div after it has been rendered using the .resize method?

In my current structure, <div id="A"> <div id="A1"> <div id="B1"></div> <div id="B2"></div> </div> <div id="A2"></div> </div> A2 and B2 contain tables, while B1 has 4 checkboxes. I&a ...

Deactivate a button on a specific tab

My setup includes two tabs: <div class="modal-body"> <form name="myForm" novalidate="novalidate"> <ul class="nav nav-tabs"> <li class="active"><a data-toggle="tab" href="#basicInfo">Info</a></li> ...

Is there a way to ensure the collapsible item stays in its position?

I'm encountering an issue with the display of items within collapsible cards. Here is what it currently looks like: https://i.sstatic.net/DM8sX.png And this is how I want it to appear: https://i.sstatic.net/BXGpW.png Is there a way to achieve the ...

The functionality of CSS transform appears to be malfunctioning on Firefox browser

My website, located at , features a logo that is centered within a compressed header. I achieved the centering effect using the following CSS command: .html_header_top.html_logo_center .logo { transform: translate(-63%, -2%); } This setup works perfe ...

Arrange elements within a div using Bootstrap

I have been struggling to align items within a div tag and despite trying various methods, I have not been successful. . Here is the current structure of my code: https://i.stack.imgur.com/t9PAj.png I attempted to use flexbox, but encountered an issue ...

Display the footer once the user has reached the end of the page by scrolling

Below is the footer code I am working with. <div class="row"> <div class="col-md-12"> <div> this section always remains at the bottom </div> </div> <div class="col-md-12"> <div> only v ...

Is CSS General sibling selector not functioning properly when used with :focus?

How can I display text that turns into an input form when hovered over, and stays visible even if it's unhovered but the user is interacting with the input form? The issue is that when the input form is focused while unhovered, both the input form an ...

Swapping out data points using JQuery

What could be causing line 10 to return null? Click here for the code file The code seems to function properly with line 40, but not with line 10. ...

navigation menu 'selective emphasis' feature

I have created a JQuery script that will highlight the 'About', 'My Projects', or 'Contact Me' text on the navigation bar when the corresponding section of the page is in view. To achieve this, I am using a scroll() event list ...

The stature of Bootstrap's columns

Exploring Bootstrap has been an exciting journey for me, as I believe it will simplify the process of creating visually appealing web pages. I'm currently facing a challenge in understanding these two examples: Bootstrap 3: http://codepen.io/rhutchi ...

Attempting to isolate just a fragment of the inner content

Option Explicit Sub VBAWebscraping2() Dim IEObject As Object Set IEObject = New InternetExplorer IEObject.Visible = True IEObject.navigate url:="https://streeteasy.com/building/" & Cells(2, 4).Value ...

How can CSS animations be implemented on a diagonal path?

I have developed a unique CSS animation that adds a shiny effect to text. Currently, the effect only works horizontally. I am interested in exploring options to change the direction of the animation to create a diagonal shine effect. Below is the code I a ...

Node.js script encounters errors fetching static files

My HTML index.html file has multiple containers, and I have included the bootstrap and font awesome folders in the <head> section like this: <link href="../bootstrap/css/bootstrap.css" rel="stylesheet"> <link href="../bootstrap/css/bootstra ...

Modify just one of the padding axis while keeping the other constant by utilizing a media query

My div currently has the following padding set: padding: 14px 150px; I want to change the left/right padding without affecting the top/bottom padding using a media query. @media screen and (max-width: 700px){ #paddingDiv{ padding: same as ...

Enhancing the internal styling of ngx-charts

While working on the ngx-charts Advanced Pie Chart example, I noticed that the numbers in my legend were getting cut off. Upon inspecting the CSS, I discovered that a margin-top of -6px was causing this issue: https://i.stack.imgur.com/oSho1.png After so ...

CSS: Struggling to properly position two flex items

I'm having some trouble with the alignment in my flex container. The title is perfectly centered, but the breadcrumb content is not aligning correctly. Specifically, I want the breadcrumbs to be right-aligned and positioned 25px from the top within t ...

Basic Timer with Visual Background

Struggling to find the right CSS/script for a straightforward countdown timer, Here are the requirements: Countdown in days only, no need for hours, minutes, and seconds Ability to use a custom image as background I've scoured online searches but n ...

Is it possible to alter the background behind each word in a text using only CSS?

I have a question about styling quotes by highlighting each word in the text with a background color. The issue I'm facing is that when using a solid background, there are no gaps between the colors. How can I achieve a result similar to this, but wit ...

Is it better to dynamically generate HTML elements or to just directly paste complete fragments in the code?

After manipulating the DOM and injecting AJAX content, I often find myself filling in the new content into a copied HTML fragment, then populating it with the updated information before using $().html() to insert the modified code back into the DOM. The ex ...

Tips for monitoring a field within an angularJS factory

Within my web application, I am utilizing a factory. This factory contains an object named mapLayers. Within my controller, I am assigning this factory.mapLayers object to a variable on the scope called $scope.mapLayers and using ngRepeat to iterate over i ...