Condensing CSS

I have a web page that contains a DIV called “Content”. Within this DIV, I have 38 buttons that link to 38 different PDF files.

I presently have each button is codded as follows:


#button1{
          position: relative;
          left: 175px;
          top: 30px;
          width: 275px;
          padding: 10px;
          background-color: #cde;
          text-align: center;
          font-size: 18px;
          border: medium double #000000;
        }

Can I somehow place all the code someplace where it applies to all buttons with the exception of the button position code?

I would like the code for the 38 buttons to look like this and have the rest of the code only shown once:


#button1{
          position: relative;
          left: 175px;
          top: 30px;
        }

Edit:

Now that I think more about it, the only thing different about all the buttons is the position from the top. Is there any way I can move the position: and the left: code outside of the individual button code too?

Lawrence

The easiest way would be to create a button class that contains the generic css properties you want to assign, then have the id selectors to have the specific.

Your button would be something like:

<input type=“button” id=“button1” class=“button” text=“Enter” />

You’d then have something like this in the css:


.button{
          width: 275px;
          padding: 10px;
          background-color: #cde;
          text-align: center;
          font-size: 18px;
          border: medium double #000000;
        }
#button1{
          position: relative;
          left: 175px;
          top: 30px;
        }
#button2{
          position: relative;
          left: 375px;
          top: 30px;
        }

Dave,

Thank you very much.

I moved the “position” and 'left" to the .button code leaving me with just this code for the different buttons.


#button1{top: 30px;}
#button2{top: 40px;}
.......

I don’t know why I could not figure this out. I just had a mental block about it.

Lawrence