Html - Bullet points not appearing

BenBarker
August 29, 2023
92 views
1 vote
2 Answers

I’m doing a project for my course and I’m trying to do an about us section about the club but my list does not have bullet points does anyone know why?

This is what I have currently

/*Google Fonts*/

@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&family=Pacifico&display=swap');

/*wildcard selector*/

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}


/*General Styles*/

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  /*Generic project styles*/
  color: #3a3a3a;
  font-family: "lato", sans-serif;
}

h1 {
  font-family: "pacifico", sans-serif;
  color: #252525;
}


/*header*/

header {
  background-color: #ffffff;
  padding: 0 1rem;
  position: fixed;
  z-index: 10;
  width: 100%;
  box-shadow: 0 2px 2px #3a3a3a;
  display: flex;
  justify-content: space-between;
  white-space: nowrap;
}

header a {
  text-decoration: none;
  color: inherit;
}

h1 {
  font-family: "pacifico", sans-serif;
  color: #252525;
}

#menu {
  font-size: 110%;
  list-style-type: none;
}

#menu li {
  margin-bottom: 1em;
}

.active {
  border-bottom: 1px solid #3a3a3a;
}


/*Navbar styles with dropdown toggle*/

nav {
  position: absolute;
  background-color: #ffffff;
  width: 100%;
  box-shadow: 0 2px 2px #3a3a3a;
  padding: 0 1rem;
  left: 0;
  display: none;
  justify-content: space-between;
  align-items: baseline;
  top: 100%;
}


/*nav toggle*/

#nav-toggle:checked~nav {
  display: block;
}

#nav-toggle {
  display: none;
}

#nav-toggle-label {
  font-size: 2rem;
}


/*Main*/

main {
  margin-top: 55px;
  flex: 1 0 auto;
}


/*Hero*/

#hero {
  height: 600px;
  width: 100%;
  background: url("../assets/images/pexels-anastasia-shuraeva-8466017 (1).jpg") no-repeat center center/cover;
  position: relative;
}

#hero h2 {
  font-family: "pacifico", sans-serif;
}

#hero h2,
#hero h3 {
  color: #ffffff;
}

#cover-text {
  background-color: rgba(0, 0, 0, .7);
  font-size: 130%;
  position: absolute;
  bottom: 30px;
  width: 89%;
  min-height: 200px;
  padding-top: 40px;
  padding-left: 10px;
}


/*About us*/

#about {
  height: 600px;
  width: 100%;
  background-color: #252525;
}

#about-us {
  text-align: center;
}

#about-us h2,
#about-us h3 {
  color: #ffffff;
}

#about-us h2 {
  font-size: 170%;
}

#about-us {
  font-size: 130%;
}

#what-we-offer {
  padding-top: 2rem;
  color: #ffffff;
}


/*Footer*/

#social-media {
  text-align: center;
  padding: 20px 0;
  display: flex;
  justify-content: space-evenly;
  list-style-type: none;
}

#social-media i {
  font-size: 160%;
  padding: 5%;
}


/* Media query: tablets and larger (768px and up) */

@media screen and (min-width: 768px) {
  /* Header */
  nav {
    display: block;
    position: relative;
    box-shadow: none;
    width: fit-content;
    padding-top: 1.5rem;
  }
  #menu {
    display: flex;
  }
  #menu>li {
    padding-left: 1rem;
  }
  #nav-toggle-label {
    display: none;
  }
  #logo {
    font-size: 280%;
    line-height: 75px;
    margin: 0 0.5rem;
  }
  /*Main*/
  main {
    margin-top: 75px;
  }
  /*Hero*/
  #cover-text {
    width: 400px;
    right: 0;
  }
}


/*Media query: laptops and larger (992px and up)*/

@media screen and (min-width: 992px) {
  #menu a:hover {
    border-bottom: 1px solid #3a3a3a;
  }
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <!--Meta tags for search engines-->
  <meta name="description" content="Bens Chess Club. Chess club. Chess. Club for chess players. Kids chess club" />
  <meta name="keywords" content="Bens Chess Club, Chess. Chess club. Chess Players" />
  <!--Stylesheet-->
  <link rel="stylesheet" href="assets/style.css" />
  <!--Favicon-->
  <link rel="apple-touch-icon" sizes="180x180" href="assets/favicon_io/apple-touch-icon.png" />
  <link rel="icon" type="image/png" sizes="32x32" href="assets/favicon_io/favicon-32x32.png" />
  <link rel="icon" type="image/png" sizes="16x16" href="assets/favicon_io/favicon-16x16.png" />
  <link rel="manifest" href="assets/favicon_io/site.webmanifest" />
  <!--Title-->
  <title>Ben's Chess Club</title>
</head>

<body>
  <!--Header-->
  <header>
    <a href="index.html">
      <h1 id="logo">Ben's Chess Club</h1>
    </a>
    <input type="checkbox" id="nav-toggle" name="nav-toggle">
    <label for="nav-toggle" id="nav-toggle-label"><i class="fa-solid fa-bars" style="color: #17191c;"></i></i></label>
    <nav>
      <ul id="menu">
        <li><a href="index.html" class="active">Home</a></li>
        <li><a href="sign-up.html">Sign Up</a></li>
        <li><a href="contact-us.html">Contact us</a></li>
      </ul>
    </nav>
  </header>

  <!--Main-->
  <main>
    <!--Hero-->
    <section id="hero">
      <div id="cover-text">
        <h2>Bens Chess Club</h2>
        <h3>Join our chess club <br> for ages 6-16</h3>
      </div>
    </section>

    <!--About section-->
    <section id="about">
      <div id="about-us">
        <h2>About us</h2>
        <br>
        <h3>Learn how to play chess, make friends and have fun.</h3>
      </div>
      <div id="what-we-offer">
        <p>
          <h3>What we offer:</h3>
        </p>
        <ul id="offer-list">
          <li>
            <h3>Weekly meet-ups for different age groups</h3>
          </li>
          <li>
            <h3>A safe enviroment and non-toxic enviroment</h3>
          </li>
          <li>
            <h3>A fun and friendly place where it is easy to make lots of friends</h3>
          </li>
        </ul>
      </div>
    </section>
  </main>

  <!--Footer-->
  <footer>
    <ul id="social-media">
      <li><a href="https://en-gb.facebook.com/" target="_blank" rel="noopener" aria-label="Visit our facebook page (opens in new tab)"><i class="fa-brands fa-facebook" style="color: #2c56a0;"></i></a></li>
      <li><a href="https://twitter.com/home" target="_blank" rel="noopener" aria-label="Visit our Twitter page (opens in new tab)"><i class="fa-brands fa-x-twitter" style="color: #1a1c1e;"></i></i></a></li>
      <li><a href="https://www.instagram.com/" target="_blank" rel="noopener" aria-label="Visit our instagrampage (opens in new tab)"><i class="fa-brands fa-instagram" style="color: #640c61;"></i></a></li>
      <li><a href="https://www.youtube.com/" target="_blank" rel="noopener" aria-label="Visit our Youtube (opens in new tab)"><i class="fa-brands fa-youtube" style="color: #fd2626;"></i></a></li>
    </ul>
  </footer>
  <!--Font awsome kit-->
  <script src="https://kit.fontawesome.com/bf524db846.js" crossorigin="anonymous"></script>
</body>

</html>

Tags: css html

Answers

- EricOlsen
- August 29, 2023 at 3:14 pm
- 0 votes
0
Ive taken CBroe’s comment and made a small example to demonstrate for you. From Cbroe The "* selector has eliminated the default padding-left the ul would get from the user agent stylesheet, and the list item bullets would normally display in that space."

This snippet below show’s you what happens when we change the styling on the padding-left for the ul element. In the example we are cycling between 0px, 10px, 12px, and 20px
let button = document.getElementById("Change") let list = document.getElementById("menu") let disp = document.getElementById("pad") let style = ["0px","10px","12px", "20px"] let count = 0 button.addEventListener("click",()=>{ count = count + 1 list.style.paddingLeft = style[count%style.length] disp.innerHTML = `Current Padding-left: ${style[count%style.length]}` })

* { padding: 0; margin: 0; box-sizing: border-box; }

<button id="Change">Change Padding</button> <div id="pad">Current Padding-left: 0px</div> <ul id="menu"> <li><a href="index.html" class="active">Home</a></li> <li><a href="sign-up.html">Sign Up</a></li> <li><a href="contact-us.html">Contact us</a></li> </ul>
You’ll notice that at 10px and 12px we can begin to see the bullet points coming from the left side of the screen as space is made for them to appear

I hope this interactive example helps you understand whats going on better!
Login or Signup to reply.

The issue is styling of the list. Fix with this padding as seen in the CSS.

.what-we-offer .offer-list {
  /* cheesy thumbs up "icon" */
  list-style-type: "1F44D";
  display: grid;
  /* fix for the issue IN the question */
  padding-left: 3em;
  grid-template-columns: 1fr;
}

Other updates suggested:
Steps

Remove as many id’s as you can – if is is not specifically needed remove it
Style using classes not id’s. Use of an ID forces multiples in CSS like #hero-1, #hero-2 since they MUST be unique in the document; use id’s for code and things like for on labels etc.
Avoid using tags in CSS; especially singular like h1, ul etc.
- Excpetion: using tags like <header>, ‘, ` are more descriptive in nature and OK to style with methinks due to the specific commonly observed/use
Use good names for classes to avoid comments in CSS; less to parse and clarity is enhanced
Use class names like "my-container" in classes to enhance use clarity
Try not to use things like <br>; use classes and padding/margins instead to make style easier to achieve/modify
Remove unneeded comments like /*Main*/ main { – we can see it is main; if not rename "main" to be more clear
Don’t put comments in HTML unless something is very unusual; use good names/classes etc. like  <main>

@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&family=Pacifico&display=swap');
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

body {
  min-height: 100vh;
  /* use grid to get "fixed" placement */
  /* display: flex;
  flex-direction: column;
  */
  display: grid;
  grid-template-rows: 1fr auto 1fr;
  /*Generic project styles*/
  color: #3a3a3a;
  font-family: "lato", sans-serif;
  font-size: 16px;
  background-color: #0000FF22;
}

.logo-title {
  font-family: "pacifico", sans-serif;
  color: #252525;
}

header {
  background-color: #ffffff;
  padding: 0 1rem;
  /* no not this */
  /* position: fixed;*/
  /* why? */
  /* z-index: 10;*/
  width: 100%;
  box-shadow: 0 2px 2px #3a3a3a;
  display: flex;
  justify-content: space-between;
  white-space: nowrap;
}

header .logo-link {
  text-decoration: none;
  color: inherit;
}

.menu-container {
  font-size: 110%;
  list-style-type: none;
}

.menu-container .menu-item {
  margin-bottom: 1em;
}

.active {
  border-bottom: 1px solid #3a3a3a;
}

nav {
  /*Navbar styles with dropdown toggle*/
  position: absolute;
  background-color: #ffffff;
  width: 100%;
  box-shadow: 0 2px 2px #3a3a3a;
  padding: 0 1rem;
  left: 0;
  display: none;
  justify-content: space-between;
  align-items: baseline;
  top: 100%;
}

.nav-toggle {
  display: none;
}

.nav-toggle:checked~nav {
  display: block;
}

.nav-toggle-label {
  font-size: 2rem;
}

main {
  /* why?  margin-top: 55px;
*/
  flex: 1 0 auto;
  display: grid;
  grid-template-rows: 1fr auto;
  place-items: center;
}

.hero-container {
  /* huge adjusted for demo in "main" container
 height: 37.5em;
  width: 100%;
  */
  height: 10em;
  width: 15em;
  background: url("../assets/images/pexels-anastasia-shuraeva-8466017 (1).jpg") no-repeat center center/cover;
  /*  position: relative;*/
  border: solid 1px #00AAAA40;
  /* super center content in container */
  display: grid;
  place-items: center;
}

.hero-container .hero-title {
  font-family: "pacifico", sans-serif;
}

.hero-container .title {
  color: #ffffff;
}

.cover-text {
  background-color: rgba(0, 0, 0, .7);
  font-size: 130%;
  position: absolute;
  bottom: 30px;
  width: 89%;
  min-height: 200px;
  padding-top: 40px;
  padding-left: 10px;
}

.about-container {
  height: 600px;
  width: 100%;
  background-color: #252525;
}

.about-container .about-us {
  text-align: center;
}

.about-container .about-us .title {
  color: #ffffff;
}

.about-container .about-us .title-main {
  font-size: 1.7em;
}

.about-container .about-us .title-sub {
  font-size: 1.3;
}

.what-we-offer {
  padding-top: 2rem;
  color: #ffffff;
}

.what-we-offer .offer-list {
  /* cheesy thumbs up "icon" */
  list-style-type: "1F44D";
  display: grid;
  /* fix for the issue IN the question */
  padding-left: 3em;
  grid-template-columns: 1fr;
}

footer .social-media {
  text-align: center;
  padding: 20px 0;
  display: flex;
  justify-content: space-evenly;
  list-style-type: none;
}

footer .social-media i {
  font-size: 160%;
  padding: 5%;
}

@media screen and (min-width: 768px) {
  /* Media query: tablets and larger (768px and up) */
  /* Header */
  nav {
    display: block;
    position: relative;
    box-shadow: none;
    width: fit-content;
    padding-top: 1.5rem;
  }
  .menu-container {
    display: flex;
  }
  .menu-container>.menu-item {
    padding-left: 1rem;
  }
  .nav-toggle-label {
    display: none;
  }
  .logo {
    font-size: 280%;
    line-height: 75px;
    margin: 0 0.5rem;
  }
  main {
    margin-top: 75px;
  }
  .hero-container .hero-cover-text {
    width: 400px;
    right: 0;
  }
}

@media screen and (min-width: 992px) {
  /*Media query: laptops and larger (992px and up)*/
  .menu-container a:hover {
    border-bottom: 1px solid #3a3a3a;
  }
}

<header>
  <a class="logo-link" href="index.html">
    <h1 class="logo-title">Ben's Chess Club</h1>
  </a>
  <input type="checkbox" id="nav-toggle" name="nav-toggle" class="nav-toggle" />
  <label for="nav-toggle" id="nav-toggle-label" class="nav-toggle-label"><i class="fa-solid fa-bars" style="color: #17191c;"></i></i></label>
  <nav>
    <ul class="menu-container">
      <li class="menu-item"><a href="index.html" class="active">Home</a></li>
      <li lass="menu-item"><a href="sign-up.html">Sign Up</a></li>
      <li lass="menu-item"><a href="contact-us.html">Contact us</a></li>
    </ul>
  </nav>
</header>
<main>
  <section class="hero-container">
    <div class="hero-cover-text">
      <h2 class="hero-title-main title">Bens Chess Club</h2>
      <h3 class="hero-title-sub title">Join our chess club <br> for ages 6-16</h3>
    </div>
  </section>
  <section class="about about-container">
    <div class="about-us">
      <h2 class="title title-main">About us</h2>
      <br>
      <h3 class="title title-sub">Learn how to play chess, make friends and have fun.</h3>
    </div>
    <div class="what-we-offer">
      <p>
        <h3>What we offer:</h3>
      </p>
      <ul class="offer-list">
        <li>
          <h3>Weekly meet-ups for different age groups</h3>
        </li>
        <li>
          <h3>A safe enviroment and non-toxic enviroment</h3>
        </li>
        <li>
          <h3>A fun and friendly place where it is easy to make lots of friends</h3>
        </li>
      </ul>
    </div>
  </section>
</main>
<footer>
  <ul class="social-media">
    <li><a href="https://en-gb.facebook.com/" target="_blank" rel="noopener" aria-label="Visit our facebook page (opens in new tab)"><i class="fa-brands fa-facebook" style="color: #2c56a0;"></i></a></li>
    <li><a href="https://twitter.com/home" target="_blank" rel="noopener" aria-label="Visit our Twitter page (opens in new tab)"><i class="fa-brands fa-x-twitter" style="color: #1a1c1e;"></i></i></a></li>
    <li><a href="https://www.instagram.com/" target="_blank" rel="noopener" aria-label="Visit our instagrampage (opens in new tab)"><i class="fa-brands fa-instagram" style="color: #640c61;"></i></a></li>
    <li><a href="https://www.youtube.com/" target="_blank" rel="noopener" aria-label="Visit our Youtube (opens in new tab)"><i class="fa-brands fa-youtube" style="color: #fd2626;"></i></a></li>
  </ul>
</footer>
<!--Font awsome kit-->
<script src="https://kit.fontawesome.com/bf524db846.js" crossorigin="anonymous"></script>

Please signup or login to give your own answer.

Click here to cancel reply.

Html – Bullet points not appearing

Answers