My buttons are not spacing

Hello!

I have an isue ad this website is due for really soon at school. I have three buttons and in the css, i clearly set a margin and asize etc etc but it’s listening to none of the CSS (the class is .sidebar button). Here’s the full code, please please help, no one knows from the people i asked to

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>MaThé</title>


    <!--By manouna-->
<!--font-->

  <style>

      * { padding: 0; margin: 0;}

      

      body {
          background-color: #E2EBDF;
          overflow-x: hidden;

      }

      @font-face {
          font-family: 'Champagne & Limousines';
          src: url('/fonts/Champagne & Limousines.eot');
          src: url('/fonts/Champagne & Limousines.woff2') format('woff2'),
               url('/fonts/Champagne & Limousines.woff') format('woff'),
               url('/fonts/Champagne & Limousines.ttf') format('truetype'),
               url('/fonts/Champagne & Limousines.svg#Champagne & Limousines') format('svg'),
               url('/fonts/Champagne & Limousines.eot?#iefix') format('embedded-opentype');

        font-weight: normal;
        font-style: normal;
  }

      .bigtxt {
          font-size: 100px;
          font-family: 'Champagne & Limousines';
          color: inherit;
      }

      .normaltext {
          font-family: Baskerville,Baskerville Old Face,Hoefler Text,Garamond,Times New Roman,serif; 
      }


      /*CSS du iframe et du sidebar*/

      
      .container img {   /*bannière*/
            width: 100%;
            max-height: 250px;
      }

      .bigtxt {
            font-size: 70px;
      }

      .flex-container {  /* flex pour le layout (iframe) */
            display: flex;
            width: 100%;
            padding: 0px;
            flex-wrap: nowrap;
      }

       .sidebar { /* aussi flex, mais flex-direction: column; pour que les boutons soient verticaux*/
            display: flex;
            flex-direction: column;
            height: 710px;
            justify-content: center;
            width: 30%; /*réserver l'autre 70% du container au iframe*/
            align-items: center; /*Boutons*/
            flex-wrap: nowrap;
            align-content: space-around;
            
            

       .sidebar button {
            margin: 20px; /* marge de 30px entre les boutons */
            width: 70px;
            height: 40px;
            max-height: 40px !important;
            max-width: 67px !important; 
            background-color: #F5FAD2;
            text-align: center;
            font-size: 24px;
            display: block;

            @font-face {
                font-family: 'Champagne & Limousines';
                  src: url('/fonts/Champagne & Limousines.eot');
                  src: url('/fonts/Champagne & Limousines.woff2') format('woff2'),
                  url('/fonts/Champagne & Limousines.woff') format('woff'),
                  url('/fonts/Champagne & Limousines.ttf') format('truetype'),
                  url('/fonts/Champagne & Limousines.svg#Champagne & Limousines') format('svg'),
                  url('/fonts/Champagne & Limousines.eot?#iefix') format('embedded-opentype');

                font-weight: normal;
                font-style: normal;
            
      }
   
       iframe {

            width: 70%;  /* le iframe prendra 70% du 100% de la largeur du .flexbox container */
            
      }

  </style>


</head>

<body>



    <div class="container">
        <img src="images/bannersite.png" alt="Banner" style="width:100%;">
        
        <div class="bigtxt" style="left: 100px; top: 70px; position: absolute;">
            <span style="color: #B3D1B3;">Ma</span><span style="color: #404040;">Thé</span>
        </div>
    </div>



    <div class="flex-container"> <!-- la sidebar et le iframe seront dedans -->
       
        <div class="sidebar">
            <button>Button</button>

            <button>Button</button> 

            <button>Button</button>
        </div>
        

        
        <iframe src="accueil.html" frameborder="0" style="border: none; width: inherit; height: 710px;">
        </iframe>

    </div>


</body>
</html>

Hey there @pink_manouna.

There is an error I see in your code. However given that this is school project, your teacher may not approve if you are given the answer from someone else.

it’s a free topic project, so he doesn’t care. it’s not a question about buttons

First thing to do is move all the @ rules to the top of the style sheet. They should happen first. Second thing would be to wrap all font names in quotes if there is any white space. I suspect this was hinted to by @8-bit-gaming as the ‘error’. Third, I would recommend against using universal selector rules, especially if this is a dynamic page. It adds way too much overhead for the little it accomplishes.

1 Like

i used the unviersal selector so the banner has 0 margin because else it wasnt working. the @ rule is only in the places where I want it though because I wanna use other fonts too, how can I do that if it’s first?

also wym by wrapping quotes Ive already put the font names in quotes, sorry I’m confused as to what you meant, but the problem here is only that the CSS in .sidebar button isn’t showing up. thats like the only thing im struggling with right now and can’t get past it

I removed the universal selector. it made my buttons a bit bigger for some reason. Thanks for the advice

If you want zero margin and padding then add the property as applies.

The @ rule only imports the font into the namespace. It is not meant to appear in a selector rule. Load all the fonts, first, then apply them as desired.

.normaltext {
  font-family: Baskerville, "Baskerville Old Face", "Hoefler Text", Garamond, "Times New Roman", serif; 
}

Actually the error I hinted at involved curly brackets, as that was what I saw pertaining to the styles not working on the buttons.

@pink_manouna If you haven’t already, try counting how many opening brackets there are vs closing.

1 Like