http://fiddle.jshell.net/hutber/uAczq/ Is the easiest way to explain it.
/html
<div title="1%">
1%
<div class="background rating_90"></div>
</div>
//css
.rating {
display: block;
width: 100%;
height: 18px;
line-height: 18px;
border: 1px solid #7F7F7F;
position: relative;
text-align: center;
border-radius: 3px;
}
.rating .background.rating_90 {
width: 90%;
}
.rating .background {
height: 100%;
position: absolute;
top: 0;
left: 0;
content: "";
background-color: #75890C;
border-right: 1px solid #7F7F7F;
}
Currently, the text inside the will not be visible, instead .background sits in front of the text.
I don't want to add another element inside of the parent div
Use z-index: -1.
z-index can only be used on explicitly positioned elements. That means anything with position: relative; or position: absolute; can be positioned on the Z pane, or for a better understanding, the "depth" level within a page.
Do:
.rating .background {
z-index: -1;
/* The rest of your CSS */
}
You can also remove content: ''; as it has no effect on non-pseudo selectors.
See Fiddle here.
Firstly, you do not need the content property as this is not a pseudo element.
However, you need to set the z-index of the bg div
JSfiddle Demo
CSS (extract)
.rating .background {
z-index:-1; /* add this */
}
Related
I am trying to style some links with lines underneath using the :before pseudo element. The link element has some padding that I cannot change. I have set the before position to absolute to show the line, but as I understand, this means the padding of the link gets counted as part of the :before element width. I have tried using box-sizing: content-box; but the padding space still gets included.
What I trying to achieve is for the line to only go as far as the link text and not into the padding space.
HTML:
<div>
heya
what's up?
</div>
CSS:
a{
text-decoration: none;
color: black;
position: relative;
padding: 1em;
}
a::before {
content: "";
position: absolute;
width: 100%;
height: 2px;
bottom: 0;
background-color: #000;
}
jsfiddle
Thanks
use the css calc
as : width: calc(100% - 2em);
here is the fiddle : https://jsfiddle.net/hellooutlook/krgLeq6h/1/
You could use the left and right properties (matching the x-padding of your anchor) and drop the width:
a {
text-decoration: none;
color: black;
position: relative;
padding: 1em;
}
a::before {
content: "";
position: absolute;
height: 2px;
bottom: 0;
background-color: #000;
left: 1rem;
right: 1rem;
}
<div>
heya
what's up?
</div>
Do it with background and you will have better control:
a {
text-decoration: none;
color: black;
padding: 1em;
background:
linear-gradient(#000,#000)
bottom -0.5em center /* position */
/100% 2px /*width height */
no-repeat;
background-origin:content-box; /* this will consider only the content and not the padding */
}
<div>
heya
what's up?
</div>
I'm trying to emulate this effect via CSS:
The reason this is an issue is because it needs to be re-usable. The red underline's size should be dictated by the text length, but also overflow its container in a predictable manner, e.g.:
<div>
<h1>This</h1>
<h1>Cool</h1>
<h1>Effect</h1>
</div>
The red underline should extend outside the div by 10px on the left, and then also overflow the text itself by roughly 50px on the right. So, all told, the red line is +60 pixels wider than the text itself.
How can I achieve this effect without doing it manually each time? I've had no success with pseudo elements, and box-shadow won't extend on the left and right as I need it to.
Pseudo elements was the answer for me. Setting z-index on the :after element to get it positioned behind the parent element is a neat trick. The elements can't be block elements, but other than that it seemed straightforward.
html {
min-height: 100%;
}
body {
min-height: 100%;
background: linear-gradient(to bottom, #0b122f 0%, #17457d 100%);
padding: 20px;
}
h1 {
position: relative;
display: inline-block;
color: #fff;
font-family: sans-serif;
font-size: 100px;
font-weight: 300;
margin: 0;
}
h1:before {
content: "";
background: red;
height: .25em;
width: calc( 100% + 60px);
position: absolute;
bottom: .15em;
left: -10px;
z-index: -1;
}
<div>
<h1>This</h1>
<br />
<h1>Cool</h1>
<br />
<h1>Effect</h1>
</div>
use <h1><span>This</span></h1> make effect in span and adjust red box to use padding to were's you want :
h1 span {
position: relative;
font-size: 100px;
font-weight: 300;
margin: 0;
padding:0 0 0 20px;
}
h1 span::before {
content: "";
background: red;
height: .25em;
position: absolute;
bottom: .15em;
z-index: -1;
width: 100%;
left: 0;
}
like: https://jsfiddle.net/bdmpqkme/1/
All this examples mentioned above by lalit bhakuni and JasonB work really well, but only when you don't have any section with a background behind this underlined text.
The z-index: -1 will put the line you want behind the text like you want and also behind any other parent sections. In case any of these parent sections have a background, the line will be hidden (behind).
Other solution, not so clean, but solves all our problems is by adding an extra element inside of your heading:
HTML
<div class="div-with-background">
<h1><span>This</span></h1>
<br />
<h1><span>Cool</span></h1>
<br />
<h1><span>Effect</span></h1>
</div>
CSS
.div-with-background {
background-color: #333;
}
h1 {
position: relative;
display: inline-block;
color: #fff;
font-family: sans-serif;
font-size: 100px;
font-weight: 300;
margin: 0;
}
h1::before {
content: "";
background: red;
height: .25em;
width: calc( 100% + 60px);
position: absolute;
bottom: .15em;
left: -10px;
}
h1 > span {
position: relative;
}
In this case, we don't even need to use the z-index property.
I'd like the have a visual border, pipe or some other separator between the <span> elements in the following snippet. The trouble is that when they flow into a new line I end up with a border at the beginning of the line. How can i apply some kind of border between elements only when they are on the same line? I am completely open to changing the markup or taking another approach, however I've tried a number of things from flexbox to floats so far without success.
Stipulations:
I do not want to use javascript for this.
span content is dynamic so media queries won't work since I can't know the width of the elements or where they might break.
Is this even possible? I've already looked at this similar question but the answers there either use js or media queries.
The snippet below is a basic example and I've put the spans in a resizeable div only to demonstrate the flow problem at smaller widths.
.resizable {
resize: horizontal;
overflow: scroll;
border: 1px solid black;
height: 95vh;
box-sizing: border-box;
min-width: 120px;
max-width: 100%;
padding: 10px;
}
span {
font-size: 18px;
font-family: sans-serif;
}
span+span {
margin-left: 10px;
border-left: 2px solid #aaa;
padding-left: 10px;
display: inline-block;
}
<div class="resizable">
<span>dog</span><span>cat</span><span>elephant</span><span>potato</span><span>boston clam chowder</span>
</div>
You can fix this by using a container with the overflow hidden, and a negative margin to “drag” the elements at the beginning of the line outside of that overflow area.
(In this particular example the overflow:hidden is not really necessary, the outer scrolling element already takes care of that, but in different scenarios it might be needed.)
The 1.5em value used here is a bit of a magic number; you might want to replace it with a pixel value, since you’re using pixels for the border and its spacing from the text already - but in general, you should be able to find “working” values with a little bit of experimentation.
.resizable {
resize: horizontal;
overflow: scroll;
border: 1px solid black;
height: 95vh;
box-sizing: border-box;
min-width: 120px;
max-width: 100%;
padding: 10px;
}
.container {
margin-left: -1.5em;
width: calc(100% + 1.5em);
}
span {
font-size: 18px;
font-family: sans-serif;
margin-left: 10px;
border-left: 2px solid #aaa;
padding-left: 10px;
display: inline-block;
}
<div class="resizable">
<div class="container">
<span>dog</span><span>cat</span><span>elephant</span><span>potato</span><span>boston clam chowder</span><span>dog</span><span>cat</span><span>elephant</span><span>potato</span><span>boston clam chowder</span><span>dog</span><span>cat</span><span>elephant</span><span>potato</span><span>boston clam chowder</span>
</div>
</div>
Here's a pure CSS method that also works for elements that are centered.
The ::before and ::after of adjacent tiles are used to create a dark strip between the elements, then, the ::before of the container clips the lighter stuff out of existence.
Downsides - Getting the perfect color can be tricky as there's lots of maths involved.
section {
text-align: center;
position: relative;
}
section::before {
/* Clip light areas to pure white, leaving only boarders*/
mix-blend-mode: color-dodge;
background: #bbb;
z-index: -1000;
/* Fill Parent */
display: block;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
content: "";
}
span {
position: relative;
display: inline-block;
box-sizing: border-box;
padding: 10px;
}
/* Spans slightly overlap creating darker lines between elements*/
span::before {
left: -1px;
}
span::after {
right: -1px;
}
span::before, span::after {
position: absolute;
content: "";
display: block;
width: 10px;
height: 100%;
background: #555;
top: 0;
z-index: -1001;
mix-blend-mode: multiply;
}
<section>
<span>Hello</span><span>Cats</span><span>Fish</span><span>Dogs</span><span>Hello</span><span>Cats</span><span>Fish</span><span>Dogs</span><span>Hello</span><span>Cats</span><span>Fish</span><span>Dogs</span>
</section>
For some reason, this code does not work in Stackoverflow's JSFiddle. Here's a link to JSFiddle where it does work:
https://jsfiddle.net/mdsimmo/vwu7xbjp/2/
#border {
position: static;
z-index: 1;
width: 120px;
height: 120px;
margin-left: 92% ;
padding: 15px;
border-radius: 11px;
background: white;
opacity: 0.2;
}
#text {
margin-left: 93%;
z-index: 2;
color: white;
font-weight: bold;
}
<div id="border"></div>
<div id="text">Users online</div>
I can't post the image here, cuz I have less than 10 reputation, so try to imagine it please. I want to place it's "Users online" inside the border, how should I do this? Thanks.
I'm assuming you are trying to have an element with a semitransparent background.
Since you are using the opacity property on the element with an id of border.
The problem here is that z-index will not have any effect, if the position is set to static, which is the default value for div elements.
The other thing is, that you should be using a relative positioned parent to make your life easier and have more control over the elements since positioned elements will leave the normal document flow and result in new stacking order.
Here you can find good information on the the z-index property, stacking and the document flow.
This is one solution to your problem.
body {
background:black;
}
.holder {
position:relative;
}
#border {
position: absolute;
z-index:1;
right:0;
width: 120px;
height: 120px;
padding: 15px;
border-radius: 11px;
background: white;
opacity: 0.2;
}
#text {
position: absolute;
z-index:2;
right:0;
width: 120px;
height: 120px;
padding: 15px;
text-align: center;
color: white;
font-weight: bold;
}
<div class="holder">
<div id="border"></div>
<div id="text">Users online</div>
</div>
But i would actually try to solve this with a different approach, because i find the above solution a bit to complex and it involves to much positioning, so if all you need is a semitransparent background just make use of the background property with an rgba value. Here is an example.
.user-panel {
float:right;
height: 120px;
width: 120px;
padding: 15px;
border-radius: 11px;
/* fallback for browser that do not support rgba */
background: #ccc;
/* semitransparent background */
background: rgba(0, 0, 0, .2);
text-align: center;
color: white;
}
/* clear the float using the pseudo after element */
user-panel:after {
clear: both;
display: block;
visibility: hidden;
height: 0px;
}
<header>
<div class="user-panel">Users online</div>
</header>
Hope that helps.
Change
position: static;
to
position: absolute;
for #border. That way, border will be "removed from the flow" (i.e. other elements will ignore it). You may need to adjust the margin-left property for #text so it properly aligns.
Fiddle: https://jsfiddle.net/xzdmLt33/1/
I have a div with a dynamic width. In that div I'd like one block of content to be centered and another block of content to be floated to the right and to stay inline.
Not a great description, I know. Hopefully, you can get a better idea by looking here
I'd like the text to be inline with the flag.
Any suggestions?
Also I've realised my questions title is a bit horrible - suggestions for an edit welcome.
Is this what you are looking for: http://jsfiddle.net/tw16/sGC7d/ ?
.wrapper {
border: 1px solid #020202;
width:100%;
position: relative;
}
.numbers {
position: absolute;
right: 0;
top: 4px;
}
See: http://jsfiddle.net/thirtydot/zTNL8/2/
.wrapper {
border: 1px solid #020202;
position: relative
}
.flag {
display: block;
margin: 0 auto;
padding: 4px 0px;
width: 35px;
}
.flag img {
display: block
}
.numbers {
visibility: visible;
line-height: 23px;
position: absolute;
right: 0;
top: 0
}