<a> not working

HTML-CSS
1

Hi all! I have been trying to make this <a> element link to one of my pages for awhile now. Both the code shown here and the code I am trying to link it to are in the same file so I am unsure as to why it is not letting me click on it. Code is shown below

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>PIEQASITE</title>
	<link rel="stylesheet" href="PIEQACSS.css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<meta charset="UTF-8" />
	<meta name="description" content="Welcome to PIEQA, an organisation that is founded on teaching people the modern wonders of technology. This website is dedicated to teaching you about the modern controversies that arise with artificial intelligence. Our programmer (Aidan Hammond) has put a fair share of time into this and he hopes you enjoy this as much as we do. Learn as much as you can, this is a rapidly growing topic that could end up being a requirement for most industries to keep on top of (some mentioned on this site)." />
</head>
<body>
	<header>
		<!-- This header must be standardised for the final page -->
		<div class="PIEQAtitle">
	<h1 class="PIEQA" style="color:red;">P</h1>
	<h1 class="PIEQA" style="color:blue;">I</h1><h1 class="PIEQA" style="color:red;">E</h1><h1 class="PIEQA" style="color:red;">Q</h1>
	<h1 class="PIEQA" style="color:blue;">A</h1>
	  </div>
		<div id="navigation">
		<nav>
		<fieldset class="line" id="L1">
			<p><a href="PIEQASiteP2.html">AI from past to present</a></p>
		</fieldset>
		<fieldset class="line">
			<p><a href="PIEQASiteP3.html">Modern AI</a></p>
			</fieldset>
		<fieldset class="line" id="L2">
			<p><a href="PIEQASiteP4.html">Conclusion</a></p>
		</fieldset>
		</nav>
		</div>
	</header>
	</body>
</html>

body{
	background-color: grey;
	/* THIS MUST BE STANDARDISED */
}
header{
	Background-image: url("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTSla9Q1VUFgwmsyVzvg3B0WsxihLZ5KEsrdA&usqp=CAU");
	background-size: 1000px;
	height: 310px;
	z-index: -1;
	padding: none;
	border: none;
	position: relative;
	right: 7.7px;
	bottom: 20px;
	width: 1349px;
}
.PIEQA{
	font-family: droid-serif;
	font-size: 70px;
	font-weight: 20px;
	display: flex;
	align-items: center;
	position: sticky;
	right: 40px;
}
.PIEQAtitle{
 display: flex;
 float: center;
 margin-left: 570px;
 margin-bottom: 50px;
Background-color: white;
width: 225px;
}
#navigation{
	border: black, solid;
	background-color: white;
	height: 86px;
	width: 343px;
	max-width: 50%;
	display: flex;
	padding: none;
}
nav{
 display: flex;
 position: relative;
 right: 7px;
}
.line{
	border-color: black;
	border-width: 2px
}
2

It is caused by the negative z-index on header.

I don’t think you need any positioning.

  • The positioning on header is not needed. You seem to be trying to compensate for the default margin on the body element which you can just remove.

  • The margin positioning on .PIEQAtitle should be replaced with flexbox centering.

  • If you do not want elements to cover up the background image you shouldn’t give them a background color.

  • You should have a single h1 and use span elements inside it for each letter coloring.

Without knowing the exact layout you are trying to create it’s hard to give any more advice.

Code example 
body {
  background-color: grey;
  margin: 0;
}

header {
  background-image: url("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTSla9Q1VUFgwmsyVzvg3B0WsxihLZ5KEsrdA&usqp=CAU");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

.PIEQA {
  font-family: droid-serif;
  font-size: 70px;
  font-weight: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.PIEQAtitle {
  display: flex;
  justify-content: center;
}

#navigation {
  display: flex;
}

nav {
  display: flex;
  background-color: white;
}

.line {
  border-color: black;
  border-width: 2px;
  margin-left: 0;
}
3

Sorry for the late response, thank you

1 Like
4

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.