Adding a button to each boxes - html

Question

I'm not sure how I should go about this issue.
I'm fairly new to the front-end development so bear with me.
I have 4 boxes explaining the process step by step. I managed to
display them side by side by using the inline-block property. Now, I am trying to add 4 more small box looking buttons right on top of the boxes. Here is what I mean.
This is the index.html code.
<section>
<div class="how-text">
<h3>How to use SnappyApp</h3>
</div>
<div class="how-box">
<div class="idea-top">
</div>
<div class="idea">
</div>
<div class="scatch">
</div>
<div class="craft">
</div>
<div class="launch">
</div>
</div>
</section>
Here is the css code.
section {
height: auto;
padding-bottom: 100px;
background-color: #2c3e50;
}
.how-text {
text-align: center;
display: inline-block;
width: 100%;
color: white;
margin-top: 40px;
font-size: 30px;
letter-spacing: 3px;
}
.how-box {
text-align: center;
height: auto;
margin-top: 130px;
}
.idea {
background: url('img/idea.svg') center center no-repeat;
width: 200px;
height: 200px;
display: inline-block;
margin-right: 25px;
border: white solid medium;
}
.scatch {
background: url('img/scatch.svg') center center no-repeat;
width: 200px;
height: 200px;
display: inline-block;
margin-right: 25px;
border: white solid medium;
}
.craft {
background: url('img/craft.svg') center center no-repeat;
width: 200px;
height: 200px;
display: inline-block;
margin-right: 25px;
border: white solid medium;
}
.launch {
background: url('img/launch.svg') center center no-repeat;
width: 200px;
height: 200px;
display: inline-block;
margin-right: 25px;
border: white solid medium;
}
I also feel like my css code is very repetitive. If you have any suggestions, please help! I really appreciate all your help.
Thank you.

Answer 1

Here
https://jsfiddle.net/ds0md0xc/1/
EXPLANATION
All you need to do is to nest a child element in those divs. Since you specified them to be buttons. I used
<button>
element. But feel free to change it to a div if you want.
<div>
<button> </button>
</div>
For the css. It is going to be pretty simple just set width and height accordingly and it will position itself to the top.
button{
width:100%;
height: //whateveryouwant;
}
For the border, you dont need to have a second div. Just set the border bottom of the button as in fiddle
Hope this helps

Answer 2

here's a fiddle to demo
you should have a 'container' div to act as a parent and have both boxes as children :
<div class='super-box'>
<div class='button'> </div>
<div class='picture-box'> </div>
</div>
as far as your repetitive code, anything that repeats more than a few times (say 3 times) put it in a separate class and apply multiple classes to each div separated by a space
<div class='firstClass secondClass'></div>

Answer 3

Repeat your div called how-box. Here is a link to a fiddle that shows that: http://jsfiddle.net/eofct5ur/
Also your css could be cleaned up by doing something like this:
.idea, .scatch, .craft {
width: 200px;
height: 200px;
display: inline-block;
margin-right: 25px;
border: white solid medium;
}
then you would do:
.idea {
background: url('http://www.example.com/images/1.png');
}
and so forth for the other divs.

Answer 4

You can just wrap the button and the box inside 1 div.
In that manner they will be displayed one below another (set width: 100%).
So now you have 4 divs, with each inside a button and another div.
If you do then your inline-block on the first 4 divs they will be alined one next to another and inside you have your button and your text.
Greetings