I have implemented the CSS below:
/* HEADER STYLES */
.header {
top: 0;
right: 0;
left: 0;
bottom: 90%;
position: fixed;
padding: 20px;
background-color: #404040;
font-family: 'Lobster', cursive;
font-size: 30px;
}
#fundme {
padding-left: 2%;
font-size: 40px;
float: left;
color: white;
text-decoration: none;
}
.header_buttons {
color: #fff;
background: #00cc66;
border-radius: 8px;
text-align: center;
margin: 5px;
padding: 10px;
}
.hb-4,
.hb-5 {
background: #00cc66;
float: right;
}
.logout {
color: #fff;
text-decoration: none;
background: #00cc66;
padding: 6px 6px 6px 10px;
border-radius: 8px;
display: inline-block;
margin: 5px;
float: right;
font-size: 30px;
}
/* END OF HEADER STYLES */
and the setup on two different pages:
Page One
<div class="header"><a id="fundme" href="https://fund.me">fund.me</a>
<form method="post" action="">
<input type="button" name="profile" class="hb-4 header_buttons" value="Profile" />
<input type="submit" name="logout" class="hb-5 header_buttons" value="Log Out" />
</form>
</div>
<div class="container">
the content will appear here
<?php echo "<h4 class='alert'>" . $response . "</h4>"; ?>
</div>
</body>
Page Two
<div class="header"><a id="fundme" href="https://fund.me">fund.me</a>
<div class="hb-4 header_buttons"><a href="https://fund.me/signup.php">Sign Up</a></div>
<div class="hb-5 header_buttons"><a href="https://fund.me/login.php">Log In</a></div>
</div>
<div class="container">
<form method="post" action="">
<h1 class="credential_form">Sign Up</h1>
<input type="text" name="fullname" class="credential_form" id="fullname" placeholder="Full Name" /><br /><br />
<input type="text" name="email" class="credential_form" id="email" placeholder="Email" /><br /><br />
<input type="password" name="password" class="credential_form" id="password" placeholder="Password" /><br /><br />
<input type="submit" name="submit" class="credential_submit" value="Submit" /><br /><br />
</form>
<?php if(isset($response)) echo "<h4 class='alert'>" . $response . "</h4>"; ?>
</div>
</body>
The styling of the buttons in the header is inconsistent between the two pages. Even though they use the same class, one page has buttons and the other links. It seems strange that this would affect the styling. Any ideas why they don't match?