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.
3
Answers
Here you go, hopefully this can get you started.
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 theposition: absolute
,left
andright
properties from the buttons.HTML will remain the same
CSS
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.