I have created a website and I have included in that website a navigation bar, the navigation bar works good on all the pages except for the contact page. I have created in the contact page a form and set its background to light pink, but the navigation bar is mostly light pink, rather than the navigation bar's colour. Here is my navigation bar code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Homepage</title>
</head>
<style>
@import url('https://fonts.googleapis.com/css?family=Work Sans:400,600');
body {
margin: 0;
background: #222;
font-family: 'Work Sans', sans-serif;
font-weight: 800;
}
.container {
width: 90%;
margin: 0 auto;
}
header {
background: #55d6aa;
}
header::after {
content: '';
display: table;
clear: both;
}
.logo {
float: left;
padding: 10px 0;
}
nav {
float: right;
}
nav ul {
margin: 0;
padding: 0;
list-style: none;
}
nav li {
display: inline-block;
margin-left: 100px;
padding-top: 40px;
position: relative;
}
nav a {
color: #444;
text-decoration: none;
text-transform: uppercase;
font-size: 14px;
}
nav a:hover {
color: #000;
}
nav a::before {
content: '';
display: block;
height: 5px;
background-color: #444;
position: absolute;
top: 0;
width: 0%;
transition: all ease-in-out 250ms;
}
nav a:hover::before {
width: 100%;
}
</style>
<style>
body {
background-color: #d3d3d3
}
table, th, td {
border:2px solid rgb(0, 0, 0);
}
</style>
<style>
body {
font-family: Playfair;
margin: 0;
}
.header {
padding: 60px;
text-align: center;
background: rgb(183, 203, 211);
color: rgb(255, 0, 0);
font-size: 30px;
}
</style>
<header>
<div class = "container">
<a href="http://127.0.0.1:8000/home"><img src="https://i.ibb.co/QkMky9F/logo1.png"
alt="logo1" border="0" width = "200" height = "100"></a>
<nav>
<ul>
<li><a href = "http://127.0.0.1:8000/home">Homepage</a></li>
<li><a href = "http://127.0.0.1:8000/home/profile">Profile</a></li>
<li><a href = "http://127.0.0.1:8000/home/about">About</a></li>
<li><a href = "http://127.0.0.1:8000/home/contact">Contact</a></li>
</ul>
</nav>
</div>
</header>
Here is my form code:
<h2><center><font color = "blue">Contact us form</font></center></h2>
<style>
body {font-family: Arial, Cursive, Bodoni 72;}
* {box-sizing: border-box;}
input[type = text], select, textarea {
width: 100%;
padding: 12px;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
margin-top: 6px;
margin-bottom: 16px;
resize: vertical;
}
input[type = submit] {
background-color: green;
color: white;
padding: 12px 20px;
border: none;
border-radius: 4px;
cursor:pointer;
}
input[type = submit]:hover {
background-color:black;
}
.container {
border-radius: 5px;
background-color: #e9c1c1;
padding: 20px;
}
</style>
<div class = "container">
<label for = "First name">First name</label>
<input type = "text" id = "First name" name = "First name" placeholder = "Please enter
your first name...">
<label for = "Last name">Last name</label>
<input type = "text" id = "Last name" name = "Last name" placeholder = "Please enter
your last name...">
<label for = "country">Country</label>
<select id = "country" name = "country">
<option value = "Select a country">Select the country</option>
<option value = "Pakistan">Pakistan</option>
<option value = "England">England</option>
<option value = "italy">Italy</option>
<label for = "Subject">Subject</label>
<textarea id = "Subject" name = "Subject" placeholder = "Please write if you want to
contact me..." style = "height: 200px"></textarea>
<input type = "Submit" value = "Submit">
</div>
<p><center>To go to the homepage, please go to the homepage:<br><br><a href =
"http://127.0.0.1:8000/home">Homepage</a></center></p>
<br><p><center>For more information about me and my family, please go to the profile page:
<br><br><a href = "http://127.0.0.1:8000/home/profile">Profile page</a></center></p>
<br><p><center>For more information about me, please go to the about page:<br><br><a href
= "http://127.0.0.1:8000/home/about">About page</a></center></p>
<br><br><br><br>
<style>
.footer{
position: fixed;
left: 10px;
bottom: 0px;
right: 10px;
width: 100%;
background-color: gray;
color: white;
text-align: center;
}
</style>
Here is the navigation bar in other pages:
Here is the navigation bar in contact page:
Can somebody please help me how to fix this issue?
CodePudding user response：
This extra CSS on the contact page:
.container {
border-radius: 5px;
background-color: #e9c1c1;
padding: 20px;
}
is matching your navigation bar wrapper element since the navigation bar wrapper has the container class on it.
You can should change this class name so it is different from your navigation bar wrapper element class:
.different-class-name {
border-radius: 5px;
background-color: #e9c1c1;
padding: 20px;
}
<!-- […] -->
<div class = "different-class-name">
<label for = "First name">First name</label>
<input type = "text" id = "First name" name = "First name" placeholder = "Please enter
your first name...">
<!-- […] -->