CODEWITHSUNDEEP
htmlcss
Adyy Pop
Adyy Pop

Reputation: 115

Positioning divs like table cells and rows

I am trying to make a little game to learn some javascript.

Ok, so I was using untill now a table for my content (image):

enter image description here

Now, what I am trying to do, is to use divs instead of table. But I want to position them to look similar to the image above. This is what i have now:

enter image description here

My code for the Lemonade stand div (its similar for the others):

<div style="background: url(images/texture.png); display: table; margin-left: auto; margin-right:auto; border: solid black 2px; padding: 10px">
  <div style="padding-bottom: 7px"><b><center>Lemonade stand</center></b></div>
  <div style="padding-bottom: 7px"><center><button id="countButton" style="padding: 2px;"><img src="images/lemonade.png" width="50px" height="50px" style="padding: 2px"></button></center></div>
  <div><b><font color="brown">Level:</font></b> <span id="displayLevel"> 1 </span> <img src="images/plus.png" id="buyLevel" width="20px" height="18px"></div>
  <div><b><font color="green">Production:</font></b> <span id="production"> 1 </span> $ </div>
  <div> <font style="font-size: 15px">(Prod. per click) </font> </div>
  <div><b><font color="red">Level price:</font></b> <span id="pretlevel"> 0 </span> $ </div>
</div>

I am beginner, trying to learn. Thanks!

Upvotes: 2

Views: 1351

Answers (6)

Anwar
Anwar

Reputation: 4246

.bloc {
  background: url(images/texture.png); 
  display: inline-block; 
  margin-left: auto; 
  margin-right:auto; 
  border: solid black 2px; 
  padding: 10px 
}

.bloc-title {
  padding-bottom: 7px;
  font-weight : bold;
  text-align : center;
}

.bouton-count {
  padding: 2px; 
}

.bloc-main-image {
  padding: 2px;
  width : 50px;
  height : 50px;
}

.bloc-level-name {
  font-weight : bold;
  color : brown;
}

.bloc-image-plus {
  width : 20px;
  height : 18px;
}

.bloc-production {
  font-weight : bold;
  color : green;
}

.bloc-prod-per-click {
  font-size : 15px; 
}

.bloc-level-price {
  color : red;
  font-weight : bold;
}

.custom-table {
  display : table;
  width : 100%;
}

.custom-cell {
  display : table-cell;
  vertical-align : middle;
}

.custom-cell-right {
  text-align : right; 
]
<div class="custom-table">
  <div class="custom-cell custom-cell-right">
    <div class="bloc">
      <div class="bloc-title">
        Lemonade stand
      </div>
      <div class="bloc-title">
        <button id="countButton" class="bouton-count">
          <img src="images/lemonade.png" class="bloc-main-image">
        </button>
      </div>
      <div>
        <span class="bloc-level-name">Level:</span>
        <span id="displayLevel">1</span>
        <img src="images/plus.png" id="buyLevel" class="bloc-image-plus">
      </div>
      <div>
        <span class="bloc-production">Production:</span>
        <span id="production">1</span>
        $ 
      </div>
      <div class="bloc-prod-per-click">
        (Prod. per click)
      </div>
      <div>
        <span class="bloc-level-price">Level price:</span>
        <span id="pretlevel"> 0 </span> $ </div>
      </div>
  </div>
  <div class="custom-cell">
    <div class="bloc">
      <div class="bloc-title">
        Lemonade stand
      </div>
      <div class="bloc-title">
        <button id="countButton" class="bouton-count">
          <img src="images/lemonade.png" class="bloc-main-image">
        </button>
      </div>
      <div>
        <span class="bloc-level-name">Level:</span>
        <span id="displayLevel">1</span>
        <img src="images/plus.png" id="buyLevel" class="bloc-image-plus">
      </div>
      <div>
        <span class="bloc-production">Production:</span>
        <span id="production">1</span>
        $ 
      </div>
      <div class="bloc-prod-per-click">
        (Prod. per click)
      </div>
      <div>
        <span class="bloc-level-price">Level price:</span>
        <span id="pretlevel"> 0 </span> $ </div>
      </div>
  </div>
</div>
<div class="custom-table">
  <div class="custom-cell custom-cell-right">
    <div class="bloc">
      <div class="bloc-title">
        Lemonade stand
      </div>
      <div class="bloc-title">
        <button id="countButton" class="bouton-count">
          <img src="images/lemonade.png" class="bloc-main-image">
        </button>
      </div>
      <div>
        <span class="bloc-level-name">Level:</span>
        <span id="displayLevel">1</span>
        <img src="images/plus.png" id="buyLevel" class="bloc-image-plus">
      </div>
      <div>
        <span class="bloc-production">Production:</span>
        <span id="production">1</span>
        $ 
      </div>
      <div class="bloc-prod-per-click">
        (Prod. per click)
      </div>
      <div>
        <span class="bloc-level-price">Level price:</span>
        <span id="pretlevel"> 0 </span> $ </div>
      </div>
  </div>
  <div class="custom-cell">
    <div class="bloc">
      <div class="bloc-title">
        Lemonade stand
      </div>
      <div class="bloc-title">
        <button id="countButton" class="bouton-count">
          <img src="images/lemonade.png" class="bloc-main-image">
        </button>
      </div>
      <div>
        <span class="bloc-level-name">Level:</span>
        <span id="displayLevel">1</span>
        <img src="images/plus.png" id="buyLevel" class="bloc-image-plus">
      </div>
      <div>
        <span class="bloc-production">Production:</span>
        <span id="production">1</span>
        $ 
      </div>
      <div class="bloc-prod-per-click">
        (Prod. per click)
      </div>
      <div>
        <span class="bloc-level-price">Level price:</span>
        <span id="pretlevel"> 0 </span> $ </div>
      </div>
  </div>
</div>

I put your css away and I used 2 div container to simulate a table behaviour.

Here I "packed" your bloc in 2 <div>, one with the CSS property display : table which render a table row, and the sub <div> with the property display : table-cell which render a table-cell.

Upvotes: 0

Dmitriy Borisov
Dmitriy Borisov

Reputation: 598

div will like as table if you add next styles:

display:table; to div table-analog

display:table-row; to div tr-analog

display:table-cell; to div td-analog;

<div style="display: table;">

<div style="display: table-row;">
<div style="background: url(images/texture.png); display: table-cell; margin-left: auto; margin-right:auto; border: solid black 2px; padding: 10px">
  <div style="padding-bottom: 7px"><b><center>Lemonade stand</center></b></div>
  <div style="padding-bottom: 7px"><center><button id="countButton" style="padding: 2px;"><img src="images/lemonade.png" width="50px" height="50px" style="padding: 2px"></button></center></div>
  <div><b><font color="brown">Level:</font></b>  <span id="displayLevel"> 1 </span> <img src="images/plus.png" id="buyLevel" width="20px" height="18px"></div>
  <div><b><font color="green">Production:</font></b>   <span id="production"> 1 </span> $ </div>
  <div> <font style="font-size: 15px">(Prod. per click) </font> </div>
  <div><b><font color="red">Level price:</font></b>   <span id="pretlevel"> 0 </span> $ </div>
</div>
<div style="background: url(images/texture.png); display: table-cell; margin-left: auto; margin-right:auto; border: solid black 2px; padding: 10px">
  <div style="padding-bottom: 7px"><b><center>Lemonade stand</center></b></div>
  <div style="padding-bottom: 7px"><center><button id="countButton" style="padding: 2px;"><img src="images/lemonade.png" width="50px" height="50px" style="padding: 2px"></button></center></div>
  <div><b><font color="brown">Level:</font></b>  <span id="displayLevel"> 1 </span> <img src="images/plus.png" id="buyLevel" width="20px" height="18px"></div>
  <div><b><font color="green">Production:</font></b>   <span id="production"> 1 </span> $ </div>
  <div> <font style="font-size: 15px">(Prod. per click) </font> </div>
  <div><b><font color="red">Level price:</font></b>   <span id="pretlevel"> 0 </span> $ </div>
</div>

Upvotes: 2

Peyman Mohamadpour
Peyman Mohamadpour

Reputation: 17944

You can use either display: table (which has some browser compatibility issues) and display: inline-block (which I preffer): 

<div style="background: url(images/texture.png);display:inline-block;width:45%; margin-left: auto; margin-right:auto; border: solid black 2px; padding: 10px">
  <div style="padding-bottom: 7px"><b><center>Lemonade stand</center></b></div>
  <div style="padding-bottom: 7px"><center><button id="countButton" style="padding: 2px;"><img src="images/lemonade.png" width="50px" height="50px" style="padding: 2px"></button></center></div>
  <div><b><font color="brown">Level:</font></b></td> <td> <span id="displayLevel"> 1 </span> <img src="images/plus.png" id="buyLevel" width="20px" height="18px"></div>
  <div><b><font color="green">Production:</font></b> </td> <td> <span id="production"> 1 </span> $ </div>
  <div> <font style="font-size: 15px">(Prod. per click) </font> </div>
  <div><b><font color="red">Level price:</font></b> </td> <td> <span id="pretlevel"> 0 </span> $ </div>
</div><div style="background: url(images/texture.png);display:inline-block;width:45%; margin-left: auto; margin-right:auto; border: solid black 2px; padding: 10px">
  <div style="padding-bottom: 7px"><b><center>Restaurant</center></b></div>
  <div style="padding-bottom: 7px"><center><button id="countButton" style="padding: 2px;"><img src="images/lemonade.png" width="50px" height="50px" style="padding: 2px"></button></center></div>
  <div><b><font color="brown">Level:</font></b></td> <td> <span id="displayLevel"> 1 </span> <img src="images/plus.png" id="buyLevel" width="20px" height="18px"></div>
  <div><b><font color="green">Production:</font></b> </td> <td> <span id="production"> 1 </span> $ </div>
  <div> <font style="font-size: 15px">(Prod. per click) </font> </div>
  <div><b><font color="red">Level price:</font></b> </td> <td> <span id="pretlevel"> 0 </span> $ </div>
</div>

Upvotes: 0

nelek
nelek

Reputation: 4312

Or using table, table-row, table-cell for display divs

div container isn't centered vertically, only horizontally... You can use, for example, margin:100px auto; ....

JSFiddle example (not centered vertically :( )

Upvotes: 0

Joel Almeida
Joel Almeida

Reputation: 8037

Well, you have different options here.

You can use inline-block as display.

You can use float: left with width: 40% for example.

So, for diversity here it is with floated divs.

Also, notice I've placed the css as an external thing so you can have a good base to really learn how to do things.

I've used class selectors, and if you don't know what it is I advice you to look for them. They are the basic of CSS.

.item {
  background: url(images/texture.png);
  border: solid black 2px;
  padding: 10px;
  width: 40%;
  float: left;
}
.line {
  padding-bottom: 7px;
}
.item-container {
  max-width: 300px;
}
<div class="item-container">
  <div class="item">
    <div class="line">
      <b>Lemonade stand</b>
    </div>
    <div class="line">
      <button id="countButton" style="padding: 2px;">
        <img src="images/lemonade.png" width="50px" height="50px" style="padding: 2px">
      </button>
    </div>
    <div><b>Level:</b><span id="displayLevel"> 1 </span> 
      <img src="images/plus.png" id="buyLevel" width="20px" height="18px">
    </div>
    <div><b>Production:</b><span id="production"> 1 </span> $</div>
    <div>(Prod. per click)
    </div>
    <div><b>Level price:</b><span id="pretlevel"> 0 </span> $</div>
  </div>
  <div class="item">
    <div class="line">
      <b>Lemonade stand</b>
    </div>
    <div class="line">
      <button id="countButton" style="padding: 2px;">
        <img src="images/lemonade.png" width="50px" height="50px" style="padding: 2px">
      </button>
    </div>
    <div><b>Level:</b><span id="displayLevel"> 1 </span> 
      <img src="images/plus.png" id="buyLevel" width="20px" height="18px">
    </div>
    <div><b>Production:</b><span id="production"> 1 </span> $</div>
    <div>(Prod. per click)
    </div>
    <div><b>Level price:</b><span id="pretlevel"> 0 </span> $</div>
  </div>
</div>

And I've placed both item inside item-container and you can manipulate the width of the parent to achieve a grid system if you desire.

Just a quick note also, if you use float look what is a clearfix. What is a clearfix?

Upvotes: 0

aahhaa
aahhaa

Reputation: 2275

DEMO http://jsfiddle.net/o7jarr8n/

HTML

<div class="row">
  <div class="box">1</div>
  <div  class="box">2</div>
</div>
<div class="row">
  <div  class="box">3</div>
  <div  class="box">4</div>
</div>

CSS

.row {
    margin: 0 auto;
    text-align:center;
    display:block; // change line

}
.box {
    display:inline-block; // same line
    background:red;
    width:100px; 
    height:50px;
    margin:5px;
}

inline-block, will make div next to each other

Upvotes: 0

Related Questions