Thu. Sep 21st, 2023

[ANSWERED] how to fix a ul code list in a html and css

By

Nov 18, 2022 css, html

Solution 1 :

Hopefully this will fix your issue but you have to add some extra css to make it exactly as per your needs

body {
  margin: 0;
  padding: 0;
  background: #ccc;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

@media (max-width: 600px) {
  ul {
    transform: scale(0.6);
  }
}

@media (min-width: 601px) and (max-width: 700px) {
  ul {
    transform: scale(0.7);
  }
}

@media (min-width: 701px) and (max-width: 800px) {
  ul {
    transform: scale(0.8);
  }
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  
}

ul li {
  margin: 0 40px;
  position: relative;
}

ul li p {
     position: absolute;
    top: -8px;
    left: -8px;
    z-index: 10;
    transform: rotate(-33deg);
}

ul li a .fa {
  font-size: 40px;
  color: #555;
  line-height: 80px;
  transition: 0.5s;
}

ul li a {
  position: relative;
  display: block;
  width: 80px;
  height: 80px;
  background: #fff;
  text-align: center;
  transform: perspective(1000px) rotate(-30deg) skew(25deg) translate(0,0);
  transition: 0.5s;
  box-shadow: -20px 20px 10px rgba(0, 0, 0, 0.5);
}

ul li a::before {
  content: "";
  position: absolute;
  top: 10px;
  left: -20px;
  height: 100%;
  width: 20px;
  background: #b2b2b2;
  transition: 0.5s;
  transform: rotate(0deg) skewY(-45deg);
}

ul li a::after {
  content: "";
  position: absolute;
  bottom: -20px;
  left: -10px;
  height: 20px;
  width: 100%;
  background: #e5e5e5;
  transition: 0.5s;
  transform: rotate(0deg) skewX(-45deg);
}

ul li a:hover {
  transform: perspective(1000px) rotate(-30deg) skew(25deg) translate(20px,-20px);
  box-shadow: -50px 50px 50px rgba(0, 0, 0, 0.5);
}

ul li:hover .fa {
  color: #fff;
}

ul li:hover:nth-child(1) a {
  background-color: #3b5999;
}

ul li:hover:nth-child(1) a::before {
  background-color: #2f477a;
}

ul li:hover:nth-child(1) a::after {
  background-color: #4e69a3;
}

ul li:hover:nth-child(2) a {
  background-color: #55acee;
}

ul li:hover:nth-child(2) a::before {
  background-color: #4489be;
}

ul li:hover:nth-child(2) a::after {
  background-color: #66b4ef;
}

ul li:hover:nth-child(3) a {
  background-color: #dd4b39;
}

ul li:hover:nth-child(3) a::before {
  background-color: #b03c2d;
}

ul li:hover:nth-child(3) a::after {
  background-color: #e05d4c;
}

ul li:hover:nth-child(4) a {
  background-color: #0077b5;
}

ul li:hover:nth-child(4) a::before {
  background-color: #005f90;
}

ul li:hover:nth-child(4) a::after {
  background-color: #1984bc;
}

ul li:hover:nth-child(5) a {
  background-color: #e4405f;
}

ul li:hover:nth-child(5) a::before {
  background-color: #b6334c;
}

ul li:hover:nth-child(5) a::after {
  background-color: #e6536f;
}

<script src="https://kit.fontawesome.com/9e3f22ff10.js" crossorigin="anonymous"></script>

<ul>
  <li>
  <p>facebook</p>
  <a href="#"><i class="fa fa-facebook" aria-hidden="true"></i></a></li>
  <li>
  <p>twitter</p>
  <a href="#"><i class="fa fa-twitter" aria-hidden="true"></i></a></li>
  <li>
  <p>google</p>
  <a href="#"><i class="fa fa-google-plus" aria-hidden="true"></i></a></li>
  <li>
  <p>linkedin</p>
  <a href="#"><i class="fa fa-linkedin" aria-hidden="true"></i></a></li>
  <li>
  <p>instagram</p>
  <a href="#"><i class="fa fa-instagram" aria-hidden="true"></i></a></li>
</ul>

Solution 2 :

Add p elements before and after the ul element and then style them with css:

body {
  background: #ccc;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  height: 100vh;
  gap: 50px;
}

p {
    text-align: center;
}

Here‘s a fully working example

body {
  margin: 0;
  padding: 0;
  background: #ccc;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  height: 100vh;
  gap: 50px;
}

p {
    text-align: center;
}

@media (max-width: 600px) {
  ul {
    transform: scale(0.6);
  }
}

@media (min-width: 601px) and (max-width: 700px) {
  ul {
    transform: scale(0.7);
  }
}

@media (min-width: 701px) and (max-width: 800px) {
  ul {
    transform: scale(0.8);
  }
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
}

ul li {
  margin: 0 40px;
}

ul li a .fa {
  font-size: 40px;
  color: #555;
  line-height: 80px;
  transition: 0.5s;
}

ul li a {
  position: relative;
  display: block;
  width: 80px;
  height: 80px;
  background: #fff;
  text-align: center;
  transform: perspective(1000px) rotate(-30deg) skew(25deg) translate(0,0);
  transition: 0.5s;
  box-shadow: -20px 20px 10px rgba(0, 0, 0, 0.5);
}

ul li a::before {
  content: "";
  position: absolute;
  top: 10px;
  left: -20px;
  height: 100%;
  width: 20px;
  background: #b2b2b2;
  transition: 0.5s;
  transform: rotate(0deg) skewY(-45deg);
}

ul li a::after {
  content: "";
  position: absolute;
  bottom: -20px;
  left: -10px;
  height: 20px;
  width: 100%;
  background: #e5e5e5;
  transition: 0.5s;
  transform: rotate(0deg) skewX(-45deg);
}

ul li a:hover {
  transform: perspective(1000px) rotate(-30deg) skew(25deg) translate(20px,-20px);
  box-shadow: -50px 50px 50px rgba(0, 0, 0, 0.5);
}

ul li:hover .fa {
  color: #fff;
}

ul li:hover:nth-child(1) a {
  background-color: #3b5999;
}

ul li:hover:nth-child(1) a::before {
  background-color: #2f477a;
}

ul li:hover:nth-child(1) a::after {
  background-color: #4e69a3;
}

ul li:hover:nth-child(2) a {
  background-color: #55acee;
}

ul li:hover:nth-child(2) a::before {
  background-color: #4489be;
}

ul li:hover:nth-child(2) a::after {
  background-color: #66b4ef;
}

ul li:hover:nth-child(3) a {
  background-color: #dd4b39;
}

ul li:hover:nth-child(3) a::before {
  background-color: #b03c2d;
}

ul li:hover:nth-child(3) a::after {
  background-color: #e05d4c;
}

ul li:hover:nth-child(4) a {
  background-color: #0077b5;
}

ul li:hover:nth-child(4) a::before {
  background-color: #005f90;
}

ul li:hover:nth-child(4) a::after {
  background-color: #1984bc;
}

ul li:hover:nth-child(5) a {
  background-color: #e4405f;
}

ul li:hover:nth-child(5) a::before {
  background-color: #b6334c;
}

ul li:hover:nth-child(5) a::after {
  background-color: #e6536f;
}

<script src="https://kit.fontawesome.com/9e3f22ff10.js" crossorigin="anonymous"></script>

<ul>
    <li>
        <p>Facebook</p>
        <a href="#"><i class="fa fa-facebook" aria-hidden="true"></i></a></li>
    <li>
        <p>Twitter</p>
        <a href="#"><i class="fa fa-twitter" aria-hidden="true"></i></a></li>
    <li>
        <p>Google</p>
        <a href="#"><i class="fa fa-google-plus" aria-hidden="true"></i></a></li>
    <li>
        <p>LinkedIn</p>
        <a href="#"><i class="fa fa-linkedin" aria-hidden="true"></i></a></li>
    <li>
        <p>Instagram</p>
        <a href="#"><i class="fa fa-instagram" aria-hidden="true"></i></a></li>
</ul>

Problem :

I need to center an unordered list, and add a text header and a footer while still keeping the list-items left aligned.

body {
  margin: 0;
  padding: 0;
  background: #ccc;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

@media (max-width: 600px) {
  ul {
    transform: scale(0.6);
  }
}

@media (min-width: 601px) and (max-width: 700px) {
  ul {
    transform: scale(0.7);
  }
}

@media (min-width: 701px) and (max-width: 800px) {
  ul {
    transform: scale(0.8);
  }
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
}

ul li {
  margin: 0 40px;
}

ul li a .fa {
  font-size: 40px;
  color: #555;
  line-height: 80px;
  transition: 0.5s;
}

ul li a {
  position: relative;
  display: block;
  width: 80px;
  height: 80px;
  background: #fff;
  text-align: center;
  transform: perspective(1000px) rotate(-30deg) skew(25deg) translate(0,0);
  transition: 0.5s;
  box-shadow: -20px 20px 10px rgba(0, 0, 0, 0.5);
}

ul li a::before {
  content: "";
  position: absolute;
  top: 10px;
  left: -20px;
  height: 100%;
  width: 20px;
  background: #b2b2b2;
  transition: 0.5s;
  transform: rotate(0deg) skewY(-45deg);
}

ul li a::after {
  content: "";
  position: absolute;
  bottom: -20px;
  left: -10px;
  height: 20px;
  width: 100%;
  background: #e5e5e5;
  transition: 0.5s;
  transform: rotate(0deg) skewX(-45deg);
}

ul li a:hover {
  transform: perspective(1000px) rotate(-30deg) skew(25deg) translate(20px,-20px);
  box-shadow: -50px 50px 50px rgba(0, 0, 0, 0.5);
}

ul li:hover .fa {
  color: #fff;
}

ul li:hover:nth-child(1) a {
  background-color: #3b5999;
}

ul li:hover:nth-child(1) a::before {
  background-color: #2f477a;
}

ul li:hover:nth-child(1) a::after {
  background-color: #4e69a3;
}

ul li:hover:nth-child(2) a {
  background-color: #55acee;
}

ul li:hover:nth-child(2) a::before {
  background-color: #4489be;
}

ul li:hover:nth-child(2) a::after {
  background-color: #66b4ef;
}

ul li:hover:nth-child(3) a {
  background-color: #dd4b39;
}

ul li:hover:nth-child(3) a::before {
  background-color: #b03c2d;
}

ul li:hover:nth-child(3) a::after {
  background-color: #e05d4c;
}

ul li:hover:nth-child(4) a {
  background-color: #0077b5;
}

ul li:hover:nth-child(4) a::before {
  background-color: #005f90;
}

ul li:hover:nth-child(4) a::after {
  background-color: #1984bc;
}

ul li:hover:nth-child(5) a {
  background-color: #e4405f;
}

ul li:hover:nth-child(5) a::before {
  background-color: #b6334c;
}

ul li:hover:nth-child(5) a::after {
  background-color: #e6536f;
}

<script src="https://kit.fontawesome.com/9e3f22ff10.js" crossorigin="anonymous"></script>

<ul>
  <li><a href="#"><i class="fa fa-facebook" aria-hidden="true"></i></a></li>
  <li><a href="#"><i class="fa fa-twitter" aria-hidden="true"></i></a></li>
  <li><a href="#"><i class="fa fa-google-plus" aria-hidden="true"></i></a></li>
  <li><a href="#"><i class="fa fa-linkedin" aria-hidden="true"></i></a></li>
  <li><a href="#"><i class="fa fa-instagram" aria-hidden="true"></i></a></li>
</ul>

when i added a header or or the text is written on the left side of the icons and cannot be moved on top or center i have entered them in an html tag and body tag also didn’t work

Comments

Comment posted by HackerFrosch

So you want to center the text but not the icons?

Comment posted by Tieson T.

Uh, that markup is not valid – is that what you’re actually trying to use, or just what you put together for the Stick Snippet?

Comment posted by Roka

@HackerFrosch yes ur right

Comment posted by Roka

@HackerFrosch i want to add a text and center it above the icons

Comment posted by HackerFrosch

Wow you just compied my answer

Comment posted by Malik Omer Javed

lol grow up man I didn’t even see your answer

Comment posted by Roka

what i meant i want to put a text above the icons in the middle of the page Social Media Accounts thats the text not above every icon

Comment posted by HackerFrosch

@Roka Oh well I edited my answer. Is that what you wanted?

By

Related Post

[ANSWERED] html – How to import/veiw STL files in a wordpress website?

Nov 20, 2022

[ANSWERED] javascript – How to handle repeating values in JQuery

Nov 20, 2022

[ANSWERED] java – How to send dropdown value to servlet NOT the option text

Nov 20, 2022