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

Can CSS rules be inserted outside of the Header section?

Question: Can CSS styles be declared outside the “HEAD” element of an “HTML” page ? While working within a CMS where access to the header tag is restricted, is there a method to include CSS rules within the <BODY> of the ...

htmlcss

Internet Explorer is failing to render SVG as content within a pseudo element such as :before or :after

Looking to tackle an issue that stems from the following discussion: Is there a way to use SVG as content in a pseudo element :before or :after. I'm attempting to add a svg triangle after a div using a pseudo-class. div{ background-color: black; w ...

cssinternet-explorersvginternet-explorer-11

Unable to import a Module in React without curly braces, even when using 'export default'

I recently stumbled upon a question regarding module imports in React. Some sources mentioned that using curly braces around imports can increase the bundle size by importing the entire library. However, I had been successfully importing modules without cu ...

javascriptreactjsimport

What is the best way to use jQuery to retrieve information from one child element in an XML API in order to locate another child

Hi there, I'm new to jQuery and could use some help. I'm attempting to retrieve specific information like CPU and RAM details from a particular phone model. I've written the jQuery code, but I'm having trouble displaying the RAM and CPU ...

javascripthtmljqueryxmlapi

Finding elements based on a specific parent structure in JavaScript: A step-by-step guide

I'm currently working on a script that needs to grab content only within a specific parent structure defined as div.main-element input+label+ul. Is there a way to achieve this using JavaScript or jQuery? If anyone could point me in the right directi ...

javascriptjqueryhtml

Using jQuery to check if a value exists in a PHP array

I am encountering an issue with handling an array in PHP and using it in my jQuery code. Previously, I was able to successfully work with the array when it was a string, but now that it is more complex, the comparison of elements is not functioning properl ...

javascriptphpjqueryarrays

Unable to access property within JSON object sent via POST request

I encountered an issue TypeError: Cannot read property &#39;tasks&#39; of undefined While attempting a new POST request on my API, here is the request body I am using: { "name": "example1", "description": "teaching example1", "rules" ...

javascriptnode.jsjsonexpress

Repositioning with Flexbox: shifting the middle element to a new line

I have a flex item that contains three divs. ┌────────────────────────────────────────┐ | WRAPPER | | ┌─────────┬─ ...

cssflexbox

Steps to creating a custom text editor using React for generating blog content and storing it in a MongoDB database

I have a challenge of building a rich text editor for my web app, specifically for creating blog posts that will be saved in the database for user viewing. Initially, I planned to use a form with input fields where the title and content of the blog post w ...

javascriptnode.jsreactjsmongodbexpress

Tips for utilizing a personalized extension in Visual Studio Code

Embarking on my HTML journey, so please bear with me. I've been watching tutorial videos to get a better grasp of it, and one of the tutorials I'm following shows how to create a resume on GitHub using VS Code. Check out the video here At 3:44 ...

htmlcssvisual-studio-codefonts

Transferring JSON data using DWR (Direct Web Remoting)

Utilizing DWR for AJAX calls in my project involves the conversion of JavaScript objects to Java objects by analyzing the Java class. My goal is to send and receive a JSON-like structure through DWR. For example: JavaScript Object: { "name" : "TamilVe ...

javajavascriptjsondwr

Exploring Angularjs: Navigating to a particular element within ng-repeat

I created a custom directive that generates a list of buttons using ng-repeat: HTML <div ng-controller="toggleButtonController" ng-init="init()" id="parent"> <div ng-repeat="btn in setting" style="display:inline"> <button class ...

javascriptangularjsangularjs-ng-repeat

Tomcat hosting a dynamic duo: Spring Boot and React!

Exploring the world of Spring Boot application development with a React client using Gradle is an exciting journey for me as I navigate through these new technologies. My current progress includes successfully creating a WAR file that encompasses several i ...

javascriptspringreactjstomcatweb-deployment

Implement a procedure for printing a page once the columnize operation has been completed

Hello, I have run into a problem that I need help with. Currently, I am trying to print a page after the function "columnize" has finished its task. However, the print function is executing before the columnize function completes. How can I ensure that t ...

javascriptjqueryasp.netprinting

What is the best way to manage sessions in angularjs using javascript?

Only at two specific instances in the application should the login prompt be displayed: When trying to access a page that requires login while not logged in, such as my profile page. When attempting an action that necessitates ...

javascriptangularjssession-cookies

Refreshing express-session sessions

My goal is to enhance the user experience by retrieving their profile from the mongodb database when they visit the page, and then updating their session with this information. Currently, I am utilizing the following packages for managing sessions: - ex ...

javascriptexpresscookiesexpress-sessionconnect-mongo

The switch/case function I implemented is functioning correctly, however, an error is being displayed in the console stating "Cannot read property 'name' of null"

Check out the live codepen demo here After selecting "elephant" from the third dropdown, the console.log(brand.name) displays "elephant" as expected and executes the rest of the switch statement successfully. However, there seems to be a console error oc ...

javascriptangularjs

Having trouble sending the welcome message?

Upon someone's entry, an error message Cannot read properties of undefined (reading 'send') is popping up in the console. I have ensured that all the necessary intents are selected for a proper welcome system or message display. Even when I ...

javascriptnode.jsdiscord.jswelcome-file

Challenges in rendering textures

Hello there, I'm encountering an issue with the way a texture is being rendered on an imported OBJ model. Below is an image showing how the texture currently appears: And here is how the texture should actually look when mapped to the object: Here ...

javascript3dthree.js

Error: The method onSaveExpenseData in props is not defined as a function

I am currently learning how to pass data from a child component to a parent component in React I encountered an error: TypeError: props.onSaveExpenseData is not a function I would appreciate any help as I am still in the learning phase and this error has ...

javascriptreactjs