1 

 .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?

Improve this question

4 Answers 4

Reset to default
2

add display:inline-block

.left-top-text { display: inline-block;/*add this property;*/ font-size: 30px; padding-top: 300px; }
Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

tnx...i got the answer
0 

.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>

Improve this answer

Comments

0

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/

Improve this answer

Comments

0

might use float:left;

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

Comments