CODEWITHSUNDEEP
htmlcsshyperlink
Dallas White
Dallas White

Reputation: 83

HTML to CSS link not working

The link in my html file is not working. I'm not sure if it's something else, though. When I run the file, nothing appears on the screen. There are supposed to be five rectangles all different colors(you might be able to figure that out). This is probably a really easy fix, but I am a beginner and am in need of some quick help. Here is my html:

<!DOCTYPE html>
<html>
    <head>
         <link rel="stylesheet" type="text/css" href="stylesheet.css">
    </head>
    <body>
        <div id="play"></div>
        <div id="create"></div>
        <div id="yellow"></div>
        <div id="green"></div>
        <div id="purple"></div>
    </body>
</html>

And here is my CSS:

#play {
    background-color:#FF0000;
    height: 70%;
    width: 60%;
}

#create {
    background-color:#0000FF;
    position: relative;
    height: 28%;
    width: 60%;
    top:2%;
}

#yellow {
    background-color:#E2BE22;
    height: 28%;
    width: 39%;
    position: relative;
    left: 61%;
    bottom: 26%;
}

#green {
    background-color:#008800;
    position: relative;
    height: 34%;
    width: 39%;
    left: 61%;
    bottom: 90%;
}

#purple {
    background-color:purple;
    position:relative;
    height: 34%;
    width: 39%;
    left: 61%;
    bottom: 160%;
}

Upvotes: 2

Views: 116

Answers (5)

Error404
Error404

Reputation: 744

Nothing is shown because your body has zero size:

Just add this to your css:

body {
  width: 100vw;
  height: 100vh;
}

JsFiddle

html, body {
    width: 100vw;
    height: 100vh;
}

#play {
    background-color:#FF0000;
    height: 70%;
    width: 60%;
}

#create {
    background-color:#0000FF;
    position: relative;
    height: 28%;
    width: 60%;
    top:2%;
}

#yellow {
    background-color:#E2BE22;
    height: 28%;
    width: 39%;
    position: relative;
    left: 61%;
    bottom: 26%;
}

#green {
    background-color:#008800;
    position: relative;
    height: 34%;
    width: 39%;
    left: 61%;
    bottom: 90%;
}

#purple {
    background-color:purple;
    position:relative;
    height: 34%;
    width: 39%;
    left: 61%;
    bottom: 160%;
}
        
<div id="play"></div>
<div id="create"></div>
<div id="yellow"></div>
<div id="green"></div>
<div id="purple"></div>

Upvotes: 2

jerry
jerry

Reputation: 745

Since you are giving height and width in percentage, you need to give height and width for body tag

For example:

body{
      height:100px; //either static or in percentage
      width:100px

    }

In css when you specify height or width in percentage, at least any one of its ancestor should have definite value for height/width

Upvotes: 1

z0mBi3
z0mBi3

Reputation: 1544

I think you would not have set the height of body and html. Add the following in you css

html, body{
  height: 100%;
  width: 100%;
}

Upvotes: 1

Randy
Randy

Reputation: 9819

Currently, your HTML and BODY element don't have a height. You set the elements to a percentage of zero, wich is always zero.

You need to set the height to a relative standard. Try to set your HTML and BODY height, then you can use the code you wanted.

html, body {
  height:100%;
}

#play {
    background-color:#FF0000;
    height: 70%;
    width: 60%;
}

#create {
    background-color:#0000FF;
    position: relative;
    height: 28%;
    width: 60%;
    top:2%;
}

#yellow {
    background-color:#E2BE22;
    height: 28%;
    width: 39%;
    position: relative;
    left: 61%;
    bottom: 26%;
}

#green {
    background-color:#008800;
    position: relative;
    height: 34%;
    width: 39%;
    left: 61%;
    bottom: 90%;
}

#purple {
    background-color:purple;
    position:relative;
    height: 34%;
    width: 39%;
    left: 61%;
    bottom: 160%;
}
        <div id="play"></div>
        <div id="create"></div>
        <div id="yellow"></div>
        <div id="green"></div>
        <div id="purple"></div>

Upvotes: 1

Cladiuss
Cladiuss

Reputation: 535

Set a height to your html and body element :

html, body { height: 100%; }

Upvotes: 1

Related Questions