I've been working on creating a UI similar to the image, but I'm struggling with positioning elements correctly. Despite trying different combinations, I can't seem to get it right. Can anyone offer some assistance?
My main issue is getting the percentage text to align with the progress bar.
Here's what I have so far: JSFiddle
Current Result:
Is this the sort of thing you're looking for?
Check out the updated JsFiddle here
To style the span (the percentage number) and the progress_type2 percentage with a specific width and using float:left, follow these CSS rules:
td span{
float:right;
width:20%;
text-align:center;
}
.progress_type2 {
width:80%;
float:left;
}
Just as Aminesrine suggested, you have the option of applying {float: left;} to the progress bar element. Alternatively, you could opt for {display: inline-block;} on both elements or even utilize {position: absolute;} specifically on the percentage element.
If you are willing to take the risk of elements overlapping before wrapping onto a new line, consider using {position: absolute; top: 7px; right:0px} and then adjusting the top and right pixel values accordingly to achieve the desired design outcome. Keep in mind that whenever you use absolute positioning, it's important to set the parent container to {position: relative}; in this scenario, that would be the table cell.
No matter which route you decide to take, remember to thoroughly test for compatibility and responsiveness. Each of these three options may yield different outcomes, so it's crucial to ensure everything functions smoothly across various devices and browsers.
To enhance the appearance of the progress bar, consider adding the CSS property float: left to the encapsulating div element with the class progress_type2. Additionally, assign a specific width value to further customize its display:
.progress_type2 {
float: left;
width: 70%;
}
<nav class="navbar navbar-expand-md fixed-top whitelight nav-masthead"> <a class="navbar-brand gold-text" href="companyName.php">Company Name</a> <!--Creates a clickable button with a toggle icon once ...
My new WordPress theme is unexpectedly outputting an <em> tag, even though I haven't used any <em> tags in my theme. This is causing issues and affecting the design. Below is the content of my index.php file: <?php get_header(); ?> ...
Can you help me figure out this calculation? €70.00 Total VAT €12.6 Total €82.59 I'm puzzled as to why the total jumps from 12.6 to 82.59. Is there a known issue causing this discrepancy? ...
Upon further investigation, I have observed that history.js has the ability to automatically transform http://www.site.com/some/path#/other/path into http://www.site.com/other/path when used with a html5 enabled browser. While this feature is useful, ...
Whenever I enter a URL into a text input and press enter, my objective is to have the URL open in an iframe. However, some websites produce an error when trying to do so. Is there a method to successfully display a web page in an iframe? Error message: Th ...
I have created a form to handle user input using PHP, with the initial question prompting the user to choose from three radio buttons for the "type" parameter - the options being "book", "journal", and "website". Here is what the code looks like: <stro ...
I am trying to display an SVG image inside a fixed-position div. Here is the HTML: <div class="main"> <svg class="svg" viewBox="0 0 180 100"> <rect height="100%" width="100%" fill="#003300"></rect> </svg> </div> ...
I have a simple bootstrap row containing two columns: <div class="row"> <div class="col-xs-7"> <p>Walking together</p> </div> <div class="col-xs-5" id="stay"> <p>Joyful journey</p> </div ...
Hey there, This is how my .modal CSS code appears: .modal { position: fixed; top: 10%; left: 50%; z-index: 1050; width: 560px; margin-left: -280px; background-color: #fff; border: 1px solid #999; border: 1px solid rgba ...
Currently in the process of designing a brand new website using NextJS and Tailwind. I am looking to incorporate an infinitely translating background effect that moves towards the bottom right, similar to this example (but with my own unique pattern): htt ...
I am struggling with centering a background image along with a 1-line text vertically and horizontally inside a div. Although I have successfully centered the image, the text remains misaligned. I attempted using vertical-align: middle without success. Be ...
I am trying to optimize my webpage by adjusting the carousel so that it fits perfectly within the window without generating a vertical scrollbar. Can anyone provide guidance on how to achieve this? Page: <div id="carouselIndicators" class=&qu ...
I'm attempting to discover how to create a background image that scrolls at a slower pace than the page contents. I'm currently unsure of how to achieve this effect. A great example of what I'm aiming for can be seen here Would this require ...
Is it possible to have a DIV displayed over a PDF document? This method seems to work with Firefox, but not with Internet Explorer 8 or 9. It's worth noting that the problem persists regardless of which PDF file is being pointed to. <html> < ...
I am currently facing an issue with my dynamically built web page where the links shared on Google+ are not showing snippets properly. I have followed the example snippet for article rendering and documentation provided here: https://developers.google.com ...
At times, I find myself in need of writing a small program to visualize some data in a chart or similar format. I've been thinking about using HTML5 through the browser to accomplish this, specifically utilizing its canvas to design a user-friendly in ...
I'm striving to develop a straightforward multi-select dropdown utilizing angular JS, bootstrap, and JS. This dropdown should display days (mon, tue...sun), with options for select all and unselect all. My goal is to create a controller that will de- ...
After reviewing this answer, I can't help but wonder if there's a more efficient method for importing a CSS file into a React component, similar to how JS files are imported. Perhaps something akin to SCSS's @import url('cdn-url.css&ap ...
I've encountered a peculiar issue where users need to scroll twice or the page gets stuck on mobile devices that are less than 600px wide. I've attempted the following solutions with no success. I am a complete novice, so please excuse my lack of ...
CodePen If you exclude the overflow property from the CSS selector .wrapper in the CodePen example, the waypoints functionality will work properly. However, it does not function correctly when using the overflow set to hidden either horizontally (x) or ...