Hey guys! I’ve recently been playing around with using flex (as I am new to web development) and I’ve come across a random error where I don’t even know how to trouble shoot…
There used to be a border around my logo image, and then it disappeared! And on my phone, the navbar and the web pages never merged, now they do (even though they don’t merge on the full web version? Also on the web version, now some of my buttons on the navbar are in wonky positions.
I feel like this is something super simple that I just don’t know how or what to do for it…
Here’s some pictures & code!
This is the full web version
This is the mobile version
Header HTML:
<?php
session_start();
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="Example of meta discription.">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<link rel="stylesheet" href="css/header.css">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
</head>
<header>
<nav>
<div class="navigation">
<a href="teacherportal.php">
<img src="img/logo.png" alt="logo">
</a>
<ul>
<li><a href="index.php">Not a Teacher?</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">About Me</a></li>
<li><a href="#">Contact</a></li>
</ul>
<div class="log-on">
<?php
if(isset($_SESSION['userid'])){
echo '
<form action="includes/logout.inc.php" method="post">
<div class=buttons>
<button type="submit" name="logout-submit">Logout</button>
</div>
</form>
';
}
else{
echo '
<form action="includes/login.inc.php" method="post">
<input type="text" name="mailuid" placeholder="Username/Email...">
<input type="password" name="pwd" placeholder="Password...">
<button type="submit" name="login-submit">Login</button>
</form>
<a href="tsignup.php">
<button>Signup</button>
</a>
';
}
?>
</div>
</div>
</nav>
</header>
Sign up HTML:
<?php
require "theader.php";
?>
<link rel="stylesheet" href="css/signup.css">
<main>
<div class="signup">
<section>
<h1>Signup</h1>
<?php
if(isset($_GET['error'])){
if($_GET['error'] == "emptyfields"){
echo '<p>Fill in all fields</p>';
}
elseif($_GET["error"] == "invalidemailuserid"){
echo '<p>Invalid email and user ID</p>';
}
elseif($_GET["error"] == "invalidemail"){
echo '<p>Invalid email</p>';
}
elseif($_GET["error"] == "invaliduserid"){
echo '<p>Invalid user ID</p>';
}
elseif($_GET["error"] == "passwordcheck"){
echo '<p>Passwords do not match</p>';
}
elseif($_GET["error"] == "useridtaken"){
echo '<p>User ID is alreadu taken</p>';
}
}
if(isset($_GET["signup"])){
if($_GET["signup"] == "success")
echo '<p>Signup successful!</p>';
}
?>
<form class="form-signup" action="includes/tsignup.inc.php" method="post">
<input type="text" name="userid" placeholder="Username">
<input type="text" name="email" placeholder="Email">
<input type="password" name="pwd" placeholder="Password">
<input type="password" name="pwd-repeat" placeholder="Repeat password">
<button type="submit" name="signup-submit">Signup</button>
</form>
</section>
</div>
</main>
<?php
require "footer.php";
?>
CSS for header:
body{
padding:0;
margin: 0;
}
.navigation{
border: 1px solid black;
height: 120px;
display:flex;
padding: 0;
margin: 0;
justify-content: space-around;
flex-wrap: wrap;
}
img{
padding:0.5em;
border: 40px dotted red;
width: 150px;
}
ul{
border: 1px solid black;
display:flex;
margin: 0;
padding: 0;
list-style-type: none;
justify-content: space-around;
}
li{
background-color: white;
color: black;
border: 2px solid #555555;
height: 20px;
padding: 0.5em;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
transition-duration: 0.4s;
cursor: pointer;
}
li:hover{
background-color: #555555;
color: white;
}
.log-on{
display:flex;
border: 1px solid black;
}
input{
padding:0.5em;
margin:0.5em;
}
button{
background-color: white;
color: black;
border: 2px solid #555555;
padding: 5px 10npx;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
transition-duration: 0.4s;
cursor: pointer;
}
button:hover {
background-color: #555555;
color: white;
}
CSS for Sign up:
.signup{
border:1px solid black;
display:flex;
justify-content: center;
}
.form-signup{
border:1px solid black;
display:flex;
flex-direction: column;
}
h1{
border:1px solid black;
display: flex;
justify-content: center;
}