CODEWITHSUNDEEP
htmlcss
Question3r
Question3r

Reputation: 3772

center unordered lists without container

I am trying to create a footer with unordered list elements. Below these lists I want to have a second div container with the copyright in it.

This is what I want to achieve

lists

And this is my code so far

.list {
  list-style: none;
  display: inline-block;
}

#imprintContent {
  border-bottom: 1px solid #656a70;
}
<div id="imprint">
  <div id="imprintContent">
    <ul class="list">
      <li>Company</li>
      <li>Street</li>
      <li>Location</li>
      <li>
        <a href="mailto:test">Mail</a>
      </li>
    </ul>

    <ul class="list">
      <li>Small text</li>
      <li>
        <a href="/privacy">Privacy</a>
      </li>
    </ul>
  </div>
  <div id="copyright">
    © Copyright
  </div>
</div>

How can I center these lists, place a small line below them (maybe a bottom border) and place the copyright below this border?

A free space should remain on the left and right. You can see a working example footer here

https://www.hashicorp.com/contact

Upvotes: 2

Views: 46

Answers (4)

Bj&#246;rn-Eric Abrahamsson
Bj&#246;rn-Eric Abrahamsson

Reputation: 1

This is a start. . . body * {...} is just a reset.

body * {
    margin: 0;
    padding: 0;
}
footer {
    max-width: 60%;
    margin: 0 auto;
}
li {
    list-style-type: none;
}
.lists {
    display: flex;
    margin-bottom: 2rem;
}
.lists__list {
    flex: 1 auto;
}
.footer__copyright {
    border-top: 1px solid black;
    padding-top: 2rem;
    text-align: center;
}
<footer>
    <div class="lists">
        <ul class="lists__list">
            <li>Company</li>
            <li>Street</li>
            <li>Location</li>
            <li>
                <a href="mailto:test">Mail</a>
            </li>
        </ul>
        <ul class="lists__list">
            <li>Small text</li>
            <li>
                <a href="/privacy">Privacy</a>
            </li>
        </ul>
    </div>
    <div class="footer__copyright">
        © Copyright
    </div>
</footer>

Upvotes: 0

Jorgsalas
Jorgsalas

Reputation: 11

Hi This problem can be easily solved with flexbox. 

#imprint{
  margin: 0% 20%; /*this make the free space to the sides, adjust the 20% to the desired number*/
}

#imprintContent{
  display: flex;
  justify-content: center;
  align-items: center;
}

#green{
  background: green;
}

#red{
  background: red;
}

#copyright{
  text-align: center;
}

.list{
  padding: 10%;
  margin: 10%;
}

.list > li{
  margin-top: 4%;
  margin-bottom: 4%;
}
<div id="imprint">
  <div id="imprintContent">
    <ul id="green" class="list">
      <li>Company</li>
      <li>Street</li>
      <li>Location</li>
      <li>
        <a href="mailto:test">Mail</a>
      </li>
    </ul>

    <ul id="red" class="list">
      <li>Small text</li>
      <li>
        <a href="/privacy">Privacy</a>
      </li>
    </ul>
  </div>
  <hr>
  <div id="copyright">
    © Copyright
  </div>
</div>

Upvotes: 1

Anil K.
Anil K.

Reputation: 251

You can do this 

#imprint { display:table; margin:0 auto; }

Upvotes: 0

Ali
Ali

Reputation: 666

if your issee is making footer center, just use text-align to center

.list {
  list-style: none;
  display: inline-block;
}

#imprintContent {
  border-bottom: 1px solid #656a70;
}

#imprint {
  text-align:center

}
<div id="imprint">
  <div id="imprintContent">
    <ul class="list">
      <li>Company</li>
      <li>Street</li>
      <li>Location</li>
      <li>
        <a href="mailto:test">Mail</a>
      </li>
    </ul>

    <ul class="list">
      <li>Small text</li>
      <li>
        <a href="/privacy">Privacy</a>
      </li>
    </ul>
  </div>
  <div id="copyright">
    © Copyright
  </div>
</div>

Upvotes: 2

Related Questions