elements across the page with position: relative; For some reason, there is a gap that seperates my bottom
element from the rest of the page. An image is shown below of both the gap and the two other div elements shown at the top of the page along with the relevant code.
DISCLAIMER: I have had to zoom out the page to capture these shots
<!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 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>
<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>
<h1 id="subheadingP3">Modern AI</h1>
</header>
<div id="NavigationP2C"><!-- This contains the navigation system, the sole reason I have made a container for the container is for this one to be fixed whilst its child elements remain relative -->
<div id="NavigationP2">
<nav id="nav2">
<fieldset class="lineP2">
<a href="PIEQASiteP1.html"><p class="linkP2">Introduction</p></a>
</fieldset>
<br>
<br>
<fieldset class="lineP2">
<a href="PIEQASiteP2.html"><p class="linkP2" id="P2PP3">AI Past to Present</p></a>
</fieldset>
<br>
<br>
<fieldset id="lineP2b">
<a href="PIEQASiteP4.html"><p class="linkP2" id="CP3">Conclusion</p></a>
</fieldset>
</nav>
</div>
</div>
<fieldset class="FP3" id="F1P3"></fieldset>
<fieldset class="FP3" id="F2P3"></fieldset>
<fieldset class="FP3" id="F3P3"></fieldset>
<fieldset class="FP3" id="F4P4"></fieldset>
<div id="PIEQA-AD">
<!-- the reason that it this and #PIEQA-AD2 placed here instead of the beginning of the page is because it would take over some of the space of the first fieldset. Ruining the appearance of the page by creating small gaps at the top and bottom of the page (assuming I do not restyle all of the fieldsets, which would make them look tacky)-->
<h3 class="ADinfo"></h3>
</div>
<div id="PIEQA-AD2">
<h3 class="ADinfo"></h3>
</div>
<div id="PIEQA-AD3">
<h1 id="LOWMYST" class="ADinfo">Do you like youtubers? Do you like to laugh? Maybe you should watch LowMyst!</h1>
</div>
</body>
</html>
sure, but it depends on what you want to obtain. you could use position: absolute or position: fixed (position: relative is the default you don’t really need to specify it), or use display: flex or display: grid on the parent element and organize your elements using that method
what is “that part of the page?”, where do you want the element?
I want the 2 blue div elements next to the 1st and 3rd fieldsets. I have already tried to fix the position, but it just removes the divs entirley from the page.
I am afraid not. I will send you the source code though, bare in mind that the stylesheet is way bigger due to the fact that it is for multiple pages. The entire code is 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 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>
<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>
<h1 id="subheadingP3">Modern AI</h1>
</header>
<div id="NavigationP2C"><!-- This contains the navigation system, the sole reason I have made a container for the container is for this one to be fixed whilst its child elements remain relative -->
<div id="NavigationP2">
<nav id="nav2">
<fieldset class="lineP2">
<a href="PIEQASiteP1.html"><p class="linkP2">Introduction</p></a>
</fieldset>
<br>
<br>
<fieldset class="lineP2">
<a href="PIEQASiteP2.html"><p class="linkP2" id="P2PP3">AI Past to Present</p></a>
</fieldset>
<br>
<br>
<fieldset id="lineP2b">
<a href="PIEQASiteP4.html"><p class="linkP2" id="CP3">Conclusion</p></a>
</fieldset>
</nav>
</div>
</div>
<fieldset class="FP3" id="F1P3"></fieldset>
<fieldset class="FP3" id="F2P3"></fieldset>
<fieldset class="FP3" id="F3P3"></fieldset>
<fieldset class="FP3" id="F4P4"></fieldset>
<div id="PIEQA-AD">
<!-- the reason that it this and #PIEQA-AD2 placed here instead of the beginning of the page is because it would take over some of the space of the first fieldset. Ruining the appearance of the page by creating small gaps at the top and bottom of the page (assuming I do not restyle all of the fieldsets, which would make them look tacky)-->
<h3 class="ADinfo"></h3>
</div>
<div id="PIEQA-AD2">
<h3 class="ADinfo"></h3>
</div>
<div id="PIEQA-AD3">
<h1 class="LOWMYST">Do you like youtubers? Do you like to laugh? Maybe you should watch LowMyst!</h1>
<p class="LOWMYST">If you are interested, please click on his channel logo!</p>
<img src="" id="LOWMYSTIMG">
</div>
</body>
</html>