CODEWITHSUNDEEP
htmlcss
Hyunsoo Choi
Hyunsoo Choi

Reputation: 69

Adding a button to each boxes

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.

enter image description here

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.

Upvotes: 0

Views: 195

Answers (4)

Spasal
Spasal

Reputation: 43

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

Upvotes: 0

theomniaagency
theomniaagency

Reputation: 23

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.

Upvotes: 0

sinanspd
sinanspd

Reputation: 2734

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

Upvotes: 1

Abdul Ahmad
Abdul Ahmad

Reputation: 10021

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>

Upvotes: 0

Related Questions