Is there a way to increase the spacing between the titles of these progress bars?

Ensure your responsiveness by enabling the Toggle Device Toolbar on your browser

I'm attempting to create a progress bar, but I'm facing some challenges. Firstly, I want to increase the height of the semi-transparent black background, but I can't seem to figure out how. Secondly, I need to add spacing and properly align the 2nd and 3rd text elements.

/* progress bar */

.center {
    height: 300px;
    width: 100%;
    position: absolute;
    left: 50%;
    margin-top: 140px;
    transform: translate(-50%, -50%);
    padding: 20px;
    background-color: rgba(0, 0, 0, 0.678);
    box-shadow: 0 2px 60px rgba(0, 0, 0, .5);
    border-radius: 10px;
    color: white;
}
.center #progress{
    margin: 0px;
    padding: 0;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 8px;
    border-radius: 20px;
    height: auto;
    background-color: rgba(0, 0, 0, 0);
}
.skillbar{
    box-sizing: border-box;
    width: 100%;
    margin: 20px 0;
}
/* skillbar languages */
.skillbar-html p{
    color: #fff;
    text-transform: uppercase;
    margin: 0 0 10px;
    padding: 0;
    font-weight: bold;
    letter-spacing: 3px;
}
.skillbar-html p:nth-child(2){
    float: right;
    position: relative;
    top: -30px;
}
.skillbar-css p{
    color: #fff;
    text-transform: uppercase;
    margin: 0 0 10px;
    padding: 0;
    font-weight: bold;
    letter-spacing: 3px;
}
.skillbar-css p:nth-child(2){
    float: right;
    position: relative;
    top: -30px;
}
.skill_percentage{
    background-color: #262626;
    padding: 4px;
    box-sizing: border-box;
    border: 1px solid #0fffb7;
    border-radius: 6px;
}
.skill_level{
    background-color: #0fffb7;
    width: 100%;
    height: 10px;
    border-radius: 6px;
}
<section>
            <div class="center">
                <h1 id="progress">Progress</h1>
                <div class="skillbar-html">
                    <p>HTML</p>
                    <p>90%</p>
                    <div class="skill_percentage">
                        <div class="skill_level" style="width: 90%;"></div>
                    </div>
                    <div class="skillbar-css">
                        <p>CSS</p>
                        <p>70%</p>
                        <div class="skill_percentage">
                            <div class="skill_level" style="width: 80%;"></div>
                        </div>
                        <div class="skillbar-javascript">
                            <p>JavaScript</p>
                            <p>50%</p>
                            <div class="skill_percentage">
                                <div class="skill_level" style="width: 50%;"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
                </div>
            </div>
        </section>
    </section>

htmlcssprogress-barspacing

Answer №1

To enhance the formatting of your text in HTML, you can utilize the <br> element.

In situations where you require more control over how the text is displayed by the browser, line break and tab elements come in handy. The <BR> element serves the purpose of creating a line break.
-W3.org

/* Customize the progress bar */

.center {
    height: 300px;
    width: 100%;
    position: absolute;
    left: 50%;
    margin-top: 140px;
    transform: translate(-50%, -50%);
    padding: 20px;
    background-color: rgba(0, 0, 0, 0.678);
    box-shadow: 0 2px 60px rgba(0, 0, 0, .5);
    border-radius: 10px;
    color: white;
}
.center #progress{
    margin: 0px;
    padding: 0;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 8px;
    border-radius: 20px;
    height: auto;
    background-color: rgba(0, 0, 0, 0);
}
.skillbar{
    box-sizing: border-box;
    width: 100%;
    margin: 20px 0;
}
/* Progress bar styles for various languages */
.skillbar-html p{
    color: #fff;
    text-transform: uppercase;
    margin: 0 0 10px;
    padding: 0;
    font-weight: bold;
    letter-spacing: 3px;
}
.skillbar-html p:nth-child(2){
    float: right;
    position: relative;
    top: -30px;
}
.skillbar-css p{
    color: #fff;
    text-transform: uppercase;
    margin: 0 0 10px;
    padding: 0;
    font-weight: bold;
    letter-spacing: 3px;
}
.skillbar-css p:nth-child(2){
    float: right;
    position: relative;
    top: -30px;
}
.skill_percentage{
    background-color: #262626;
    padding: 4px;
    box-sizing: border-box;
    border: 1px solid #0fffb7;
    border-radius: 6px;
}
.skill_level{
    background-color: #0fffb7;
    width: 100%;
    height: 10px;
    border-radius: 6px;
}
<section>
   <div class="center">
      <h1 id="progress">Progress</h1>
      <br>
      <div class="skillbar-html">
         <p>HTML</p>
         <p>90%</p>
         <div class="skill_percentage">
            <div class="skill_level" style="width: 90%;"></div>
         </div>
         <br>
         <div class="skillbar-css">
            <p>CSS</p>
            <p>70%</p>
            <div class="skill_percentage">
               <div class="skill_level" style="width: 80%;"></div>
            </div>
            <br>
            <div class="skillbar-javascript">
               <p>JavaScript</p>
               <p>50%</p>
               <div class="skill_percentage">
                  <div class="skill_level" style="width: 50%;"></div>
               </div>
            </div>
         </div>
      </div>
   </div>
</section>

The Height: - On inspecting your code, I observed that there was a fixed height of 300px, along with centering applied to the parent div using margins and translations in CSS. To make improvements, I eliminated those margins, translations, and absolute positioning. You have the flexibility to adjust the fixed height (e.g., to span 100 view heights) to expand the grey background. For this demo, I set it as 100vh.

/* Customized progress bar */

.center {
    height: 100vh;
    width: 100%;
    padding: 20px;
    position: relative;
    background-color: rgba(0, 0, 0, 0.678);
    box-shadow: 0 2px 60px rgba(0, 0, 0, .5);
    border-radius: 10px;
    color: white;
}
.center #progress{
    margin: 0px;
    padding: 0;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 8px;
    border-radius: 20px;
    height: auto;
    background-color: rgba(0, 0, 0, 0);
}
.skillbar{
    box-sizing: border-box;
    width: 100%;
    margin: 20px 0;
}
/* Styling for different language skill bars */
.skillbar-html p{
    color: #fff;
    text-transform: uppercase;
    margin: 0 0 10px;
    padding: 0;
    font-weight: bold;
    letter-spacing: 3px;
}
.skillbar-html p:nth-child(2){
    float: right;
    position: relative;
    top: -30px;
}
.skillbar-css p{
    color: #fff;
    text-transform: uppercase;
    margin: 0 0 10px;
    padding: 0;
    font-weight: bold;
    letter-spacing: 3px;
}
.skillbar-css p:nth-child(2){
    float: right;
    position: relative;
    top: -30px;
}
.skill_percentage{
    background-color: #262626;
    padding: 4px;
    box-sizing: border-box;
    border: 1px solid #0fffb7;
    border-radius: 6px;
}
.skill_level{
    background-color: #0fffb7;
    width: 100%;
    height: 10px;
    border-radius: 6px;
}
<section>
   <div class="center">
      <h1 id="progress">Progress</h1>
      <br>
      <div class="skillbar-html">
         <p>HTML</p>
         <p>90%</p>
         <div class="skill_percentage">
            <div class="skill_level" style="width: 90%;"></div>
         </div>
         <br>
         <div class="skillbar-css">
            <p>CSS</p>
            <p>70%</p>
            <div class="skill_percentage">
               <div class="skill_level" style="width: 80%;"></div>
            </div>
            <br>
            <div class="skillbar-javascript">
               <p>JavaScript</p>
               <p>50%</p>
               <div class="skill_percentage">
                  <div class="skill_level" style="width: 50%;"></div>
               </div>
            </div>
         </div>
      </div>
   </div>
</section>

Answer №2

If I understand correctly, you are looking to increase the height of the black bar that contains your progress bar. In order to achieve this, you can use the following CSS code:

.skill-percentage {
  height: x; /* Specify the desired height here */
}

This code should adjust the height as per your requirement. To add spacing, you can utilize CSS padding or margin properties based on your specific needs. Below is a snippet with some modifications to your HTML structure for demonstration purposes:

/* Custom Progress Bar Styling */

* {
margin: 0;
padding: 0;
}

.center {
    height: 500px;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.678);
    color: white;
}
.center #progress{
    margin: 0px;
    padding: 0;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 8px;
    border-radius: 20px;
    height: auto;
    background-color: rgba(0, 0, 0, 0);
}
.skillbar{
    box-sizing: border-box;
    width: 100%;
    margin: 0;
}
/* Skillbar Languages Section Styling */

.text-container {
  display: flex;
  width: 100%;
  justify-content: space-between;
}

.text-container p {
  padding: 0 40px;
}
.skillbar-html {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.skillbar-html p {
  margin: 10px;
}

.skillbar-html > div {
  margin: 10px;
}

...

.skill_level{
    background-color: #0fffb7;
    width: 100%;
    height: 10px;
    border-radius: 6px;
}
<section>
            <div class="center">
                <h1 id="progress">Progress</h1>
                <div class="skillbar-html">
                    <div class="text-container">
                      <p>HTML</p>
                      <p>90%</p>
                    </div>
                    <div class="skill_percentage">
                      <div class="skill_level" style="width: 90%;">
                      </div>
                    </div>
                </div>
                <div class="skillbar-css">
                  <div class="text-container">
                    <p>CSS</p>
                    <p>70%</p>
                  </div>
                  <div class="skill_percentage">
                    <div class="skill_level" style="width: 80%;">
                    </div>
                  </div>
                </div>
                <div class="skillbar-javascript">
                  <div class="text-container">
                    <p>JavaScript</p>
                    <p>50%</p>
                  </div>
                  <div class="skill_percentage">
                    <div class="skill_level" style="width: 50%;">
                    </div>
                  </div>
                </div>
            </div>
</section>

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

Capture Your Scene with Three.js

I am facing an issue where I need to capture a screenshot of a website. I have tried using html2canvas and it is working fine. However, the problem arises because I am using both THREE.WebGLRenderer and THREE.CSS3DRenderer (for HTML in webGL). The screen ...

javascriptthree.jsscreenshothtmlhtml2canvas

Could someone explain to me why searchQuery.value is coming up as undefined?

Within my development task, I am endeavoring to create a functional search icon on the header bar that allows users to input Pokémon names for searching purposes. Despite my efforts, I am consistently facing a console error message suggesting "searchQu ...

javascripthtmljquerymodal-dialogbootstrap-5

Exploring how to display JSON objects containing spaces in an HTML table

Sorry if this question has been asked already, but I can't find the answer. I'm brand new to html/java/django and struggling with a seemingly simple issue. I am developing a web application that retrieves json data from firebase using python/pyre ...

pythonhtmljsondjango

Fine-tuning the page design

I'm working on a registration page using Bootstrap-5 for the layout. Is there a way to place all elements of the second row (starting with %MP1) on the same row, including the last field that is currently on the third row? See image below: https://i. ...

htmlcssbootstrap-5

Changing the content of a PHP div with an Ajax callback inside another Ajax callback?

In the index.php file, there is a script that triggers an ajax call when a header element is clicked. This call sends a $selection variable to ajax.php, which then replaces #div1 with the received HTML data. <script> $(document).ready(function(){ ...

javascriptphpjqueryhtmlajax

Activate the textbox without utilizing `.focus()` method

I am encountering an issue with a small iframe on my page. The content within the iframe is larger than the window itself, requiring users to scroll around to view it in its entirety. Within this iframe, there is a button that, when clicked, triggers an an ...

javascriptjqueryhtmlformsiframe

Place an element in relation to its initial position, ensuring that the x-coordinate is not set to 0

Is there a method to place an element in relation to its initial position, only excluding x=0 - meaning that the element is placed at its original vertical coordinate but sticks to the window's left edge? ...

htmlcss

Angular: Oops! Encountered some template parsing issues: Surprising closing tag encountered

Recently, I created a brand new project with Angular CLI on 05/25/17. I decided to copy and paste some HTML code into a new component in the project. Surprisingly, this HTML code, which worked perfectly fine as its own standalone page, is now causing compi ...

htmlangularhtml-parsing

Leveraging the power of map in an Angular typescript file

I've been attempting to populate a Map in Angular by setting values dynamically. When certain buttons are clicked, the onClick function is invoked. typeArray: Map<number,string>; Rent(movieId: number){ this.typeArray.set(movieId,"Rental ...

javascripthtmlangulartypescript

What is the best way to distinguish between a button click and a li click within the same li element

In my angular and css GUI, each line is represented as an li inside a ul with a span. The functionality includes a pop-up opening when clicking on the li background and another action occurring when pressing the button (as intended). The issue arises when ...

htmlangulartypescript

Lower the transparency of a container without affecting the transparency of its elements

Is there a way to decrease the transparency of the page contents container background without affecting the opacity of the actual content? <div id="container"> <div id="page contents"> Insert your amazing articles and more here. </ ...

cssopacity

Struggling with identifying errors in the Javascript code for my assignment

My code is giving me trouble and I could really use some assistance You can find my code in this GitHub folder: link. To see the project in action, visit this page on GitHub Pages: link. The task involves iterating over an array of names and printing eit ...

javascripthtmldebuggingweb

Responsive design challenge

I'm currently working on a WordPress theme with a fixed header and footer on the homepage, and a vertical slider in between that includes content and images. I've made the website responsive, but I'm facing an issue where the content in the ...

htmlcssresponsive-designscrollcss-position

Adding a script to the head of a Next.js page by using the Script component

I need assistance with inserting tracking code from Zoho application into the Head section of each page in my Next.js application. I am currently using a _document.tsx file and following the instructions provided by Next.js regarding the use of the Next.js ...

javascripthtmlreactjsnext.js

Establish the container with a specific height and enable scrolling functionality

Here is the code snippet I am currently working with: <section class="table"> <div class="table-row"> <div class="table-cell"></div> <div class="table-cell"></div> <div class="table-cell"></div> ...

htmlcss

Steps for creating a rubber compound with reduced elements

Sample Image Looking for a way to reduce the size of elements on a webpage without adapting them? I want the elements to shrink and align in a single column, and I will handle the adaptation myself. HTML: <!-- Trading --> <div class="main-co ...

htmlcss

The crossIcon on the MUI alert form won't let me close it

I am facing an issue with my snackBar and alert components from MUI. I am trying to close the alert using a function or by clicking on the crossIcon, but it's not working as expected. I have used code examples from MUI, but still can't figure out ...

javascriptcssreactjsmaterial-ui

Amusing antics observed when hovering over a div in Firefox

Issue resolved, many thanks to all Here is the dilemma I am dealing with something like this <a href='http://google.com' class="buy_now" > <div class='yada yada' > Go </div> </a> buy_now changes backgro ...

cssfirefoxhtmlhover

Is it possible to process HTML and JavaScript as a request in JMeter?

After receiving a response, I noticed that the HTML body contains a hidden form along with an internal JavaScript function to submit the form (view snapshot here). Is there a method in JMeter to execute JavaScript code that directly submits a form? I am ...

javascripthtmljmeter

Various CSS libraries offer a range of design options, including DataTables and Bootstrap

Incorporating both Bootstrap and DataTable into my design has caused conflicts with CSS styles. This issue extends beyond just these libraries, making me wonder if there is a way to prioritize my own styles over library styles. Can anyone provide guidanc ...

htmlcsstwitter-bootstrapdatatable