0

Well, I made a file which will be used for website. You know, We have different device(pc, sell phone...)so, I used "weight" and "height" in CSS with "%"(I think, "px" is not good way.)

"weight" is didn't matter, But "height" had problem. height worked with "px", but didn't work with "%"

I guessed, reason of problem is background's height, So i fixed that But, it didn't work too. So, i fixed padding, margin, border... But, i don't find solution. I don't know what is problem and how can i fix it:(

ps. i use Brackets

[this is HTML5 code]

<!doctype html>
<html>
<head>
  <title>PIZZAchoice</title>
  <link rel="stylesheet" href="ChoicePizza.css">
  <meta charset="utf-8">
</head>
<body>

  <div class="company">
   i am tech
    </div>

  <div class ="cho1">
    <p></p>
  </div>
  <div class ="cho2">
    <p></p>
  </div>
  <div class ="cho3">
    <p></p>
  </div>
  <div class ="cho4">
    <p></p>
  </div>


  <div class = "next">
   next
    </div>

</body>
</html>

[this is CSS code]

.company{
    padding: 1px;
    width: 150px;
    margin-left:2px;
    font-size: xx-large;
    font-weight: 600;
    color: yellow;
}




.cho1, .cho2, .cho3, .cho4 {
  padding: 1px;
  width:   24%;
  height:  40%;
  margin-top: 10px;
  margin-left: 2px;
  margin-right: 2px;
  float:left;

  border-style:ridge;
  border-color:saddlebrown;
  border-width:3px;  
}

.cho1
{
    background-image: url('치즈피자.jpg');
     background-size: 200%;
    background-repeat:no-repeat;
}

.cho2
{
    background-image: url('야채피자.jpg');
     background-size: 207%;
    background-repeat:no-repeat;

}

.cho3
{
     background-image: url('시카고피자.jpg');
     background-size: 206%;
    background-repeat:no-repeat;
}

.cho4
{
    background-image: url('프리슈또.jpg');
     background-size: 
    background-repeat:no-repeat;
}


.next{
    padding: 1px;
    width: 100px;
    height: 50px;

    border-style:ridge;
    border-color:whitesmoke;
    border-width:2px;

    position: absolute;
    top: 90%;
    left: 92%;

    text-align : center;

    font-size: xx-large;
    font-weight: 600;

    background-color: orangered;
    color:white;


}

body{
    background-image: url('선택배경.jpg');
        background-size: 100%;
        background-repeat:no-repeat;
    background-attachment:fixed;
    background-position:center


}
Boris Park
  • 105
  • 1
  • 10
  • Welcome to Stack Overflow! Please clarify your specific problem or add additional details to highlight exactly what you need. As it's currently written, it’s hard to tell exactly what you're asking. – Paulie_D Oct 30 '18 at 15:44

1 Answers1

1

The parent elements need a height value. Give your html and body a height of 100%.

If the parent elements don't have a height value, there is no way for the child elements to know what the percentage means. "40% of what?"

Eric
  • 201
  • 1
  • 6