This question already has answers here:
How do I debug CSS calc() value?
(2 answers)
Closed 10 months ago.
I have a div element that I want to put a button in, and I want to use the calc() function to move the button down relative to the position of that div element, but it returns as an "Invalid property value" according to chrome dev tools.
#rArrow {
top: calc(inherit + 80px);
height: 76px;
padding: 8px;
position: absolute;
text-align: center;
width: 28px;
}
calc() is suppose to calculate using a mathematical expression like -, +, * or /. According to your problem the inherit keyword can only exist alone as a value in a property declaration. It cannot be used with functions like calc() either.
The Real Problem
It's already been mentioned from previous answers (fadzrinmadu and Samitha Wijesekara) why inherit isn't a valid value for calc(). I will address your actual problem that lead you to try to adjust the top property in the first place. I'm assuming that the distance between the top of the <button> and the top of the containing <div> (<menu> in example) was not 80px.
The Explanation
A tag that has position: absolute measures all of it's positions (top, bottom, right, and left) in relation to it's nearest ancestor tag that has position: relative. If there's no ancestor tag with position: relative, then the distance is set between the edge of the page and the edge of the tag with position: absolute.
The Solution
Add position: relative to the containing <div>
In the example below there are two <menu> tags, each with a button.
The <menu> on the left has position: relative
The <menu> on the right has position: static (that's default and it's the same as not having position at all).
/* ✳️ Most Relevant */
/* For Demo Only */
main {
display: flex;
justify-content: center;
align-items: center;
}
menu {
position: relative; /* ✳️ */
width: 84px;
height: 236px;
border: 1px dashed tomato;
}
/* For Demo Only */
.static {
position: static;
}
.rArrow {
position: absolute; /* ✳️ */
top: 80px; /* ✳️ */
width: 28px;
height: 76px;
padding: 8px;
font-size: 3rem;
text-align: center;
}
/* Optional */
.rArrow::before {
content: '▶';
display: block;
margin: 2.5px 0 0 -9px;
color: magenta;
transform: scaleY(2) scaleX(0.5);
}
/* For Demo Only */
b {
display: block;
width: 12px;
height: 80px;
font-size: 3rem;
text-align: center;
}
/* For Demo Only */
b::before {
content: '⇕80px';
display: block;
margin: 10px 0 0 0;
font-family: Consolas;
color: #930;
transform: scaleY(2) scaleX(0.5);
}
/* For Demo Only */
.offset {
margin-top: -24px
}
<main>
<menu>
<b><!--For Demo Only--></b>
<button class='rArrow'></button>
</menu>
<menu class='static'>
<b class='offset'>
<!--For Demo Only-->
</b>
<button class='rArrow'></button>
</menu>
</main>
When you use "initial" value top/left/right/bottom it means the value becomes "auto". the calc() function in css only accepts values "length", "frequency", "angle", "time", "percentage", "number", or "integer" is allowed.
ref : CSS Calc()
Related
started to learn HTML and CSS, I want 4 blocks, 2 centred and 1 on each side, left and right. And if resize the window the block distance between the outer and inner blocks varies and the borders never cut each other
this is the full css code, I have the feeling I did this way too complicated.. I mean it works but yeah..
section {
display: inline-block;
position: relative;
width: 100vw;
height: 100vw;
background-color: blue;
}
.hm {
display: inline-block;
position: fixed;
top: 50%;
padding: 20px;
margin: 20px;
border: 10px solid yellow;
width: 60px;
height: 60px;
transform: translateX(-25%); translate: 10px;
}
.hm0 {
display: inline-block;
position: fixed;
top: 50%;
left: 50%;
padding: 20px;
margin: 20px;
border: 10px solid red;
width: 60px;
height: 60px;
transform: translate(-20px);
}
.hm1 {
display: inline-block;
position: fixed;
top: 50%;
left: 50%;
padding: 20px;
margin: 20px;
border: 10px solid rgb(211, 208, 208);
width: 60px;
height: 60px;
transform: translate(-100%); translate: -20px;
}
.hm2 {
display: inline-block;
position: fixed;
top: 50%;
right: 0;
padding: 20px;
margin: 20px;
margin-left: auto;
margin-right: 0;
border: 10px solid rgb(255, 0, 225);
width: 60px;
height: 60px;
}
<body>
<section>
<div class="hm"></div>
<div class="hm0"></div>
<div class="hm1"></div>
<div class="hm2"></div>
</section>
</body>
I am not sure if this is what you are going for, but I have attempted to recreate it with Flexbox.
First, I wrapped the blocks that should be in the center in another div as follows:
<section>
<div class="hm box"> </div>
<div class="center">
<div class="hm0 box"> </div>
<div class="hm1 box"> </div>
</div>
<div class="hm2 box"></div>
</section>
I also added a class box that will contain the height and width of each box.
With that, I styled them like so:
section {
display: flex;
justify-content: space-between;
align-items: center;
width: 100vw;
height: 100vw;
background-color: blue;
}
.center {
display: flex;
}
.hm {
border: 10px solid yellow;
}
.hm0 {
border: 10px solid red;
}
.hm1 {
border: 10px solid rgb(211, 208, 208);
}
.hm2 {
border: 10px solid rgb(255, 0, 225);
}
.box {
width: 60px;
height: 60px
}
The most important styles concerning the layout are here:
section {
display: flex;
justify-content: space-between;
align-items: center;
width: 100vw;
height: 100vw;
background-color: blue;
}
display: flex;: aligns all blocks horizontally(except the blocks in the .center div, because they are not the section element direct children)
justify-content: space-between;: this pushes the first and last blocks to the edges of the section element, leaving the center div elements in the center.
align-items: center;: aligns all the horizontal blocks in the center of the section element.
Now since the blocks in the center div are not direct descendants of section element, I also used display:flex to align them horizontally:
.center {
display: flex;
}
To learn more about flexbox and its properties, check out flexboxfroggy
You can checkout the demo of the code here:
https://jsfiddle.net/stanulilic/s7oh4nv9/
To re-write your posted CSS in a more concise form leads us to the following, explanatory comments are in the CSS:
/* this is a personal style or affectation that I tend to list
CSS properties alphabetically, that way if you're looking to
see if a property is set I know where to find it, and if it's
not where I expect it to be I know it hasn't been set on that
element/selector. This is a personal style, it's not mandatory
it's probably not even 'best-practice,' but you'll help yourself
if you pick a particular approach and then stick with it: */
section {
background-color: blue;
display: inline-block;
height: 100vw;
position: relative;
width: 100vw;
}
/* the following selector matches the four <div> elements within the
<section> element, and the child combinator (the '>') prevents the
selector matching any <div> elements nested within those child
elements. This selector then applies all common CSS styles for all
the child elements, to avoid redeclarations: */
section > div {
/* all <div> elements have a 10px solid border, so here we apply
that border with the color set to 'transparent,' allowing us to
set the 'border-color' in the individual elements: */
border: 10px solid transparent;
display: inline-block;
height: 60px;
padding: 20px;
margin: 20px;
position: fixed;
top: 50%;
width: 60px;
}
.hm {
/* setting the border-color for this specific element: */
border-color: yellow;
/* the following translations were combined into one
'translate' declaration, using the calc() method:
transform: translateX(-25%);
translate: 10px;
*/
translate: calc(-25% + 10px);
}
.hm0 {
/* again, setting properties specific to the individual elements: */
border-color: red;
left: 50%;
translate: -20px;
}
.hm1 {
border-color: rgb(211, 208, 208);
left: 50%;
/* combining the two different translations into one single declaration
via translate: calc(...):
transform: translate(-100%);
translate: -20px;
*/
translate: calc(100% - 20px);
}
.hm2 {
border-color: rgb(255, 0, 225);
margin-left: auto;
margin-right: 0;
right: 0;
}
<section>
<div class="hm"></div>
<div class="hm0"></div>
<div class="hm1"></div>
<div class="hm2"></div>
</section>
JS Fiddle demo.
Things to learn from the above snippet/approach:
try to group all common styling together under one selector that can apply to the each element of a group as a whole, two
use the same properties to do the same thing; don't combine functions and properties such as – for example – transform: translate() (or translateX()) with translate,
if you find you're having to use a property/function and then use a different property/function to further adjust, consider looking for a way to combine the two adjustments into one (the calc() function being a much-used, and versatile, way of doing so),
try and adopt an approach of organising your code in such a way that it becomes easy and predictable to find a property-value pair in your code, particularly CSS, where it's incredibly easy to just add amendments or additions to the end of a rule-set.
Now, the above layout can be achieved more easily using either CSS flex layout, or CSS Grid.
First, flex-box:
/* a simple CSS reset, to ensure all browsers size elements the same way,
using the border-box algorithm, to include borders and padding in the
declared sizing: */
*,
::before,
::after {
box-sizing: border-box;
/* removing browser-default margins and padding: */
margin: 0;
padding: 0;
}
section {
/* here we align the items within the <section> to the
vertical center; align-items works on the cross-axis
which is perpendicular to the main-axis; the main-
axis default is 'row' (so horizontal), therefore by
default 'align-items' positions the flex-items (the
elements within the flex-box) on the vertical axis:*/
align-items: center;
background-color: blue;
block-size: 100vh;
/* specifying the flex-layout: */
display: flex;
/* positioning elements to the center on the main-axis,
horizontal by default: */
justify-content: center;
}
section > div {
/* ensures that the element's width and height are equal: */
aspect-ratio: 1;
/* defining the borders of all elements matched by the
selector: */
border: 10px solid transparent;
/* defining the block-size of the matched elements; this is
a CSS logical property, and in European languages - and
others descended from those languages - is equivalent to
'height'; and the previous use of 'aspect-ratio'
automatically sets the 'inline-size' (equivalent to 'width'
in European languages and their descendants): */
block-size: 60px;
padding: 20px;
}
.hm {
border-color: yellow;
/* to move this element as far as possible to the inline-start
(the left, for European languages) we use the following to
add an auto-sized margin to the inline-end (in European
languages that's the 'right') side: */
margin-inline-end: auto;
}
.hm0 {
border-color: red;
}
.hm1 {
border-color: rgb(211, 208, 208);
}
.hm2 {
border-color: rgb(255, 0, 225);
/* as above - for .hm - we want to move this element to the
inline-end (the 'right,' in European languages...) side,
so we again set an auto margin on the opposing side, the
'inline-start' ('left,' in European languages): */
margin-inline-start: auto;
}
<section>
<div class="hm"></div>
<div class="hm0"></div>
<div class="hm1"></div>
<div class="hm2"></div>
</section>
JS Fiddle demo.
And, finally, CSS Grid layout:
/* a simple CSS reset, to ensure all browsers size elements the same way,
using the border-box algorithm, to include borders and padding in the
declared sizing: */
*,
::before,
::after {
box-sizing: border-box;
/* removing browser-default margins and padding: */
margin: 0;
padding: 0;
}
section {
align-items: center;
background-color: blue;
block-size: 100vh;
/* specifying the flex-layout: */
display: grid;
grid-template-columns: repeat(4, 1fr);
}
section > div {
/* ensures that the element's width and height are equal: */
aspect-ratio: 1;
/* defining the borders of all elements matched by the
selector: */
border: 10px solid transparent;
/* defining the block-size of the matched elements; this is
a CSS logical property, and in European languages - and
others descended from those languages - is equivalent to
'height'; and the previous use of 'aspect-ratio'
automatically sets the 'inline-size' (equivalent to 'width'
in European languages and their descendants): */
block-size: 60px;
padding: 20px;
}
/* selecting the odd-numbered <div> elements within the <section>,
the first and third: */
section > div:nth-child(odd) {
/* positioning them to the inline-start by setting their
margin-inline-end (right, in European languages...) to
'auto': */
margin-inline-end: auto;
}
/* selecting the even-numbered <div> elements within the <section>,
the second and fourth: */
section > div:nth-child(even) {
/* positioning them to the inline-end, by setting the opposing
margin - margin-inline-start - to auto: */
margin-inline-start: auto;
}
.hm {
border-color: yellow;
}
.hm0 {
border-color: red;
}
.hm1 {
border-color: rgb(211, 208, 208);
}
.hm2 {
border-color: rgb(255, 0, 225);
}
<section>
<div class="hm"></div>
<div class="hm0"></div>
<div class="hm1"></div>
<div class="hm2"></div>
</section>
JS Fiddle demo.
References:
align-content.
align-items.
aspect-ratio.
background-color.
block-size.
border.
border-color.
box-sizing.
calc().
CSS Logical Properties.
display.
grid-template-columns.
height.
inline-size.
justify-content.
justify-items.
margin.
margin-block.
margin-block-end.
margin-block-start.
margin-inline.
margin-inline-end.
margin-inline-start.
padding.
padding-block.
padding-block-end.
padding-block-start`.
padding-inline-end.
padding-inline-start.
place-items.
repeat().
transform.
translate (CSS property).
translate() (CSS function).
width.
This question already has answers here:
Thick underline behind text
(7 answers)
Closed 8 months ago.
I am trying to use a background color on text only, which works fine on single lines, but when the line breaks in responsive mode it ends up looking like this:
Does anyone know what to add to make the yellow background line follow the text on mulitple lines?
This is my code:
.background-highlight {
position: relative;
display: inline-block;
color: #faf9f4;
}
.background-highlight:after {
content: '';
position: absolute;
width: 100%;
height: 10px;
left: 0;
top: 50%;
background-color: #cef230;
z-index: -1;
}
Thanks a lot in advance,
I have used box-decoration-break: clone; property for mainting the same design for multiple lines don't forget to add display: inline; to its child where background is added. in child I have used linear gradient you can generate according to you from here. you can chenge the position of green strip by adjusting gradient values from the site.
.background-highlight {
position: relative;
display: inline-block;
color: #000;
-webkit-box-decoration-break: clone;
box-decoration-break: clone;
font-size: 120px;
}
.background-highlight span {
display: inline;
background: rgb(206,242,48);
background: -webkit-gradient(linear, left bottom, left top, color-stop(11%, rgba(206,242,48,1)), color-stop(12%, rgba(255,255,255,0)));
background: -o-linear-gradient(bottom, rgba(206,242,48,1) 11%, rgba(255,255,255,0) 12%);
background: linear-gradient(0deg, rgba(206,242,48,1) 11%, rgba(255,255,255,0) 12%);
}
<h1 class="background-highlight"><span>The skippers escape</span></h1>
It is fault of pseudo element that is forced to break between two lines.
The cause is the way the effect is carried out, pseudo element ::before creates a single rectangle that has no way of splitting up to follow words flow. Posible solutions:
Make sure links never occupy more than 1 line. You can use
white-space: nowrap;
Redesign the effect applying box border to main element. For example:
.background-highlight {
width: max-content;
border-bottom:5px solid rgb(217, 255, 0);
}
<div class="background-highlight">THE SKIPPER´S ESCAPE</div>
Pseudo-element solution
Use the bottom-positioning value on the pseudo-element instead of top. This forces the pseudo-element to be positioned at the bottom, instead of 50%from the top. I used bottom: -10px as that is the height of the pseudo-element, so it aligns perfectly.
Read more on position values: https://developer.mozilla.org/en-US/docs/Web/CSS/position
HTML-element solution
Instead of creating a pseudo-element, you could opt to make an HTML element instead.
Make a parent container, apply flex to it so the text and the line will align.
Make the .line-element a block element, so it will break into a new line.
You can still apply position: absolute and position: relative on the .line and the h2 if you want to position it in another way. Or you could simply use e.g. transform: translateY(5px) to move the line up a bit.
.background-highlight {
position: relative;
display: inline-block;
color: black;
text-align: right;
}
.background-highlight:after {
content: '';
position: absolute;
width: 100%;
height: 10px;
left: 0;
bottom: -10px;
background-color: #cef230;
z-index: -1;
}
/* Without pseudo */
.nopseudo {
display: flex;
}
.nopseudo h2 {
text-align: right;
}
.nopseudo .line {
height: 10px;
width: 100%;
background-color: #cef230;
display: block;
}
<h2 class="background-highlight">The Skippers <br>Escape</h2>
<div class="nopseudo">
<h2>The Skippers <br>Escape<span class="line"></span></h2>
</div>
I don't know how is your structure but this might help.
We just need two div elements, one as a container to setup the width property and the text holder in this case I will use a h2 tag.
Just mkae the ::after pseudo element as display and the .background-highlight's width can be width: match-content or 100% in this case if you just want to cover the text use match-content if you want to cover the width of the .title element use 100%
.title {
width: 90vw;
text-align: end;
}
h2 {
text-transform: uppercase;
color: #374650;
}
.fullwidth {
width: 100%;
}
.match {
width: match-content;
}
.background-highlight {
position: relative;
display: inline-block;
}
.background-highlight:after {
content: '';
display: block;
width: 100%;
height: 10px;
background-color: #cef230;
z-index: -1;
}
<div class="title">
<h2 class="match background-highlight">
The Skipper's <br>Escape</h2>
</div>
<div class="title">
<h2 class="fullwidth background-highlight">
The Skipper's <br>Escape</h2>
</div>
I want to add animation to the button with the following code https://codepen.io/chrisota/pen/bNdRaM
but altered it a bit like this
a::before{
position: absolute;
top: 0;
bottom: 0;
margin: auto;
content:'';
border-radius: 50%;
display: block;
width: 30px*2;
height: 20px*2;
line-height: 30px*2;
left: -30px/2;
text-align: center;
transition: box-shadow 0.5s ease-out;
z-index: -1;
}
a:hover{
color: #fff;}
a:hover::before{
box-shadow:inset 0 0 0 $width rgba($button-color,1);
}
However,as far as I know absolute position is better not to use, but when I delete it, the button vanishes
<row>
<div class='col-5'>
a(href="http://www.dribbble.com/chrisota" title="Chris Ota Dribbble") <i class="fa fa-dribbble"></i> Dribbble
</div>
</row>
position: absolute is a wonderful tool when wielded properly.
It truly shines in the ::before and ::after psuedo-elements.
When you set the position of the element to relative and the position of ::before and ::after to absolute, you can position your pseudo-elements relative to the element itself.
This allows you to do cool things like adding icons to your buttons for example.
Just make sure to set the display and content properties like below. You can add the top, right, bottom, and left properties to move the element around.
.some-class {
position: relative;
}
.some-class::before {
position: absolute;
display: block;
content: '';
top: 10px; /* just an example */
left: 10px; /* just an example */
width: 32px; /* just an example */
height: 32px; /* just an example */
}
I'm creating a tooltip. My problem is that when the tooltip appears, the siblings move, unlike position: absolute. I can't use an absolute position because that positions the tooltip relative to the browser window, and not it's original position.
HTML
<p class="tooltip-anchor">Hover me</p>
<span class="tooltip">Hello!</span>
CSS
.tooltip-anchor:hover + .tooltip {
display: inline-block;
}
.tooltip {
display: none;
position: relative;
color: #fff;
background: #333;
padding: 0.25em;
}
I made a demo on Code Pen.
Whit some modes to your code you can obtaine what do you want.
If you insert your span into the p tag you can set a position:absolute to the span (and position relative to it's container) and then modify it's position as you want.
Position absolute: The element is removed from the normal document
flow, and no space is created for the element in the page layout. It
is positioned relative to its closest positioned ancestor, if any;
otherwise, it is placed relative to the initial containing block. Its
final position is determined by the values of top, right, bottom, and
left.
body {
font-family: sans-serif;
font-size: 18px;
text-align: center;
}
.tooltip-anchor {
position: relative;
display: inline-block;
}
/* modified */
.tooltip-anchor:hover .tooltip {
display: inline-block;
}
.tooltip {
display: none;
position: absolute;
bottom: 20px;
/* modified */
left: -40px;
/* modify for center */
color: #fff;
background: #333;
padding: 0.25em;
min-width: 150px;
text-align: center;
}
<p style="font-size: 17px;">A simple tooltip. CSS is wonderful, may I say.</p>
<p class="tooltip-anchor">Hover me <span class="tooltip">Hello!</span></p>
<p>Hello</p>
I know it is possible to create a custom "tooltip" with the :hover:after selectors and to align this tooltip relative to the original element by marking the original element as position:relative and the tooltip as absolute.
HTML:
test
<span custom-tooltip="testing a custom tooltip" class="tooltip">
test
</span>
test
CSS:
.tooltip {
position: relative;
}
.tooltip:hover:after {
content: attr(custom-tooltip);
position: absolute;
background: black;
color: white;
}
However, I must use absolute values to position or size this :after element
top: 30px;
left: -30px;
width: 300px;
What if I want to make the element as wide as it needs to be (Percentages are relative to the parent element creating a large vertical box so I can't tell it to go width: 100%)
And centered under the parent (left: -50% results in it being moved 50% of the parent to the left, not centered)
Is this possible without javascript? (If not, are there some magic selectors or functions to get the width of this or that and calc() the correct values?
You can force the tooltip onto a single line by using white-space:nowrap. I don't know of any way to center the tooltip without forcing a specific width on both the tooltip and the item the tooltip applies to. Here's a general-purpose example (without centering):
<p>Lorem <span tooltip="Lorem ipsum">ipsum</span> dolor sit amet.</p>
And the CSS:
*[tooltip] {
position: relative;
border-bottom: dotted 1px #000;
}
*[tooltip]:hover:before {
content: attr(tooltip);
background-color: #000;
color: #fff;
top: 1em;
position: absolute;
white-space: nowrap;
}
Note that I'm using :before instead of :after. If you want to center the tooltip and are able to define a fixed width, you can use this CSS instead:
*[tooltip] {
position: relative;
display: inline-block;
text-align: center;
width: 200px;
margin: 0 -75px;
}
*[tooltip]:hover:before {
content: attr(tooltip);
background-color: #000;
color: #fff;
top: 1em;
position: absolute;
white-space: nowrap;
width: 200px;
}
Here, the item is given a fixed width equal to the width of the tooltip then negative left/right margins to collapse it back down to the desired size. Note the addition of display:inline-block and text-align:center.
This technique isn't practical for inline tooltips, but works well for buttons and "call to action" links.
.tooltip
{
display: inline;
position: relative;
}
.tooltip:hover:after
{
background: #333;
background: rgba(0,0,0,.8);
border-radius: 5px;
bottom: 26px;
color: #fff;
content: attr(title);
left: 20%;
padding: 5px 15px;
position: absolute;
z-index: 98;
width: 220px;
}
code from TalkersCode complete code here Create CSS3 Tooltip