I want to show the uptime/downtime of my website with a div containing vertical bars (red, green or no color when no data).
The css for this:
.lines {
height: 50px;
width: 100%;
display: flex;
background: #eee;
flex-direction: row;
align-items: flex-start;
justify-content: flex-start;
}
.lines > .line {
flex: 1 1 auto;
height: 100%;
border: 0.5px solid #ccc;
}
.line:not(:first-child) {
border-left: 0;
}
.lines > .line.true {
background: greenyellow;
}
.lines > .line.false {
background: red;
}
This gives me the following result with my data:
As you can see, the "colums" (divs) are not equally separated, even though I use flex: 1 1 auto).
JS:
<div className={styles.lines>
{data.map((e,i) => (
<div key={i} className={`${styles.line} ${e.bool === 'true' ? styles.true : styles.false}`} />
)}
</div>
Where is my code wrong?
Looks like a rendering issue, because some lines get truncated as they're less than 1 pixel. The following should solve the issue:
.lines > .line {
...
min-width: 1px;
}
Also note that borders need to be at least 1 pixel, 0.5 px will simply default to 1px.
Related
In my Next.js app (basically React) I am trying to draw a trapezoid form with Styled Components, using borders.
My code is like this:
const StyledContainer = styled.div`
position: relative;
border-right: 75px solid red;
border-top: 25px solid transparent;
height: 50%;
width: 75%;
display: flex;
`
However, for my purposes, I need the border-right and border-top properties to use percentages. But when I insert 75% instead of 75px in border-right, the trapezoid is not visible anymore.
I've tried the whole day to fix this but I didn't manage. Anyone have any idea what I need to do? 🙏
For context, the parent container has both width and height properties:
const SAGraph = styled.div`
width: 100%;
height: 100%;
display: flex;
align-items: flex-end;
background-color: hotpink;
`;
I have seen similar problems which were solved by using vw as unit, but this isn't helpful in my case, as I need to use percentages, to make sure that the trapezoid doesn't move outside the container and it uses the whole width of the container...
Edit: This is a picture of my desired output:
If the red section is just for decoration, you can add it to the parent element as a pseudo after element, colored red and clipped into the required shape using CSS clip-path and percentage coordinates.
* {
margin: 0;
}
body {
width: 100vw;
height: 100vh;
}
.SAGraph {
width: 100%;
height: 100%;
display: flex;
align-items: flex-end;
background-color: hotpink;
position: relative;
}
.SAGraph::after {
content: '';
width: 100%;
height: 100%;
position: absolute;
background: red;
bottom: 0;
left: 0;
clip-path: polygon(0 100%, 0 60%, 60% 50%, 60% 100%);
}
<div class="SAGraph"></div>
If you want the red bit to be an actual child element then use the same technique direct on a child element (not on a pseudo element).
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.
So i'm trying to do this without any javascript. I want make it so that when i scroll, it scrolls over 4 (or multiple) items in a container. is that possible?
To make it easier to understand, here's
.scrollers {
width: 100%;
max-width: calc((150px + 2rem) * 4);
height: 150px;
margin: 0 auto;
scroll-snap-type: x mandatory;
display: flex;
gap: 3rem;
overflow-y: hidden;
overflow-x: scroll;
border: 1px solid black;
box-sizing: border-box;
}
.scrollers.multiple {
/* Ideas ? */
}
/* normal scroll */
.scrollers .box {
width: 150px;
height: 150px;
aspect-ratio: 1/1;
background-color: red;
border: 1px solid black;
scroll-snap-align: start;
}
Code pen explanation: Codepen
Alright so i've figured it out. The trick is to target the child elements you want the snapping to happen on and apply the snap css stylings. In my case, i needed it to be over 4 elements so i'll target :nth-of-type(4n + 1). +1 is because it's zero based.
when we apply scroll-snap-align: start; and scroll-snap-stop: always; on only those elements. it forces the scroll snapping on them.
TL;DR,
.scrollers.multiple .box:nth-of-type(4n + 1) {
scroll-snap-stop: always;
scroll-snap-align: start;
}
Note: other child elements should not have the scroll-snap-align set.
This question already has answers here:
How to remove the space between inline/inline-block elements?
(41 answers)
Closed 4 years ago.
I am trying to avoid using float. When I lower the width to 49%, they sit side by side but unevenly. When I raise the width to 50%, each div sits on it's own line so I'm not sure why.
body {
margin: 0px;
padding: 0px;
}
div {
min-height: 50vh;
width: 50%;
display: inline-block;
}
div:nth-child(1) {
background-color: red;
}
div:nth-child(2) {
background-color: green;
}
div:nth-child(3) {
background-color: blue;
}
div:nth-child(4) {
background-color: yellow;
}
<div>Red</div>
<div>Green</div>
<div>Blue</div>
<div>Yellow</div>
Because inline-block respect space character, in this case, each element puts a "character" space between the divs. Do avoid this there are some tricks but I suggest you to use css grid:
body {
display: grid;
grid-template-columns: 1fr 1fr;
}
display: inline; and display: inline-block uses text spacing as opposed to display: block which will position items more precisely.
By moving the divs to a single line, this forces the divs to have zero space in between them.
See this article for more information.
body {
margin: 0px;
padding: 0px;
}
div {
min-height: 50vh;
width: 50%;
display: inline-block;
}
div:nth-child(1) {
background-color: red;
}
div:nth-child(2) {
background-color: green;
}
div:nth-child(3) {
background-color: blue;
}
div:nth-child(4) {
background-color: yellow;
}
<div>Red</div><div>Green</div><div>Blue</div><div>Yellow</div>
You should use flexbox.
you would need to wrap your divs in another div width the class="container"
then you could do this
.container {
display: flex; /* display side by side */
align-items: center; /* align vertically */
}
.container > * {
flex: 1;
}
If you need to use inline-block make sure you write your html without any spaces.
this does not work:
<div>Red</div>
<div>Green</div>
<div>Blue</div>
<div>Yellow</div>
this does work:
<div>Red</div><div>Green</div><div>Blue</div><div>Yellow</div>
I'm trying to indicate the active link, using a triangle-shaped CSS "cut-out" (the triangle is cut out of the white header.
http://codepen.io/Goatsy/pen/xVvRmZ
/*
.container {
width: 1200px;
}
*/
How do I "cut out" the red triangle from both the contained header and full-width background (red) block? I need to cut out the triangle to expose underlying photo.
The header works great, but as soon as the full-width red block is applied to the background layer of contained header, it "fills in" the triangle cut-out.
UPDATE:
I created a flexbox within a flexbox. Unfortunately, the contained header is not exactly 1200px, and this will be difficult to apply to the overall layout.
http://codepen.io/Goatsy/pen/xVvRmZ
.wrapper-whole {
display: flex;
flex-direction: row;
height: 134px;
margin: auto;
}
.flexy {
background: #f00;
flex: 2;
height: 134px;
}
.wrapper { /* wraps contained header navbar */
display: flex;
flex-direction: row;
height: 134px;
border-left: 15px solid #fff;
border-right: 15px solid #fff;
max-width: 1200px;
margin: auto;
flex: 6;
}
Instead of cutting it out from a background, you could create the illusion of a background by making red elements on each side of the white header using :before and :after pseudo-elements.
In http://codepen.io/anon/pen/MyNpdX, I added the following CSS:
.wrapper {
/* the stuff that was already here */
position: relative;
}
.wrapper:after, .wrapper:before{
content: "";
background-color: #f00;
width: 4000px;
position: absolute;
height: 134px;
top: 0;
}
.wrapper:before{
margin-right: 15px;
right: 100%;
}
.wrapper:after{
left: 100%;
margin-left: 15px;
}
Too many questions:
let me try to answer the ones I've understood.
I'll keep editing this answer as I go:
to contain something: you can have the following parent div
.parent {
max-width: 1200px;
overflow: hidden;
}
this way a child red div, would not appear outside parents constraint.
you can achieve css-triangles as:
.arrow-up {
width: 0;
height: 0;
border-left: 15px solid transparent;
border-right: 15px solid transparent;
border-bottom: 15px solid black;
}
<div class="arrow-up"></div>
p.s.: you're codepen is so far behind the layout in question, that it's hard to hands-on fix the problem
Place the contained flexbox header, inside of another flexbox.
Place one (red) block on left of header and one (red) block on right.
Create max-width for white header:
#media screen and (min-width: 480px) {
.wrapper { /* wraps contained header navbar */
min-width: 1200px;
}
}
http://codepen.io/Goatsy/pen/xVvdKN