CODEWITHSUNDEEP
htmlcss
Chandrahas Balleda
Chandrahas Balleda

Reputation: 2822

CSS is not working as expected within the HTML file

The output is not appearing unless I provide text between the tag. Is there a way to fix this? Thanks in advance

HTML CODE

.Top {
        height: 20%;
        width: 80%;
        background: linear-gradient(#bc581e, #e27b36);
        border-radius: 50% 50% 0 0;
        box-shadow: inset -15px 0 #c15711;
        margin: 2% auto;
        position: relative;
    }
<div class="Top">top</div>

JSBIN url : CLICK HERE

Upvotes: 0

Views: 89

Answers (5)

onejeet
onejeet

Reputation: 1191

You haven't provided any height to parent elements. define the width and height of the parent or to the body tag.

body{
  height:100%;
}

OR Define a parent element and assign height to it.

<div class="wrapper">
  <div class="Top"></div>
</div>

OR

define the height in px for .Top class

Upvotes: 1

M&#246;Ħ&#228;m&#235;đ &#207;bŗ&#228;Ħ&#239;m
M&#246;Ħ&#228;m&#235;đ &#207;bŗ&#228;Ħ&#239;m

Reputation: 1

Try Changing your css like one below

 .Top {
     height: 20px;
     width: 80%;
     background: linear-gradient(#bc581e, #e27b36);
     border-radius: 50% 50% 0 0;
     box-shadow: inset -15px 0 #c15711;
     margin: 2% auto;
     position: relative;
  }

% here relates to % from parent . So when you try specifying height in % , it looks for parent height to calculate it's %. but in case of width(%) if parent is not present it would take a window width.

Upvotes: 0

לבני מלכה
לבני מלכה

Reputation: 16251

If you want to set height in % you have to define height to parent of element, In your case html/body are parents so set height:100%; to parents

html,body{
height:100%;
}
.Top {
        height: 20%;
        width: 80%;
        background: linear-gradient(#bc581e, #e27b36);
        border-radius: 50% 50% 0 0;
        box-shadow: inset -15px 0 #c15711;
        margin: 2% auto;
        position: relative;
    }
<div class="Top"></div>

Or set height in px not %

.Top {
        height: 20px;
        width: 80%;
        background: linear-gradient(#bc581e, #e27b36);
        border-radius: 50% 50% 0 0;
        box-shadow: inset -15px 0 #c15711;
        margin: 2% auto;
        position: relative;
    }
<div class="Top"></div>

Upvotes: 4

Pandiyan Cool
Pandiyan Cool

Reputation: 6565

approach 1:

Set actual size in px

height: 15px;

approach 2: add

body{
  height: 100vh;
}

On another note Poor fix:

<div class="Top">&nbsp;</div>

Upvotes: 1

Lalji Tadhani
Lalji Tadhani

Reputation: 14159

Add HTML & Body Height 100%

html,body{
  height:100%;
}

https://jsbin.com/ciqivicevu/1/edit?html,css,output

Upvotes: 1

Related Questions