I am trying to create a layout that has two sections, one on top of the other, with a line separating them. I would like to use HTML and CSS to create this layout, but I am not sure how to go about it.
I have tried using the display grid to create the line, but it does not seem to be working as expected. I have also tried using the `border` property on the sections, but that also does not seem to be working. Can anyone provide guidance on how to create this layout using HTML and CSS? I would greatly appreciate any help or examples.
this is my code and result
.qualification__section{
display: grid;
grid-template-columns: 0.5fr;
justify-content: center;
}
.qualification__content{
display: none;
}
.qualification__content-active{
display: block;
}
.qualification__data{
display: grid;
grid-template-columns: 1fr max-content 1fr;
column-gap: 1.5rem;
}
.qualification__title{
font-size: 1rem ;
font-weight:500 ;
}
.qualification__subtitle{
display: inline-block;
font-size: 0.875rem;
margin-bottom: 1rem;
}
.qualification__calender{
font-size: 0.875rem;
}
.qualification__rounder{
display: inline-block;
width: 13px;
height: 13px;
background-color: var(--title-color);
border-radius: 50%;
}
.qualification__line{
display: block;
width: 1px;
height: 100%;
background-color: #2a2626;
transform:translate(6px,-7px) ;
}
The is result i would like to create it
This is called a timeline and there are many examples on the Internet:
https://www.w3schools.com/howto/howto_css_timeline.asp
https://freefrontend.com/css-timelines/
But in general, when you want to create a separating line in CSS you need:
Give position: relative to the parent element of the timeline.
Make the separating line with Pseudo-elements
An example of a Separating line:
.timeline {
position: relative;
}
.timeline::after {
content: '';
position: absolute;
width: 6px;
background-color: white;
top: 0;
bottom: 0;
left: 50%;
margin-left: -3px;
}
Related
I know enough CSS to be dangerous but not productive. I just learned about grids.
In my image below, you'll see I have a 2 column grid set up. The left column contains a "project name". This is an li tag. The right column contains a settings gear icon. This is a span tag. These are both children of a parent div
I set the grid up on the parent div, which I have rolled over in the image below. Why is the grid container size only the size of the first column and not the whole row?
This is causing me confusion because I want to have a border across the whole row when I rollover the row.
My HTML (JSX):
<div className={styles.project}>
<li onClick={() => props.onSelect(props.name)}>{props.name}</li>
<span className={styles.settings}>{"\u2699"}</span>
</div>
My CSS:
.project {
font-family: "Rubik", sans-serif;
grid-template-areas: "name settings";
grid-template-columns: 150px 35px;
grid-gap: 0px;
display: grid;
cursor: pointer;
width: 100%;
font-size: 13px;
}
.project li:hover {
border-radius: 200px;
border: 1px solid;
padding-right: 160px;
}
.project li {
list-style-type: none;
grid-area: name;
padding: 10px;
margin: 10px;
}
.project .settings {
grid-area: settings;
text-align: center;
align-self: center;
font-size: 18px;
}
.project .settings:hover {
border-radius: 200px;
border: 1px solid;
padding-right: -160px;
}
Looks like this was due to the size I chose for the first grid column:
grid-template-columns: 150px 35px;
Which is fine except I was then adding padding and margins so it pushed the second grid out.
Resolved by changing it to:
grid-template-columns: auto 35px;
And setting my hover to
(note: In my example above I had the hover on the li tag)
.project:hover {
border-radius: 200px;
border: 1px solid;
border-width: 100%;
}
I have a mobile app, which contains a manually created icon - a circle with some text and number inside. It looks and works perfectly when testing it on PC; however, on a mobile device - text gots broken to a new line. I am sure there is enough space for it.
My question is - what can be the issue (something wrong in my CSS?), and how can it be fixed (for example, force it staying on the same line)?
CSS
.title-circle {
width: 65px;
height: 65px;
background-color: #eb5505;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
margin-right: 0.9375rem;
}
.title-circle-txt {
position: relative;
top: 0.2em;
color: #fff;
text-align: center;
font-size: 9.5px;
}
.title-circle-txt span {
font-size: 24px;
display: block;
line-height: 1;
}
HTML
<span class="title-circle">
<span class="title-circle-txt">
Point
<span>1</span>
</span>
</span>
you set .title-circle-txt span class css property display: block;. display: block; property creating the issue. change display: block; to display: inline-block; it will be fix.
.title-circle-txt span {
font-size: 24px;
display: inline-block; /* block to inline-block */
line-height: 1;
}
Here is the example.
I am trying to align the items on a timeline bar using flexbox. I want to be able to have the first circle start at the beginning of the line and the last circle to be at the end of the line with the center item being centered. Is this possible using flexbox? Right now I am using
ul {
display: flex;
}
li {
align-items: center;
}
align-items applies to the parent element and controls the alignment on the cross-axis of your flexbox. In you case, you need justify-content: space-between;, again, applied to the parent element like so:
ul {
display: flex;
justify-content: space-between;
}
You can check out a very detailed Flexbox breakdown on CSS Tricks to learn more about it.
Sure you can do that with Flexbox (Flexbox is life :P).
Just the ul needs css:
ul {
display: flex;
justify-content: space-between
}
You need to check this amazing post - A Complete Guide to Flexbox
Using flexbox and absolutely positioned elements you can achieve this:
*,
*:before,
*:after {
box-sizing: border-box;
}
ul {
margin: 0;
padding: 0;
list-style-type: none;
display: flex;
position: relative;
}
ul:before {
content: "";
position: absolute;
left: 0;
width: 100%;
top: 20px;
border-top: 1px solid #aaa;
}
li {
margin: 0;
padding: 0;
text-transform: uppercase;
text-align: center;
flex: 1 0 0;
margin-top: 40px;
position: relative;
}
li:before {
content: "";
position: absolute;
top: 0px;
left: 50%;
transform: translate(-50%, -150%);
width: 20px;
height: 20px;
border: 2px solid yellow;
border-radius: 100%;
background-color: #fff;
}
li.selected:before {
background-color: yellow;
}
<ul>
<li class="selected">Create account</li>
<li>Understand your role</li>
<li>Share stories</li>
</ul>
You can use the property align-self on each item to do so, the problem with using it on the parent element, is that the child items will be aligned to what the parent says. So align-self:flex-start for the first item, align-self:center on the second item and align-self:flex-end on the last one (list items that is).
Useful guide about flex: http://jonibologna.com/flexbox-cheatsheet/
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 am a relatively new web developer and i normally use flex-box for these kinds of situations.
I have to use table for this project because the liquid template i am customizing is using display:table;.
I want images to reposition themselves and close the whitespace between cells.
Is it even possible in a table layout?
I share a fragment of SCSS of the screenshot to give an idea.
Sorry for the style i still have some problems with the stack overflow editor when it comes to nested code. You can match the classes with border colors.
.collection-products{
border:2px solid rgba(222,45,67);
&:after{
display: table;
content: '';
clear: both;
.collection-product{
border:1px solid blue;
display: block;
position: relative;
text-decoration: none;
float: left;
width: 25%;
padding-left: $products_padding;
margin-bottom: $products_padding;
-webkit-tap-highlight-color: rgba($color_product_bg, 0.2);
.table{
border:1px solid green;
display: table;
table-layout: fixed;
width: 100%;
height: 150px; // this behaves as min-height
.cell{
border:1px solid red;
display: table-cell;
vertical-align: middle;
img{
max-width: 100%;
padding: 0;
margin: 0 auto;
#include default-transition(opacity);
}
}//close .cell
}//close .table
}//close .collection-product
}//close .collection-products
A screen shot to demonstrate the wanted effect.
I read about tables but i couldn't find an answer to this problem.
Any help will be appriciated.