NAVBAR now stays on the top at all times.

This commit is contained in:
Thomas G 2022-06-20 12:45:11 +10:00
parent 21b753cc4e
commit f2934acb8d
9 changed files with 57 additions and 50 deletions

View File

@ -17,7 +17,7 @@
<script src="main.js"></script>
</head>
<body>
<header class="navbar">
<div class="navbar">
<a id="logo_full" href="index.html"><img alt="MORBLOX Logo" src="MORBLOXlogo.png" width="200" height="40"/></a>
<a id="logo_small" class="invisible" href="index.html"><img alt="MORBLOX Logo" src="MORBLOXlogoshort.png" width="45" height="40"/></a>
<div class="navbarbuttoncontainer">
@ -31,17 +31,17 @@
<div class="navbarlogincontainer">
<p><a href="signup.html">Sign Up</a> or <a href="login.html">Log In</a>
</div>
</header>
<header class="smallnav">
</div>
<div class="smallnav">
<div class="smallnavbarbuttoncontainer">
<a class="smallnavbarbutton" href="profile.html">Profile</a>
<a class="smallnavbarbutton" href="avatar.html">Avatar</a>
<a class="smallnavbarbutton" href="Settings.html">Settings</a>
</div>
</header>
<header class="invisible" id="alert">
</div>
<div class="invisible" id="alert">
<p class="alerttext" id="alerttext">ALERT TEXT</p>
</header>
</div>
<div class="content">
<p>Games Page</p>
</div>

View File

@ -17,7 +17,7 @@
<script src="main.js"></script>
</head>
<body>
<header class="navbar">
<div class="navbar">
<a id="logo_full" href="index.html"><img alt="MORBLOX Logo" src="MORBLOXlogo.png" width="200" height="40"/></a>
<a id="logo_small" class="invisible" href="index.html"><img alt="MORBLOX Logo" src="MORBLOXlogoshort.png" width="45" height="40"/></a>
<div class="navbarbuttoncontainer">
@ -31,17 +31,17 @@
<div class="navbarlogincontainer">
<p><a href="signup.html">Sign Up</a> or <a href="login.html">Log In</a>
</div>
</header>
<header class="smallnav">
</div>
<div class="smallnav">
<div class="smallnavbarbuttoncontainer">
<a class="smallnavbarbutton" href="profile.html">Profile</a>
<a class="smallnavbarbutton" href="avatar.html">Avatar</a>
<a class="smallnavbarbutton" href="Settings.html">Settings</a>
</div>
</header>
<header class="invisible" id="alert">
</div>
<div class="invisible" id="alert">
<p class="alerttext" id="alerttext">ALERT TEXT</p>
</header>
</div>
<div class="content">
<h1>Hello, OnlyTwentyCharacters!</h1>
<div class="leftcolumn">

View File

@ -18,7 +18,7 @@
<script src="index.html"></script>
</head>
<body>
<header class="navbar">
<div class="navbar">
<a id="logo_full" href="index.html"><img alt="MORBLOX Logo" src="MORBLOXlogo.png" width="200" height="40"/></a>
<a id="logo_small" class="invisible" href="index.html"><img alt="MORBLOX Logo" src="MORBLOXlogoshort.png" width="45" height="40"/></a>
<div class="navbarbuttoncontainer">
@ -32,17 +32,17 @@
<div class="navbarlogincontainer">
<p><a href="signup.html">Sign Up</a> or <a href="login.html">Log In</a>
</div>
</header>
<header class="smallnav">
</div>
<div class="smallnav">
<div class="smallnavbarbuttoncontainer">
<a class="smallnavbarbutton" href="profile.html">Profile</a>
<a class="smallnavbarbutton" href="avatar.html">Avatar</a>
<a class="smallnavbarbutton" href="Settings.html">Settings</a>
</div>
</header>
<header class="invisible" id="alert">
</div>
<div class="invisible" id="alert">
<p class="alerttext" id="alerttext">ALERT TEXT</p>
</header>
</div>
<div class="content">
<h1>WELCOME TO MORBLOX!!!</h1>
<p>MORBLOX is a new revival of ROBLOX.</p>

View File

@ -17,7 +17,7 @@
<script src="main.js"></script>
</head>
<body>
<header class="navbar">
<div class="navbar">
<a id="logo_full" href="index.html"><img alt="MORBLOX Logo" src="MORBLOXlogo.png" width="200" height="40"/></a>
<a id="logo_small" class="invisible" href="index.html"><img alt="MORBLOX Logo" src="MORBLOXlogoshort.png" width="45" height="40"/></a>
<div class="navbarbuttoncontainer">
@ -31,17 +31,17 @@
<div class="navbarlogincontainer">
<p><a href="signup.html">Sign Up</a> or <a href="login.html">Log In</a>
</div>
</header>
<header class="smallnav">
</div>
<div class="smallnav">
<div class="smallnavbarbuttoncontainer">
<a class="smallnavbarbutton" href="profile.html">Profile</a>
<a class="smallnavbarbutton" href="avatar.html">Avatar</a>
<a class="smallnavbarbutton" href="Settings.html">Settings</a>
</div>
</header>
<header class="invisible" id="alert">
</div>
<div class="invisible" id="alert">
<p class="alerttext" id="alerttext">ALERT TEXT</p>
</header>
</div>
<div class="content">
<p>nothing</p>
</div>

View File

@ -1,6 +1,8 @@
#alert {
height: fit-content;
margin: 0px;
position: fixed;
top: 72px;
padding-top: 2px;
padding-bottom: 2px;
padding-right: 5px;
@ -15,6 +17,8 @@
padding-right: 5px;
padding-left: 5px;
padding-top: 2px;
position: fixed;
top: 0px;
padding-bottom: 2px;
color: white;
line-height: normal;
@ -52,6 +56,8 @@
margin: 0px;
padding-left: 5px;
padding-right: 5px;
position: fixed;
top: 43px;
padding-top: 2px;
padding-bottom: 2px;
display: inline-table;
@ -82,8 +88,9 @@ body {
.content {
color: black;
min-height: 300px;
max-width: 1000px;
max-width: 1500px;
margin: auto;
margin-top: 105px;
padding-left: 5px;
padding-right: 5px;
background-color: white;
@ -95,7 +102,7 @@ body {
}
footer {
text-align: center;
max-width: 1000px;
max-width: 1500px;
padding-left: 5px;
padding-right: 5px;
padding-bottom: 5px;

View File

@ -17,7 +17,7 @@
<script src="main.js"></script>
</head>
<body>
<header class="navbar">
<div class="navbar">
<a id="logo_full" href="index.html"><img alt="MORBLOX Logo" src="MORBLOXlogo.png" width="200" height="40"/></a>
<a id="logo_small" class="invisible" href="index.html"><img alt="MORBLOX Logo" src="MORBLOXlogoshort.png" width="45" height="40"/></a>
<div class="navbarbuttoncontainer">
@ -31,17 +31,17 @@
<div class="navbarlogincontainer">
<p><a href="signup.html">Sign Up</a> or <a href="login.html">Log In</a>
</div>
</header>
<header class="smallnav">
</div>
<div class="smallnav">
<div class="smallnavbarbuttoncontainer">
<a class="smallnavbarbutton" href="profile.html">Profile</a>
<a class="smallnavbarbutton" href="avatar.html">Avatar</a>
<a class="smallnavbarbutton" href="Settings.html">Settings</a>
</div>
</header>
<header class="invisible" id="alert">
</div>
<div class="invisible" id="alert">
<p class="alerttext" id="alerttext">ALERT TEXT</p>
</header>
</div>
<div class="content">
<p>404 unauthorized</p>
</div>

View File

@ -17,7 +17,7 @@
<script src="main.js"></script>
</head>
<body>
<header class="navbar">
<div class="navbar">
<a id="logo_full" href="index.html"><img alt="MORBLOX Logo" src="MORBLOXlogo.png" width="200" height="40"/></a>
<a id="logo_small" class="invisible" href="index.html"><img alt="MORBLOX Logo" src="MORBLOXlogoshort.png" width="45" height="40"/></a>
<div class="navbarbuttoncontainer">
@ -31,17 +31,17 @@
<div class="navbarlogincontainer">
<p><a href="signup.html">Sign Up</a> or <a href="login.html">Log In</a>
</div>
</header>
<header class="smallnav">
</div>
<div class="smallnav">
<div class="smallnavbarbuttoncontainer">
<a class="smallnavbarbutton" href="profile.html">Profile</a>
<a class="smallnavbarbutton" href="avatar.html">Avatar</a>
<a class="smallnavbarbutton" href="Settings.html">Settings</a>
</div>
</header>
<header class="invisible" id="alert">
</div>
<div class="invisible" id="alert">
<p class="alerttext" id="alerttext">ALERT TEXT</p>
</header>
</div>
<div class="content">
<h1>Privacy Policy</h1>
<p>MORBLOX is committed to providing a silly ROBLOX revival and this policy outlines our ongoing obligations to you in respect of how we manage your Personal Information.

View File

@ -17,7 +17,7 @@
<script src="main.js"></script>
</head>
<body>
<header class="navbar">
<div class="navbar">
<a id="logo_full" href="index.html"><img alt="MORBLOX Logo" src="MORBLOXlogo.png" width="200" height="40"/></a>
<a id="logo_small" class="invisible" href="index.html"><img alt="MORBLOX Logo" src="MORBLOXlogoshort.png" width="45" height="40"/></a>
<div class="navbarbuttoncontainer">
@ -31,17 +31,17 @@
<div class="navbarlogincontainer">
<p><a href="signup.html">Sign Up</a> or <a href="login.html">Log In</a>
</div>
</header>
<header class="smallnav">
</div>
<div class="smallnav">
<div class="smallnavbarbuttoncontainer">
<a class="smallnavbarbutton" href="profile.html">Profile</a>
<a class="smallnavbarbutton" href="avatar.html">Avatar</a>
<a class="smallnavbarbutton" href="Settings.html">Settings</a>
</div>
</header>
<header class="invisible" id="alert">
</div>
<div class="invisible" id="alert">
<p class="alerttext" id="alerttext">ALERT TEXT</p>
</header>
</div>
<div class="content">
<p>Nothing</p>
</div>

View File

@ -17,7 +17,7 @@
<script src="main.js"></script>
</head>
<body>
<header class="navbar">
<div class="navbar">
<a id="logo_full" href="index.html"><img alt="MORBLOX Logo" src="MORBLOXlogo.png" width="200" height="40"/></a>
<a id="logo_small" class="invisible" href="index.html"><img alt="MORBLOX Logo" src="MORBLOXlogoshort.png" width="45" height="40"/></a>
<div class="navbarbuttoncontainer">
@ -31,17 +31,17 @@
<div class="navbarlogincontainer">
<p><a href="signup.html">Sign Up</a> or <a href="login.html">Log In</a>
</div>
</header>
<header class="smallnav">
</div>
<div class="smallnav">
<div class="smallnavbarbuttoncontainer">
<a class="smallnavbarbutton" href="profile.html">Profile</a>
<a class="smallnavbarbutton" href="avatar.html">Avatar</a>
<a class="smallnavbarbutton" href="Settings.html">Settings</a>
</div>
</header>
<header class="invisible" id="alert">
</div>
<div class="invisible" id="alert">
<p class="alerttext" id="alerttext">ALERT TEXT</p>
</header>
</div>
<div class="content">
<h1>Terms of Service</h1>
<p>Welcome to MORBLOX! Before signing up, please read the <a href="privacy.html">Privacy Policy.</a></p>