How to include copyright info in my footer of the web page? - html

Question

The copyright info comes as next menu item, but I want it to come on the next row inside the footer as a centered text so tell me please how I can achive this. Please help. thanks in advance.
/* ----- FOOTER ----- */
.footer-nav{
display: flex;
flex-direction: row;
justify-content: space-between;
list-style: none;
text-align: center;
text-transform: uppercase;
background-color: #333;
padding: 50px;
font-size: 80%;
}
.footer-nav li{
flex-grow: 100%;
}
<div class="wrapper">
<ul class="footer-nav">
<li>About Us</li>
<li>blah</li>
<li><a href="#"blah</a></li>
<li>blah</li>
<p class = "copyright">aaa</p>
</ul>
</div>

Answer 1

Take out background color from your ulr tag and add it to .wrapper
Also remove the p tag from your ul list and place in outside the list but inside the wrapper
Apply a text-align:center to you p tag
remove padding-top and padding-bottom from your footer for a nice fitting
Snippet below
/* ----- FOOTER ----- */
p{
text-align:center;
}
.footer-nav{
display: flex;
flex-direction: row;
justify-content: space-between;
list-style: none;
text-align: center;
text-transform: uppercase;
padding: 50px;
padding-top:0;
padding-bottom:0;
font-size: 80%;
}
.footer-nav li{
flex-grow: 100%;
}
.wrapper{
background-color: #333;
}
<div class="wrapper">
<ul class="footer-nav">
<li>About Us</li>
<li>blah</li>
<li><a href="#"blah</a></li>
<li>blah</li>
</ul>
<p class = "copyright">aaa</p>
</div>

Answer 2

I, you should try using footer element and put <ul> inside and <p> outside of <ul> with a special class to center the text.
CSS :
.footer-nav{
display: flex;
flex-direction: row;
justify-content: space-between;
list-style: none;
text-align: center;
text-transform: uppercase;
padding: 50px;
font-size: 80%;
}
footer{
background-color: #333;
}
.copyright{
text-align: center;
color: white;
}
.footer-nav li{
flex-grow: 100%;
}
and HTML :
<div class="wrapper">
<footer>
<ul class="footer-nav">
<li>About Us</li>
<li>blah</li>
<li><a href="#"</a>blah</li>
<li>blah</li>
</ul>
<p class="copyright">aaa</p>
</footer>
</div>
https://jsfiddle.net/nesquimo/u1pq6xvq/

Answer 3

A bunch of ways you could do it. If you want the copyright in your list, you need to wrap it in an li as only an li can be a child of a ul. Then just give that li a width: 100% or flex-basis: 100% and set the parent to flex-wrap: wrap
.footer-nav {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-between;
list-style: none;
text-align: center;
text-transform: uppercase;
background-color: #333;
padding: 50px 50px 25px;
font-size: 80%;
}
.footer-nav li {
flex-grow: 100%;
}
.copyright {
flex-basis: 100%;
margin-top: 25px;
}
<div class="wrapper">
<ul class="footer-nav">
<li>About Us</li>
<li>blah</li>
<li>blah</li>
<li>blah</li>
<li class="copyright"><p>aaa</p></li>
</ul>
</div>