I am making a navigation bar for a website. I am doing this through the flex box system. The flexbox container has three different DIV elements, two of which have an A element and one with a p element inside as a placeholder for a future link. When I put a border on each div the divs with the A elements have a height smaller than the flex container, but the div with the h1 element has the correct height. How do I make the hieght of the Divs with the a tags the same as the parent flex container. Thanks a lot
Note: the flex container is the class="navigator"
Note: the main css tag that you guys need to focus on is the .navigator tag. Other ones just set some generic stuff.
body {
background-image: url(Images/Marae_Inside.jpg);
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.wrapper {
border-color: green;
background-color: rgb(184, 241, 157);
border-style: solid;
border-width: 5px;
margin: 5px;
}
.heading,
.footer,
.main,
.navigator,
.title {
border-style: solid;
border-width: 5px;
margin: 10px;
padding: 5px;
}
.navigator {
display: flex;
flex-direction: row;
border: 5px solid black;
align-items: center;
padding: 0;
div {
border: 5px solid black;
flex-grow: 3;
text-align: center;
a:link {
text-decoration: none;
color: black;
}
a:hover {
text-decoration: underline;
text-decoration-color: blue;
color: black;
}
}
}
.heading {
border-color: red;
display: flex;
h1 {
padding-left: 50px;
}
}
.footer {
border-color: rgb(155, 155, 5);
}
.main {
text-align: center;
background-color: rgb(190, 230, 248);
}
.flex-container {
display: flex;
flex-direction: row;
div {
border: 5px groove rgb(68, 175, 247);
padding: 10px;
}
}
.navigator,
.heading,
.footer,
.title {
background-color: whitesmoke;
}
.title {
border-color: rgb(155, 155, 5);
text-align: center;
}!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Old Names</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="wrapper">
<div class="heading">
<img src="Images\logo.png" alt="logo">
<h1>logo name
</div>
<div class="navigator">
<div><a href="index.html">Why Change?</a></div>
<div><a href="old_names.html">Old Names</a></div>
<div>
<p>new names</p>
</div>
</div>
<div class="title">
<h2><strong>Old Names</strong></h2>
</div>
<div class="main">
<div class="flex-container">
<div>
<img src="Images\The4Houses-BishopSelwyn.jpg" alt="Bishop Selwyn">
<p>Cameron (Red)
<br>Late on Saturday, February 20, 1864, Cameron and more than 1200 British troops moved past Paterangi without alerting lookout stations and suddenly appeared before the village of Rangiaowhia the next morning to attack.
<br>The village’s men were away, prepared for a battle they believed was taking place near Paterangi, leaving the village and its occupants — women, children, the sick and the elderly defenceless.
<br>Many were killed by gunfire and by fires being lit in whares and the church.
<br>The colonial forces occupied the village and land, taking any resources that they could get their hands on.
<br>Source: https://www.tac.school.nz/recent-news/new-names-school-houses
<br>Cameron made every endeavour to make sure that while his master's wishes were obeyed the rules of ware were observed and if victory came without bloodshed, then his qualities as a tactician and strategist were justified.
<br>Cameron placed his duty to his troops first, and achieved success with a minimum of casulaties.
<br>Source: Otawhao - One Hundred Years On, page 47
</p>
</div>
<div>
<img src="Images\The4Houses-GeneralCameron.jpg" alt="General Cameron">
<p>
Selwyn (Yellow)
<br> Bishop George Augustus Selwyn was the first Anglican Bishop of Diocese of New Zealand and was charged with misleading Rangiaowhia’s occupants to believe the village was safe and it was also claimed he blessed the troops involved in the massacre.
<br>Source: https://www.tac.school.nz/our-news/new-house-names-2022
<br>He travelled both the North and South island organizing church outposts. He was well-informed on Maori rights and mediated in disputes between settlers and Maori.
<br>Source: Otawhao - One Hundred Years On, page 46
</p>
</div>
<div>
<img src="Images\The4Houses-SirJohnGorst.jpg" alt="Sir John Gorst">
<p>
Gorst (Blue)
<br>Sir George Gorst taught at a Maori boys’ school in Hopuhopu which fitted his opinion that in order to learn about and know the Maori people, men had to go and live amongst them. He became an inspector of mission schools in the Waikato and later became resident magistrate
<br>Gorst wrote a book 'The Maori King', which is reckoned the finest book written on the 19th centry Maori. In this book he wrote with love and understanding of the Maori people as he knew them, and expressed from the heart his admiration for leaders such as Wiremu Tamihana and Te Oriori.
<br>Source: Otawhao - One Hundred Years On, page 45
<br>Gorst became an inspector of mission schools in the Waikato and later became resident magistrate in an attempt to bring Waikato tribes under British law
<br>Source: https://www.tac.school.nz/our-news/new-house-names-2022
</p>
</div>
<div>
<img src="Images\The4Houses-GeorgeMelrose.jpg" alt="George Melrose">
<p>
Melrose (Green)
<br>George Baines Melrose was the first chairman of the district high school committee. He gave service to the people with who he loved and worked.
<br>Source: Otawhao - One Hundred Years On, page 44
</p>
</div>
</div>
</div>
<div class="footer">
<p>... <br> ... <br> ...</p>
</div>
</div>
</body>
</html>You are mixing block elements with inline elements and expect them to behave the same.
Set exactly the same styles for each one of the items.
In the example, I made a behave the same way as p by setting it to display: block; and the same margin.
You can also do the opposite by making p inline and removing its margin.
body {
background-image: url(Images/Marae_Inside.jpg);
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.wrapper {
border-color: green;
background-color: rgb(184, 241, 157);
border-style: solid;
border-width: 5px;
margin: 5px;
}
.heading,
.footer,
.main,
.navigator,
.title {
border-style: solid;
border-width: 5px;
margin: 10px;
padding: 5px;
}
.navigator {
display: flex;
flex-direction: row;
border: 5px solid black;
align-items: center;
padding: 0;
div {
border: 5px solid black;
flex-grow: 3;
text-align: center;
a{
display: block;
margin: 1em 0;
}
a:link {
text-decoration: none;
color: black;
}
a:hover {
text-decoration: underline;
text-decoration-color: blue;
color: black;
}
}
}
.heading {
border-color: red;
display: flex;
h1 {
padding-left: 50px;
}
}
.footer {
border-color: rgb(155, 155, 5);
}
.main {
text-align: center;
background-color: rgb(190, 230, 248);
}
.flex-container {
display: flex;
flex-direction: row;
div {
border: 5px groove rgb(68, 175, 247);
padding: 10px;
}
}
.navigator,
.heading,
.footer,
.title {
background-color: whitesmoke;
}
.title {
border-color: rgb(155, 155, 5);
text-align: center;
}!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Old Names</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="wrapper">
<div class="heading">
<img src="Images\logo.png" alt="logo">
<h1>logo name
</div>
<div class="navigator">
<div><a href="index.html">Why Change?</a></div>
<div><a href="old_names.html">Old Names</a></div>
<div>
<p>new names</p>
</div>
</div>
<div class="title">
<h2><strong>Old Names</strong></h2>
</div>
<div class="main">
<div class="flex-container">
<div>
<img src="Images\The4Houses-BishopSelwyn.jpg" alt="Bishop Selwyn">
<p>Cameron (Red)
<br>Late on Saturday, February 20, 1864, Cameron and more than 1200 British troops moved past Paterangi without alerting lookout stations and suddenly appeared before the village of Rangiaowhia the next morning to attack.
<br>The village’s men were away, prepared for a battle they believed was taking place near Paterangi, leaving the village and its occupants — women, children, the sick and the elderly defenceless.
<br>Many were killed by gunfire and by fires being lit in whares and the church.
<br>The colonial forces occupied the village and land, taking any resources that they could get their hands on.
<br>Source: https://www.tac.school.nz/recent-news/new-names-school-houses
<br>Cameron made every endeavour to make sure that while his master's wishes were obeyed the rules of ware were observed and if victory came without bloodshed, then his qualities as a tactician and strategist were justified.
<br>Cameron placed his duty to his troops first, and achieved success with a minimum of casulaties.
<br>Source: Otawhao - One Hundred Years On, page 47
</p>
</div>
<div>
<img src="Images\The4Houses-GeneralCameron.jpg" alt="General Cameron">
<p>
Selwyn (Yellow)
<br> Bishop George Augustus Selwyn was the first Anglican Bishop of Diocese of New Zealand and was charged with misleading Rangiaowhia’s occupants to believe the village was safe and it was also claimed he blessed the troops involved in the massacre.
<br>Source: https://www.tac.school.nz/our-news/new-house-names-2022
<br>He travelled both the North and South island organizing church outposts. He was well-informed on Maori rights and mediated in disputes between settlers and Maori.
<br>Source: Otawhao - One Hundred Years On, page 46
</p>
</div>
<div>
<img src="Images\The4Houses-SirJohnGorst.jpg" alt="Sir John Gorst">
<p>
Gorst (Blue)
<br>Sir George Gorst taught at a Maori boys’ school in Hopuhopu which fitted his opinion that in order to learn about and know the Maori people, men had to go and live amongst them. He became an inspector of mission schools in the Waikato and later became resident magistrate
<br>Gorst wrote a book 'The Maori King', which is reckoned the finest book written on the 19th centry Maori. In this book he wrote with love and understanding of the Maori people as he knew them, and expressed from the heart his admiration for leaders such as Wiremu Tamihana and Te Oriori.
<br>Source: Otawhao - One Hundred Years On, page 45
<br>Gorst became an inspector of mission schools in the Waikato and later became resident magistrate in an attempt to bring Waikato tribes under British law
<br>Source: https://www.tac.school.nz/our-news/new-house-names-2022
</p>
</div>
<div>
<img src="Images\The4Houses-GeorgeMelrose.jpg" alt="George Melrose">
<p>
Melrose (Green)
<br>George Baines Melrose was the first chairman of the district high school committee. He gave service to the people with who he loved and worked.
<br>Source: Otawhao - One Hundred Years On, page 44
</p>
</div>
</div>
</div>
<div class="footer">
<p>... <br> ... <br> ...</p>
</div>
</div>
</body>
</html>