CSS Help

• 

  jenniferbapties · Member · Feb 18, 2017 at 4:53 pm

  • Copy link
  • Add topic to favorites

  Hello. I’ve been trying to widen and adjust color, but for some reason it’s not working.

  Here is the code is:

  }
  element {
  }
  #buttons ul li#button {
  color: 85d0d0;
  width: 200px;
  height: 54px;
  padding: 54px;
  float: center;
  margin-left: 3px;
  overflow: hidden;

  The blog I need help with is: (visible only to logged in users)

• 

  kathrynwp · Staff · Feb 20, 2017 at 7:49 pm

  • Copy link

  There are a couple of problems with that code. You’re missing the # before the colour code, as well as a closing curly brace, and “center” is not a float value. As well, the first 3 lines are not needed.

  This is valid CSS:

  #buttons ul li#button {
    color: #85d0d0;
    width: 200px;
    height: 54px;
    padding: 54px;
    margin-left: 3px;
    overflow: hidden; 
  }

  That said, I see a few problems with the button elements you’ve added to your site:

  <li id="button" class="button">
  <li id="button" class="button">
  <li id="button" class="button">

  An ID can only be used once per page, but you’ve used “button” three times. You’ve also used the same word for the class, which is confusing. You probably don’t need an ID on each element if you want them all to look the same, so I would remove them and just keep the class. If you do want to style them differently, you can call them button1, button2, button3 so they have different IDs.

  You can target all three buttons with this:

  li.button {
    width: 200px;
    height: 54px;
    padding: 54px;
    margin-left: 3px;
    overflow: hidden; 
  }

  To change the colour of the text within the buttons, you’ll need to target a more specific element, since they are links:

  li.button a {
   color: #85d0d0;
  }

  You can then remove all the inline CSS you have twice on each button:

  <span style="color:#434545;">

  Let me know how it goes.