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;
}