Ways to assign numerical values to vertical bars using HTML and CSS

Is there a way to create a Y-axis style line in HTML and CSS that looks like an actual Y-axis?

I've attempted the following approach, which technically works but doesn't have the desired appearance.

#mySpan{
  writing-mode: vertical-lr; 
  transform: rotate(180deg);
}
<table >
    <tr>
    <td><span style="writing-mode: vertical-lr; 
        transform: rotate(180deg);"> <b>Secondary Axis</b></span></td>
    <td>
    <ul>
    <br><br><br>
        <li>3</li><br><br><br><br>
        <li>2</li><br><br><br><br>
        <li>1</li><br><br><br><br>
        <li> 0</li><br><br><br><br>
        </ul>
    </td>
    <td> 
        <div  style="border-left: 1px solid black; height:250px;position:left;left: 50%;">            
        </div> 
     </td>


    </tr>
</table>

Unfortunately, this method also takes up additional space at the top or bottom due to the use of br tags.

Can anyone offer suggestions on how to modify this code so that it more closely resembles a Y-Axis?

Thank you

javascripthtmlcss

Answer №1

Follow these steps to achieve the desired layout: Apply display: flex; to the parent element to make the child elements flexible.

Use flex-direction: column; to display items in a column format. If this property is not set, the items will be displayed on a single line like the X axis.

Set justify-content: space-between; to evenly distribute the space between the items.

Please note that you can adjust the numbers inside the list items (LI) and they will automatically adjust accordingly.

.wrapper {display: flex;}
ul {list-style:none; height: 250px; display: flex; flex-direction: column; justify-content: space-between; border-right: 1px solid; }
li {
text-align:right;
position: relative;
padding-right: 5px;
}
li:after {
content: "-";
position: absolute;
top: 50%;
right: 0;
transform: translate(60%, -50%);
}
<div class="wrapper">
<ul>
  <li>0.0005</li>
  <li>13</li>
  <li>12.44</li>
  
  <li>1</li>
  <li>.100</li>
</ul>
</div>

Answer №2

It seems like there are several errors in your code. The issue with spacing likely stems from your
The second problem could be due to using a vertical line as a div with a fixed height style (consider increasing the height to 250px)

In the button line, if you intend to use this for adding formulas or something similar, it may not be suitable.

Consider starting with HTML canvas or SVG instead.

Answer №3

ul {
  list-style:none;
  border-right: 2px solid black;
  width: 30px;
}

li {
  margin-bottom: 100px
}

li:after {
  content: ">";
  padding-left: 12px;
}
<ul>
  <li>A</li>
  <li>B</li>
  <li>C</li>
  <li>D</li>
</ul>

Answer №4

You have the option to utilize Pseudo elements and CSS counters

*{
  box-sizing: border-box;
  padding: 0;
  margin:0;
}
body{padding: 6rem}
ul{
    position: relative;
    counter-reset: timeline-counter -1;
    border-left: 1px solid black; 
    
    transform: scale(-1) rotateY(180deg);
}

ul li{
    position: relative;
    counter-increment: timeline-counter; 
    height: 32px;
    color: white;
    background-color: grey;
    margin-bottom: 1rem; 
    list-style: none;
    transform:rotateX(180deg);
    line-height: 32px;
    padding-left: 1rem
} 

ul li:before { 
    content: "0" counter(timeline-counter); 
    position: absolute;
    top: 8px; 
    left: -32px;
    font-size: 1rem;
    color: black;
    line-height: 1;
}
ul li:after {
    content: "";
    --height-lenght: 1px;
    position: absolute;
    top: calc(50% - var(--height-lenght));
    left: -6px;
    width: 12px;
    height: var(--height-lenght);
    background-color: hsl(0deg 0% 0%);
}
<ul>
  <li>Line 1</li>
  <li>Line 2</li>
  <li>Line 3</li>
  <li>Line 4</li>
  <li>Line 5</li>
  <li>Line 6</li>
</ul>

Alternatively, you can achieve this using flexbox

*{
      box-sizing: border-box;
      padding: 0;
      margin:0;
    }
    body{padding: 6rem}
    ul{
        position: relative;
        counter-reset: timeline-counter -1;
        border-left: 1px solid black;  
        flex-direction: column-reverse;
        display: flex;
    }

    ul li{
        position: relative;
        counter-increment: timeline-counter; 
        height: 32px;
        color: white;
        background-color: grey;
        margin-bottom: 1rem; 
        list-style: none; 
        padding-left: 1rem; 
        line-height: 32px;
    } 

    ul li:before { 
        content: "0" counter(timeline-counter); 
        position: absolute;
        top: 8px; 
        left: -32px;
        font-size: 1rem;
        color: black;
        line-height: 1;
    }
    ul li:after {
        content: "";
        --height-lenght: 1px;
        position: absolute;
        top: calc(50% - var(--height-lenght));
        left: -6px;
        width: 12px;
        height: var(--height-lenght);
        background-color: hsl(0deg 0% 0%);
    }
<ul>
  <li>Line 1</li>
  <li>Line 2</li>
  <li>Line 3</li>
</ul>

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

Tips for securing data on an aspx page

Forgive me for this seemingly silly question, but, Recently, my client requested encryption for certain information from their payment system in order to prevent users from stealing personal data. The system is web-based and developed using ASP.NET. We&a ...

asp.nethtmlencryptioninformation-hiding

Angular - Exploring the Dynamic Validation of Multiple Fields Across Components

Currently in the process of developing a classifieds site using Angular. The main component of the route is structured as follows: Contains static fields (name, email, phone, location, etc.) defined in its template Includes a dynamically loaded compo ...

javascriptformsangulartypescript

The jQuery code functions smoothly on computers, but experiences delays when running on an iPhone

I was working on my website and trying to add a div that sticks to the top of the browser when it scrolls out of view. I found a script that works well on desktop, but when testing it on iPhone, there is a slight delay before the div pops back up in the ri ...

javascriptjqueryioscssiphone

What could be causing the pause function for videos to stop working in Chrome?

Recently, I've encountered an issue with the pause() function in Chrome while trying to stop a video playback. Despite using this method successfully in the past with Firefox, it seems to no longer work on Chrome browsers. I've simplified my code ...

javascriptjquerygoogle-chromevideo

Using Microsoft.Office.Interop.Word in ASP.NET, integrate HTML tags into a Word document

Is it possible to add HTML tags into a Word document using Microsoft.Office.Interop.Word in ASP.NET? Here is my code snippet: Microsoft.Office.Interop.Word.Paragraph oPara1; oPara1 = oDoc.Content.Paragraphs.Add(ref oMissing); oPara1.Range.Text = "<b&g ...

c#htmlasp.net

Dynamic images blending seamlessly with a fluid background aesthetic

Hello everyone, I could really use some assistance! My client is looking for a WordPress page with full screen backgrounds. Specifically, on one of the pages, they want 3 images placed on a fullscreen background image that remain in a fixed position while ...

csswordpressresponsive-design

Learn how to dynamically alter the background color of a webpage by utilizing a JSON API for random color selection

My goal is to trigger a javascript function onload that will dynamically change the background color of the webpage using random colors fetched from a JSON file. ...

javascripthtmljson

When Bootstrap 4 teams up with Autoprefixer, it results in malfunctioning old iPads

.row { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; margin-right: -15px; margin-left: -15px; } Recently, we implemented Bootstrap 4 and the Flex model at my company. We'v ...

cssflexboxbootstrap-4autoprefixer

What is the best way to ensure that my text is perfectly centered both horizontally and vertically within this DIV?

What's the best way to vertically and horizontally center text? Here is an example code that needs to be centered: <div style="display: block; height: 25px;"> <span id="ctl_txt" style="background-color: rgb(255, 0, 0);"> Basic ...

css

Retrieving a single item from an array of objects with the help of body parser

I need assistance with sending an array of objects to a post route in my express app. Here is my form (written in ejs format): <form action="/archiveList/<%= list._id %>" method="POST"> <input type="hidden" name="list" value = <%= items ...

javascriptexpressbody-parser

Dynamic Drop Down Menu with PHP and AJAX loading data from a JSON

Struggling to establish a connection between two drop-down menus using AJAX with data in JSON format. Despite multiple attempts, the code only displays empty drop-downs for both departments and projects. Unsure of where the mistake lies. Here is the code ...

javascriptphpjqueryajaxjson

Moving the camera in Three.js to focus on a specific point

Currently, I am in the process of developing a website utilizing three.js technology. For a preview, you can check out the demo by visiting: . The website is designed on canvas to ensure compatibility with iOS and Android devices. My main query pertains t ...

javascriptcamerathree.js

Utilizing the URLSearchParams object for fetching data in React

I've implemented a custom hook named useFetch: const useFetch = (url: string, method = 'get', queryParams: any) => { useEffect(() => { let queryString = url; if (queryParams) { queryString += '?' + queryParam ...

javascriptreactjs

Encountering an error while using $state.go function in Angular JS testing

Below is the code snippet for a Controller in Angular JS: describe('Controller: homeCtrl', function () { beforeEach(module('incident')); var homeCtrl, $state; beforeEach(inject(function ($controller, _$state_) { $state = _ ...

javascriptangularjskarma-jasmine

Update the image on a webpage by simply clicking on the current image

Hey there, I'm looking to implement a feature where users can choose an image by clicking on the current image itself. Here's my code snippet. The variable url holds the default image. My goal is to make the current image clickable so that when ...

htmlcssangulartypescript

Issue with FileStreamResult not triggering download prompt after AJAX call in MVC

I am encountering an issue with my code that is triggered by the "export" li tag. It converts a FusionChart to an SVG string and then sends it to my controller via an ajax call. The problem I'm facing is that even though the controller receives the r ...

javascriptjsonajaxasp.net-mvcpdf

Tips for simulating a dropdown selection from a remote location

I have multiple dropdown selection menus where changing the option in one menu affects the options in the next menu, and so on. I want to programmatically trigger a change (without user interaction) in the dropdown menu that will activate the JavaScript f ...

javascriptjqueryprototypejsdom-events

- Aligning list items using UL bullet style

I'm having trouble aligning my ul dropdown with the rest of my menu. Even after removing the Bullet from my ul dropdown, it still maintains its position (I expected it to move all the way to the left side of the page). I've attempted various st ...

htmlcss

What is the best way to position text at the bottom of an image using CSS?

Utilizing the jQuery Caption Plugin to showcase the image alt text when hovering over an image. Currently, the text is displaying at the top but I would like it to show at the bottom. Any suggestions on how to remedy this? Desired Outcome: Check out the ...

jqueryhtmlcssimage

Tips for integrating H4 - H6 using a text editor in DNN7

It is essential for my client to have access to at least H4. Although I can add H4 to the ApplyClass menu in the text editor, it only applies a <span class="h4"> Sample </span> tag within the paragraph itself. Unfortunately, this method does ...

javascriptjqueryeditordotnetnukedotnetnuke-7