CSS style not looking far off from what I want - Photoshop

Azazel
February 21, 2017
155 views
2 votes
3 Answers

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:

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

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.

Tags: css html

Answers

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>

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>

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>

Please signup or login to give your own answer.

Click here to cancel reply.

CSS style not looking far off from what I want – Photoshop

Answers