skip to Main Content

I’m pretty new to CSS and started to learn how to code it just a few days ago. Having experience with Photoshop, I’ve researched about its “Copy CSS” function, which is what I exactly wanted. Although I had to do some changes.

I’m using Adobe Dreamweaver to code both my HTML and CSS.

Here’s what I’ve designed on Photoshop and want it to look like:

Photoshop Design

Here’s what it actually looks like when viewing on the latest version of Chrome:

Html preview

I’m thinking most of the problems come from the sizes of the images not being set where I want it to, but as you can see, the foreground and the buttons look pretty different from my design. Here’s my code, starting with HTML and the CSS (since I can’t figure out how to paste both the HTML and CSS in two separate blocks, I’ll include the CSS right after the HTML:

@charset "UTF-8";
.Background {
  background-image: url("http://i.imgur.com/0T9Q95B.png");
  position: absolute;
  left: 0px;
  top: 0px;
  width: auto;
  height: auto;
  z-index: 1;
}

.Foreground {
  background-image: url("http://i.imgur.com/bAGM5wo.png");
  position: absolute;
  left: 468px;
  top: -25px;
  width: 986px;
  height: 1153px;
  z-index: 2;
}

.Button6.ButtonTxt {
  background-image: url("http://i.imgur.com/uJS8WOO.png");
  position: absolute;
  left: 1063px;
  top: 755px;
  width: 331px;
  height: 159px;
  z-index: 9;
  font-size: 50px;
  font-family: "Bebas Neue";
  color: rgb(255, 255, 255);
  line-height: 1.2;
  text-align: left;
  text-shadow: 0px 3px 7px rgba(0, 0, 0, 0.35);
  position: absolute;
}

.Button5.ButtonTxt {
  background-image: url("http://i.imgur.com/uJS8WOO.png");
  position: absolute;
  left: 529px;
  top: 755px;
  width: 331px;
  height: 159px;
  z-index: 8;
  font-size: 50px;
  font-family: "Bebas Neue";
  color: rgb(255, 255, 255);
  line-height: 1.2;
  text-align: left;
  text-shadow: 0px 3px 7px rgba(0, 0, 0, 0.35);
  position: absolute;
}

.Button4.ButtonTxt {
  background-image: url("http://i.imgur.com/uJS8WOO.png");
  position: absolute;
  left: 1063px;
  top: 449px;
  width: 331px;
  height: 159px;
  z-index: 7;
  font-size: 50px;
  font-family: "Bebas Neue";
  color: rgb(255, 255, 255);
  line-height: 1.2;
  text-align: left;
  text-shadow: 0px 3px 7px rgba(0, 0, 0, 0.35);
  position: absolute;
}

.Button3.ButtonTxt {
  background-image: url("http://i.imgur.com/uJS8WOO.png");
  position: absolute;
  left: 529px;
  top: 449px;
  width: 331px;
  height: 159px;
  z-index: 6;
  font-size: 50px;
  font-family: "Bebas Neue";
  color: rgb(255, 255, 255);
  line-height: 1.2;
  text-align: left;
  text-shadow: 0px 3px 7px rgba(0, 0, 0, 0.35);
  position: absolute;
}

.Button2.ButtonTxt {
  background-image: url("http://i.imgur.com/uJS8WOO.png");
  position: absolute;
  left: 1063px;
  top: 173px;
  width: 331px;
  height: 159px;
  z-index: 5;
  font-size: 50px;
  font-family: "Bebas Neue";
  color: rgb(255, 255, 255);
  line-height: 1.2;
  text-align: left;
  text-shadow: 0px 3px 7px rgba(0, 0, 0, 0.35);
  position: absolute;
}

.Button1.ButtonTxt {
  background-image: url("http://i.imgur.com/uJS8WOO.png");
  position: absolute;
  left: 529px;
  top: 173px;
  width: 331px;
  height: 159px;
  z-index: 4;
  font-size: 50px;
  font-family: "Bebas Neue";
  color: rgb(255, 255, 255);
  line-height: 1.2;
  text-align: left;
  text-shadow: 0px 3px 7px rgba(0, 0, 0, 0.35);
  position: absolute;
}
<body class="Background">
  <div class="Foreground">
    <button class="Button1 ButtonTxt" type="button">Button1</button>
    <button class="Button2 ButtonTxt" type="button">Button2</button>
    <button class="Button3 ButtonTxt" type="button">Button3</button>
    <button class="Button4 ButtonTxt" type="button">Button4</button>
    <button class="Button5 ButtonTxt" type="button">Button5</button>
    <button class="Button6 ButtonTxt" type="button">Button6</button>
  </div>
</body>

Hopefully some of you will have the patience to help me out, I just want to know what I’m doing wrong and how I can fix it, you don’t really need to fix my code, links with the information I need will be helpful too.

3

Answers


  1. Here you go, hopefully this can get you started.

    * {margin:0;padding:0;}
    body {
      background: navy;
      border: solid black;
      border-width: 4em 0;
      padding: 1em 0;
    }
    .Foreground {
      background: blue;
      margin: auto;
      max-width: 600px;
      width: 90%;
      padding: 3em 1em 0;
      overflow: auto;
      box-shadow: 0 5px 10px rgba(0,0,0,0.5);
    }
    button:nth-child(odd) {
      float: left;
      clear: left;
    }
    button:nth-child(even) {
      float: right;
    }
    button {
      margin: 0 0 3em;
      background: #09c;
      border: 0;
      color: #fff;
      text-transform: uppercase;
      padding: 2em;
      font-weight: bold;
      text-shadow: 0 2px 3px rgba(0,0,0,0.3);
      font-size: 1.5em;
    }
    
    @media (max-width: 500px) {
      button:nth-child(odd), button:nth-child(even) {
        float: none;
      }
      .Foreground {
        text-align: center;
      }
    }
    <html>
    
    <head>
      <meta charset="utf-8">
      <title>Index</title>
      <link href="CSS/index.css" rel="stylesheet" type="text/css">
    </head>
    
    <body class="Background">
      <div class="Foreground">
        <button class="Button1 ButtonTxt" type="button">Button1</button>
        <button class="Button2 ButtonTxt" type="button">Button2</button>
        <button class="Button3 ButtonTxt" type="button">Button3</button>
        <button class="Button4 ButtonTxt" type="button">Button4</button>
        <button class="Button5 ButtonTxt" type="button">Button5</button>
        <button class="Button6 ButtonTxt" type="button">Button6</button>
      </div>
    </body>
    
    </html>
    Login or Signup to reply.
  2. A simple flexbox should fix this easily. All you need is just add 4 flex properties to your .Foreground class and you should remove all the position: absolute, left and right properties from the buttons.

    HTML will remain the same

    CSS

    .Foreground {
      background-image: url("http://i.imgur.com/bAGM5wo.png");
      background-repeat: no-repeat;
      width: 986px;
      height: 1153px;
      z-index: 2;
      display: flex; //added
      flex-wrap: wrap; //added
      align-items: center; //added
      justify-content: space-around; //added
    }
    
    .Foreground {
      background-image: url("http://i.imgur.com/bAGM5wo.png");
      background-repeat: no-repeat;
      width: 986px;
      height: 1153px;
      z-index: 2;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-around;
    }
    .Button6.ButtonTxt {
      background-image: url("http://i.imgur.com/uJS8WOO.png");
      width: 331px;
      height: 159px;
      z-index: 9;
      font-size: 50px;
      font-family: "Bebas Neue";
      color: rgb(255, 255, 255);
      line-height: 1.2;
      text-align: left;
      text-shadow: 0px 3px 7px rgba(0, 0, 0, 0.35);
    }
    .Button5.ButtonTxt {
      background-image: url("http://i.imgur.com/uJS8WOO.png");
      width: 331px;
      height: 159px;
      z-index: 8;
      font-size: 50px;
      font-family: "Bebas Neue";
      color: rgb(255, 255, 255);
      line-height: 1.2;
      text-align: left;
      text-shadow: 0px 3px 7px rgba(0, 0, 0, 0.35);
    }
    .Button4.ButtonTxt {
      background-image: url("http://i.imgur.com/uJS8WOO.png");
      width: 331px;
      height: 159px;
      z-index: 7;
      font-size: 50px;
      font-family: "Bebas Neue";
      color: rgb(255, 255, 255);
      line-height: 1.2;
      text-align: left;
      text-shadow: 0px 3px 7px rgba(0, 0, 0, 0.35);
    }
    .Button3.ButtonTxt {
      background-image: url("http://i.imgur.com/uJS8WOO.png");
      width: 331px;
      height: 159px;
      z-index: 6;
      font-size: 50px;
      font-family: "Bebas Neue";
      color: rgb(255, 255, 255);
      line-height: 1.2;
      text-align: left;
      text-shadow: 0px 3px 7px rgba(0, 0, 0, 0.35);
    }
    .Button2.ButtonTxt {
      background-image: url("http://i.imgur.com/uJS8WOO.png");
      width: 331px;
      height: 159px;
      z-index: 5;
      font-size: 50px;
      font-family: "Bebas Neue";
      color: rgb(255, 255, 255);
      line-height: 1.2;
      text-align: left;
      text-shadow: 0px 3px 7px rgba(0, 0, 0, 0.35);
    }
    .Button1.ButtonTxt {
      background-image: url("http://i.imgur.com/uJS8WOO.png");
      width: 331px;
      height: 159px;
      z-index: 4;
      font-size: 50px;
      font-family: "Bebas Neue";
      color: rgb(255, 255, 255);
      line-height: 1.2;
      text-align: left;
      text-shadow: 0px 3px 7px rgba(0, 0, 0, 0.35);
    }
    <div class="Foreground">
    			<button class="Button1 ButtonTxt" type="button">Button1</button>
    			<button class="Button2 ButtonTxt" type="button">Button2</button>
    			<button class="Button3 ButtonTxt" type="button">Button3</button>
    			<button class="Button4 ButtonTxt" type="button">Button4</button>
    			<button class="Button5 ButtonTxt" type="button">Button5</button>
    			<button class="Button6 ButtonTxt" type="button">Button6</button>
    	</div>
    Login or Signup to reply.
  3. i hope this will suffice

    I tried also to make your code more flexible so you don’t have to repeat a lot of same css properties there.

      @charset "UTF-8";
    
      * {
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        margin: 0;
        padding: 0;
      }
    
      body {
        background-color: #024068;
      }
    
      .foreground {
        background-color: #03609B;
        width: 400px;
        margin: 0 auto;
        height: 500px;
      }
    
      button {
        background-color: #5FA4D0;
        font-size: 20px;
        text-transform: uppercase;
        color: #FFF;
        height: 60px;
        width: 40%;
        margin: 30px 10px;
        border: none;
        text-shadow: 0 2px 3px rgba(0,0,0, 0.2);
        -webkit-box-shadow: 1px 1px 5px 0 #333;
        box-shadow: 1px 1px 5px 0 #333;
      }
    
      button:nth-child(odd) {
        float: left;
        clear: left;
      }
      button:nth-child(even) {
        float: right;
      }
        <div class="foreground">
      			<button class="button1 ButtonTxt" type="button">Button1</button>
      			<button class="button2 ButtonTxt" type="button">Button2</button>
      			<button class="button3 ButtonTxt" type="button">Button3</button>
      			<button class="button4 ButtonTxt" type="button">Button4</button>
      			<button class="button5 ButtonTxt" type="button">Button5</button>
      			<button class="button6 ButtonTxt" type="button">Button6</button>
      	</div>
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search