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

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><a href="#">About Us</a></li>
              <li><a href="#">blah</a></li>
              <li><a  href="#"blah</a></li>  
              <li><a href="#">blah</a></li>

            <p class = "copyright">aaa</p>

    </ul>





</div>

I think you shouldn't put a `
` inside a `
` element.
– Alex - DJDB Apr 09 '17 at 16:43 — Alex - DJDB, Apr 09 '17 at 16:43

Michael Coker · Answer 1 · 2017-04-10T17:10:00.073

0

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><a href="#">About Us</a></li>
    <li><a href="#">blah</a></li>
    <li><a href="#">blah</a></li>
    <li><a href="#">blah</a></li>
    <li class="copyright"><p>aaa</p></li>
  </ul>
  
</div>

edited Apr 10 '17 at 17:10

answered Apr 09 '17 at 16:49

Michael Coker

52,626
5
64
64

all these solution works but copyright text is too close from the footer list items, when i give margin too the copyright element the footer grows too big. any solution [I don't want footer to grow but want distance between list-items and copyright text]. Thanks :) – user2228874 Apr 10 '17 at 10:24
@user2228874 you need to include these details in your OP. If you add margin to the copyright, remove any additional padding that creates from `.footer-nav`. I changed the `padding: 50px` on `.footer-nav` to `padding: 50px 50px 25px` and gave `.copyright` a `margin-top: 25px` – Michael Coker Apr 10 '17 at 17:11

score 0 · Answer 2 · answered Apr 09 '17 at 16:50

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><a href="#">About Us</a></li>
              <li><a href="#">blah</a></li>
              <li><a  href="#"blah</a></li>  
              <li><a href="#">blah</a></li>

    </ul>
                <p class = "copyright">aaa</p>





</div>

score 0 · Answer 3 · answered Apr 09 '17 at 16:50

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><a href="#">About Us</a></li>
              <li><a href="#">blah</a></li>
              <li><a  href="#"</a>blah</li>  
              <li><a href="#">blah</a></li>
    </ul>
     <p class="copyright">aaa</p>
</footer>
</div>

https://jsfiddle.net/nesquimo/u1pq6xvq/

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

3 Answers3