Styling Process Steps in CSS

Just starting out with CSS!

I'm looking to replicate the Process Step design shown in the image.

https://i.stack.imgur.com/Cq0jY.png

Here's the code I've experimented with so far:

.inline-div{
  padding: 1rem;
  border: 0.04rem gray solid;
  display: inline-block;
  width: 25%;
  border-top-left-radius: 25px;
}


.active{
  background: #8b7b38;
  color: #FFFFFF;
}
<div>
    <div class="inline-div">Text A</div>
    <div class="inline-div active">Text B</div>
    <div class="inline-div">Text C</div>
</div>

Any assistance would be greatly appreciated.

Thank you!

javascripthtmlcss

Answer №1

Here's a better way to structure your code:

To eliminate the gap between each process, utilize flex properties

.main{ 
  flex-wrap:nowrap;
  display: flex;
}

If you want to remove the border-left of inline-div elements except for the first one, you can do this:

.inline-div:not(:first-child){
  margin-left:-0.04rem; // This will remove the left border 
}


.inline-div{
  padding: 1rem;
  border: 0.04rem gray solid;
  width: 25%;
  border-top-left-radius: 25px;
}
.inline-div:not(:first-child){
  margin-left:-0.04rem; // This will remove the left border
}
.main{ 
  flex-wrap:nowrap;
  display: flex;
}

.active{
  background: #8b7b38;
  color: #FFFFFF;
}
.inline-div {}
<div class="main">
    <div class="inline-div">Text A</div>
    <div class="inline-div active">Text B</div>
    <div class="inline-div">Text C</div>
    <div class="inline-div">Text D</div>
</div>

Answer №2

Adjust the outer div's font-size to zero to eliminate spacing between each pair of steps. Then, set the right step's margin-left to the negative border width in order to overlap the left step's border. By following these steps, your layout should function smoothly:

.outer-div{
    font-size: 0;
}

.inline-div{
  padding: 1rem;
  border: 0.04rem gray solid;
  display: inline-block;
  width: 25%;
  border-top-left-radius: 25px;
  text-align: center;
  font-size: 20px; /* adjust inner div's font-size accordingly */
}


.active{
  background: #8b7b38;
  color: #FFFFFF;
}

.no-left-border{
  margin-left: -0.04rem;
}
<div class="outer-div">
    <div class="inline-div">Text A</div>
    <div class="inline-div active no-left-border">Text B</div>
    <div class="inline-div no-left-border">Text C</div>
</div>

Answer №3

.custom-div{
      margin: 2rem;
      border: 0.1rem black solid;
      display: inline-block;
      width: 50%;
      border-radius: 15px;
      background-color: #f5f5f5;
    }
    
    .highlighted{
      background: #ffcc00;
      color: #000000;
    }

    .grid-layout {
      display: grid;
      background: green; // change to your preference
    }
<div class="grid-layout">
        <div class="custom-div">Content A</div>
        <div class="custom-div highlighted">Content B</div>
        <div class="custom-div">Content C</div>
    </div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Using NodeJS to Send JSON Data via HTTP POST Request

Issue with Sending JSON Data via Http Post in NodeJS const http = require('http'); const fs = require('fs'); var options = { hostname: 'www.postcatcher.in', port: 80, path: '/catchers/5531b7faacde130300002495&apo ...

javascriptjqueryajaxjsonnode.js

Learn how to convert data to lowercase using Vue.js 2

I am attempting to convert some data to lowercase (always lowercase) I am creating a search input like : <template id="search"> <div> <input type="text" v-model="search"> <li v-show="'hello'.includes(sea ...

javascriptvue.jslowercase

Tips for activating the default 500 error page in Next.js

I'm having trouble getting Next.js to display its default 500 error page. While most sources discuss creating a custom error page, the Next.js documentation only briefly references their built-in 500 error page. I want the default page to show up when ...

javascriptnext.js

Implementing login functionality in an Angular application with the help of Kinvey.Social and utilizing the Promise API

I have been utilizing the Kinvey HTML5 library in an attempt to create a client-side application that integrates Google identities for Login. While the Oauth transaction appears to be functioning properly, I am encountering an issue with toggling the visib ...

javascripthtmlangularjskinvey

Can anyone provide a reference or resource that explains the best scenarios for utilizing display:block, display:inline, and display:inline-block, and the reasons behind their usage?

Can you recommend a quality article discussing the guidelines for using display:block, :inline, and :inline-block in CSS, along with explanations on when to utilize each one? Additionally, in what scenarios should we override the display property through ...

cssxhtmlsemantic-markup

Updates to class variable values in jQuery are failing to take effect

Attempting to create my first JavaScript class has presented some challenges, specifically when it comes to updating a class variable. Despite hours of testing different approaches, I still can't seem to get it right! function ClassName(productId) { ...

javascriptajaxclassoopvariables

After a duration of 4 minutes, an ERR_EMPTY_RESPONSE is thrown in response to the

My angular 5 node app involves sending a request to the server and waiting for a response. There are instances where the response takes around 5-6 minutes to arrive. However, an ERR_EMPTY_RESPONSE error is triggered by the http method after just 4 minutes ...

javascriptnode.jsangular

How can I establish default values for 2 to 3 options in a Dropdownlist?

Is there a way to set two values as default in a dropdown list, and when the page is refreshed, the last two selected values are retained as defaults? Thanks in advance! Visit this link for more information ...

htmlangulartypescriptangular7

Turning HTML into an image with the power of JavaScript

Utilizing html2canvas to convert a div into an image, everything is functioning properly except for the Google font effect. The image shows how it eliminates the effect from the text. https://i.stack.imgur.com/k0Ln9.png Here is the code that I am using f ...

javascriptjqueryhtmlcss

Using `ngModel` within `ngOptions` inside `ngRepeat`

<p><b>Customer Name</b></p> <div ng-repeat="customer in customerList"> <b>{{customer.name}}</b> <select value="Please choose a bot from the list" ng-model='???' ng-options="b as b.name for b in lis ...

javascriptangularjsangularjs-ng-repeatng-options

Retrieve a targeted table from a webpage through Ajax refresh

On a webpage, I have a table that has two different views: simple and collapsible. I want to be able to toggle between these views using a button click without the need to refresh the entire page. Below is the code snippet I am currently using: $(&apo ...

javascriptjqueryajax

What causes TypeScript to interpret an API call as a module and impact CSS? Encountering a Next.js compilation error

My website development process hit a roadblock when I tried integrating Material Tailwind into my project alongside Next.js, Typescript, and Tailwind CSS. The compilation error that popped up seemed unrelated to the changes, leaving me baffled as to what c ...

csstypescriptnext.jscompiler-errorstailwind-css

Unable to retrieve form values from a $modalInstance

When launching a $modalInstance, the user will need to select an option from dynamically loaded radio inputs and return the chosen value. To open the $modalInstance, this function is used: $scope.openAddFriendGroup = function () { var addFriendGroupMod ...

javascriptangularjsangular-ui-bootstrap

JQueryMobile 1.3.2 encounters issues with popups following the installation of Chrome version 43.0.2357.65 m update

Is anyone else experiencing issues with the latest version of Chrome "43.0.2357.65 m" causing problems with JQueryMobile 1.3.2? When I try to click on a popup, it suddenly jumps to the top of the page and the scroll bar disappears. This was not an issue in ...

javascripthtmlgoogle-chromejquery-mobilejquery-mobile-popup

Receiving a console notification about a source map error

Recently, I started receiving this warning in my console: "Source map error: request failed with status 404" resource URL: map resource URL: shvl.es.js.map" Has anyone encountered this issue before? I'm unsure of what it might be? This is my webpa ...

javascriptvue.js

Preventing div contents from shrinking with changing screen sizes

I am currently working on creating a portfolio website similar to this one. Check out the Website Here Typically, when the screen size is reduced to less than half of the full width, the content of a website tends to be hidden rather than shrinking. Howe ...

css

Tips for creating multiple functions within a single JavaScript function

Is there a way to combine these two similar functions into one in order to compress the JavaScript code? They both serve the same purpose but target different CSS classes. The goal is to highlight different images when hovering over specific list items - ...

javascriptjquerycsssyntax

Conceal the menu in Angular Material when the mouse leaves the button

When the mouse hovers over a button, a menu is displayed on the website's toolbar. The menu is set to close when the mouse leaves a surrounding span element. Now, there is an attempt to also close the menu when the mouse leaves the triggering button i ...

javascripthtmlangularangular-material

Listening to multiple events in AngularJS using `$scope.$on`

I am faced with a situation where I need to respond to two different events being transmitted via $scope.$emit and take action only when both have occurred. For example, if the events are triggered in the following sequence: $scope.$emit('first&apos ...

javascriptangularjsevents

How to iterate through properties declared in an Interface in Angular 12?

Before Angular 12, this functioned properly: export interface Content { categories: string[] concepts: Topic[] formulas: Topic[] guides: Topic[] } //this.content is of type Content ['formulas', 'concepts'].forEach(c =&g ...

javascriptangulartypescript