CODEWITHSUNDEEP
htmlcss
user6768630
user6768630

Reputation:

padding is not working properly?

    .side-bar{
        background-color: red; 
    }
    @media (min-width: 768px){
        .side-bar{
            z-index:10;
            position:absalute;
            width:220px;
            padding-top:60px;
            height:100%;
            top:0;
            position:fixed;

    }
    }
    @media (min-width: 768px){
        .top-left-part{
            width:220px;
            position:fixed;
            z-index: 11;
            top: 0;
        }
    }
    /*---------------top left part starts here------------*/
    .top-left-part{
        width:220px;
        float:left;
        background-color: #ffffff;
    }
    .top-left-image{
        float: left;
        height: 50px;
        width: 50px;
        padding-left: 1.3px;
        padding-right: 10px;
        padding-top: 10px;
    }
    .left-top-text{
        padding-top:300px;
        font-size: 30px;
       /* float: right;*/
        /*margin-left: 10px;*/
    }
    .text-admin{
        /*padding-left: 20px;*/

    }
    /*---------------top left part ends here--------------*/
<html>
    <head>
        <link rel="stylesheet" href="css/elite.css" type="text/css">
        <script src="js/elite.js">
        </script>
    </head>
    <body>
        <div id="top-bar">
            <div class="top-left-part">
                <span ><img src="img/elite-icon.jpg" class="top-left-image"> </span>
                <span class="left-top-text text-elite">elite </span>
                <span class="left-top-text text-admin">admin</span>
            </div>
        </div>
        <div id="bottom-part">
            <div id="left-side-bar" class="side-bar">

            </div>
            <div id="right-side-container">
            </div>
        </div>
    </body>
</html>

i'm not too experienced with css,that is why i' asking this question.in this css code there is a class named "left-top-text",and a "padding-top" property on this class,but which is not working for any values. can anyone help me to fix this problem?

Upvotes: 1

Views: 68

Answers (4)

Md Sifatul Islam
Md Sifatul Islam

Reputation: 854

might use float:left;

 .left-top-text{
      float:left;
      background:red;
        padding-top:300px;
        font-size: 30px;
    }

Upvotes: 0

joerideg
joerideg

Reputation: 1918

Since <span> is an inline element top and bottom padding do not get applied.

If you add display: inline-block; the padding will be applied as it would on a block element without removing the element from the text flow.

Read this article to get more information: https://hacks.mozilla.org/2015/03/understanding-inline-box-model/

Upvotes: 0

Sandip - Frontend Developer
Sandip - Frontend Developer

Reputation: 14689

.side-bar{
        background-color: red; 
    }
    @media (min-width: 768px){
        .side-bar{
            z-index:10;
            position:absalute;
            width:220px;
            padding-top:60px;
            height:100%;
            top:0;
            position:fixed;

    }
    }
    @media (min-width: 768px){
        .top-left-part{
            width:220px;
            position:fixed;
            z-index: 11;
            top: 0;
        }
    }
    /*---------------top left part starts here------------*/
    .top-left-part{
        width:220px;
        float:left;
        background-color: #ffffff;
    }
    .top-left-image{
        float: left;
        height: 50px;
        width: 50px;
        padding-left: 1.3px;
        padding-right: 10px;
        padding-top: 10px;
    }
    .left-top-text{
        padding-top:300px;
        font-size: 30px;
      display:block;
      float:left;
       /* float: right;*/
        /*margin-left: 10px;*/
    }
    .text-admin{
        /*padding-left: 20px;*/

    }
    /*---------------top left part ends here--------------*/
<html>
    <head>
        <link rel="stylesheet" href="css/elite.css" type="text/css">
        <script src="js/elite.js">
        </script>
    </head>
    <body>
        <div id="top-bar">
            <div class="top-left-part">
                <span ><img src="img/elite-icon.jpg" class="top-left-image"> </span>
                <span class="left-top-text text-elite">elite </span>
                <span class="left-top-text text-admin">admin</span>
            </div>
        </div>
        <div id="bottom-part">
            <div id="left-side-bar" class="side-bar">

            </div>
            <div id="right-side-container">
            </div>
        </div>
    </body>
</html>

Upvotes: 0

Lalji Tadhani
Lalji Tadhani

Reputation: 14169

add display:inline-block

.left-top-text {
    display: inline-block;/*add this property;*/
    font-size: 30px;
    padding-top: 300px;
}

Upvotes: 2

Related Questions