.mainheading
{
font-weight: 700;
font-style: normal;
position: relative;
padding-bottom: 1.33333rem;
display: table;
line-height: 1.1;
}
.mainheading::after
{
content:'';
display: block;
position: absolute;
border-bottom: 2px solid #72bf44;
min-width: 110px;
width: 70%;
bottom: 0;
left: 0.2rem;
}
I am working on a reporting tool and I tried adding this css to the label
But the line-height is not working.
Suggest me where I went wrong
With your initial code you're basically creating a new HTML tag <Label> with an attribute Class. CSS can read the class and id with the selectors . and #. You can always select an attribute with the CSS attribute selector, in your case:
label[Class="mainheading"] {
/* style */
}
I recommend you stick with class and id instead of Class and ID, like so:
<label caption="Main Report" class="mainheading" id="lblDashboardsummary">Hello</label>
And in the CSS file just do
label.mainheading
.mainheading
{
font-weight: 700;
font-style: normal;
position: relative;
padding-bottom: 1.33333rem;
display: table;
line-height: 0;
}
.mainheading::after
{
content:'';
display: block;
position: absolute;
border-bottom: 2px solid #72bf44;
min-width: 110px;
width: 70%;
bottom: 0;
left: 0.2rem;
}
<label caption="Main Report" class="mainheading"
id="lblDashboardsummary">Your Text</label>
It is good coding practice to write HTML attributes in lowercase.
Hope this helps.
Related
I have a piece of React code:
<div className="Tooltip-Wrapper" onMouseEnter={showTooltip} onMouseLeave={hideTooltip}>
{children}
{active && <div className="Tooltip-Tip">{text}</div>}
</div>
and have these classes in a scss file:
.Tooltip-Wrapper {
display: inline-block;
position: relative;
}
.Tooltip-Tip {
position: absolute;
border-radius: 4px;
left: 50%;
transform: translateX(-50%);
padding: 6px;
color: var(--tooltip-text-color);
background: var(--tooltip-background-color);
font-size: 14px;
font-family: sans-serif;
line-height: 1;
z-index: 100;
white-space: nowrap;
}
but the divs do not have this styling on them. What could be the reason? Thanks!
It's probably to do with one of the properties not being available for divs.
don't write "classname" instead of it just write "class", then it might work.
I have the following CSS lines:
.liquid {
display: inline-block;
width: 25px;
height: 25px;
background: #ff8125;
margin-right: 15px;
}
<h2 class="liquid">Liquid</h2>
It should look like this:
http://imgur.com/B9vblUP
But instead looks like this:
http://imgur.com/8RQTkcO
What am i doing wrong here and how to get it exactly like the first pic?
I tried overflow hidden but that only shows Liquid in 25x25 on the block and the rest is not showing.
Any help is much appreciated.
Kind regards,
Majin Buu
I think you should create another element for the orange square instead of editing the class of the h2 element because the background attribute it will be applied on that element, so I would make something like:
<div class="liquid"></div>
<h2>Liquid</h2>
.liquid {
float: left;
width: 25px;
height: 25px;
background: #ff8125;
margin-right: 15px;
}
To have the square floating to the left of the element.
Check out CSS position!
.liquid {
display: inline-block;
position: absolute;
width: 25px;
height: 25px;
background: #ff8125;
}
h2 {
position: relative;
margin-left: 30px;
}
<div class="liquid"></div><h2>Liquid</h2>
Use html like this
<div class="bg_white">
<span class="liquid"> </span><h2>Liquid</h2>
</div>
CSS
.bg_white{background:white; padding:5px; width:auto; float:left;}
.liquid {
display: inline-block;
width: 25px;
height: 25px;
background: #ff8125;
margin-right: 15px;
float:left;
font-size:18px;
}
.bg_white h2{float:left; margin:0px;}
Pseudo element is better for this solution:
h2 {
background: #eee;
padding: 5px;
display:inline-block;
}
.liquid::before {
content:'';
display: inline-block;
vertical-align: middle;
width: 25px;
height: 25px;
background: #ff8125;
margin-right: 15px;
}
<h2 class="liquid">Liquid</h2>
You are styling the font part of the wanted result itself. You should either add an element for the orange square or use a pseudo element. This will get you in the right direction.
.liquid {
line-height: 1;
}
.liquid:before {
background: #ff8125;
content: ''; /* important for pseudo elements */
display: inline-block;
height: .9em;
margin-right: .45em;
position: relative;
top: .1em;
width: .9em;
}
<h2 class="liquid">Liquid</h2>
you can use below CSS for this if text is small and always in one line.
.liquid {
display: inline-block;
padding-left: 10px;
border-left: 25px solid #ff8125;
margin-right: 15px;
font: 25px/25px Arial;
font-weight: bold;
}
<h2 class="liquid">Liquid</h2>
I'm quite new on web development. I'm struggling with this question for a while. Now I post my question(s) here.
The souce code is as linked: Source Code
The HTML:
<div id="wrap">
<div id="main" class="clearfix">
<ul class="ranklist" id = "ranklist">
<li class="ranklistitem font-size-0">
<div class="itemnumber divinline"> <span class="helper"></span>1</div>
<div class="userprofile divinline"><img class="profileimg" src=""/></div>
<div class="nameandcredit divinline">
<div class="username">SteveSteveSteveSteveSteveSteveSteveSteveSteveSteveSteveSteveSteveSteveSteve</div>
<div class="credit">I'm description</div>
</div>
<div class="ranktitle divinline">Total:</div>
<div class="usercredit divinline">1000</div>
</li>
</ul>
</div>
</div>
The CSS:
* {
margin: 0;
padding: 0;
}
html, body {
height: 100%;
}
html {
background: #aaaaaa;
}
body {
-webkit-user-select: none; /* Chrome/Safari */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* IE10+ */
font-family: "PingHei", "Helvetica Neue", "Helvetica", Arial, "Microsoft YaHei";
font-weight: lighter;
}
#wrap {
min-height: 100%;
}
#main {
overflow-y: auto;
padding-bottom: 55px;
}
div, ul, p {
padding: 0px;
margin: 0px;
color: #ffd8d0;
}
.rewarddes
{
margin-top:10px;
display:block;
color:#ffdcc5;
overflow:hidden;
font-size:87.5%;
}
.ranklistitem {
height: 60px;
border-bottom: solid 1px #faa559;
font-size:87.5%;
}
.font-size-0 {
}
.divinline {
display: inline-block;
vertical-align: top;
padding: 0px;
margin: 0px;
}
.helper {
display: inline-block;
height: 100%;
vertical-align: middle;
}
.itemnumber {
line-height: 60px;
height: 60px;
background:#aa8800;
width: 6%;
text-align: right;
padding-right: 5px;
}
.userprofile {
line-height: 60px;
height: 60px;
width: 14%;
text-align: center;
vertical-align: middle;
background:#228845;
}
.profileimg {
height: 36px;
width: 36px;
vertical-align: middle;
border-top-left-radius: 50%;
border-top-right-radius: 50%;
border-bottom-left-radius: 50%;
border-bottom-right-radius: 50%;
border: solid 2px #fff;
}
.nameandcredit {
height: 60px;
width: 45%;
padding-left: 5px;
background:#342389
}
.username {
height: 55%;
text-align: left;
vertical-align:bottom;
overflow:hidden;
}
.credit {
height: 25%;
font-size: 66.7%;
text-align: left;
overflow:hidden;
color:#fdff6e;
}
.username:before, .credit:after {
content:'';
height:100%;
vertical-align:middle;
display:inline-block;
}
.iconaward {
vertical-align: middle;
height: 20px;
width: 14px;
}
.ranktitle {
line-height: 60px;
height: 60px;
width: 15%;
background:#cd8912;
text-align: right;
padding-right: 0.125em;
}
.usercredit {
line-height: 60px;
height: 60px;
background:#ff0000;
width: 20%;
text-align: right;
padding-right: 0.5em;
}
I have 2 questions based on the linked(or above) code.
The 5 container div's width was set as:
.itemnumber 6%, .userprofile 14%, .nameandcredit 45%, .ranktitle 15%, .usercredit 20%. So in total they are 100%. But as you see, the last one .usercredit is not in the same line and there're margins between each div, which is not what I want.
for the .username, I have set overflow:hidden, but as you see, when there's a large string, the .username was totally disappeared. If there're spaces in the string, it will only hide the overflow part and show the front part. I want to know what's the problem?
I know it's a little bit messed up of a lot code here. But my question is as listed as above. Thanks in advance for any kind suggestion.
For the spacing, you have two problems:
Implicit spaces between inline-block elements, and
Defining widths for elements with padding.
Regarding username overflow, you have one issue:
Default word wrapping behavior is to wrap the whole word to the next line. You need to change that behavior.
Let's take a look at each of them:
Implicit Spaces
The problem is that your divs have a display: inline-block; style. Elements displayed as an inline-block have any white-space between them converted to a single space.
See the "Fighting the Space Between Inline Block Elements" article on CSS Tricks for more information on how to overcome this.
One fix, for instance, is to have the li element that is wrapping the divs to have a 0 font-size, and reset a non-zero font size to its children, e.g. in your CSS:
.font-size-0 {
font-size: 0;
}
.font-size-0 > * {
font-size: 12px;
}
Any of the links outlined in the link above would work; for example, removing spaces and newlines between your closing tag and opening tag would do the same thing, without forcing you to set and reset the font-size.
Widths for elements with padding
In CSS, a width is defined by default for an element to include only its content area (box-sizing: content-box; by default) and not the padding. Set the box-sizing to border-box and you'll be all set.
E.g.
.font-size-0 > div {
box-sizing: border-size;
}
Properly wrapping a single word without spaces
See this StackOverflow answer to see how to address the issue. You will basically need to add this to your .username rule:
.username {
...
word-wrap:break-word;
}
Final Result jsFiddle
I want to create title that have an horizontal line going through them with the Title text appearing above the line, even though I believe I have correctly used the z-index rule it still does not work, this is the css I am using;
.heading {
border-bottom: 2px solid #222222!important;
text-align: center;
z-index: -1;
}
#sidebar .widget h3, #sidebar .widget .heading h3 {
color: #333333;
text-align: center;
z-index: 10;
margin-bottom: -8px;
position: relative;
}
The url is: http://crossfitblackboard.com/
z-index
works only if you are using a position
so you need also set the .heading to position: relative
Create a duplicate of the heading and line-through it.
HTML:
<h1 class="shadow">Your Awesome Heading</h1>
<h1>Your Awesome Heading</h1>
CSS:
h1{
position: absolute;
}
.shadow{
color: lightgrey;
text-decoration: line-through;
}
Here's the Fiddle: http://jsfiddle.net/39rwmjt6/1/
Let's keep the markup as simple as possible; We can do this with one element for your heading and the pseudo element :before with z-index: -1;.
Have an example!
HTML
<h1>Heading</h1>
CSS
h1 {
position: relative;
text-align: center;
font-size: 1em;
}
h1:before {
position: absolute;
content: '';
height: 2px;
background: #F00;
display: block;
width: 100%;
top: 0.6em;
z-index: -1;
}
I'm using basically this method here: https://coderwall.com/p/uer3ow to style my file input section but it doesn't seem to work in IE8; all I see is the corner of a huge button.
HTML:
<div class="upload_btn">
<span>Choose File</span>
<input type="file" name="item_file_upload_1" id="item_file_upload_1">
</div>
CSS:
.forms .upload_btn {
position: relative;
display: inline-block;
text-align: center;
width: 97px;
height: 27px;
font-weight: 300;
font-size: 16px;
line-height: 27px;
color: #393d59;
border: 2px solid #b9c0d6;
overflow: hidden;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
.forms .upload_btn > input[type="file"] {
position: absolute;
cursor: pointer;
top: 0;
right: 0;
font-size: 200px;
opacity: 0;
}
Ok, with a modification of this answer: https://stackoverflow.com/a/1948200/472501
I was able to apply the following CSS for IE8 which fixed the problem:
.forms .upload_btn > input[type="file"] {
filter: alpha(opacity=0);
}
There's a much better, cross-browser compliant, semantic, fully accessible and CSS-only way using the label technique. Great post here on how to implement: https://benmarshall.me/styling-file-inputs/