What is the process for generating vertical text with html and css?

I am attempting to create a block on my website that resembles the image below:

https://i.sstatic.net/lua4J.png

Unfortunately, I have tried but it is not working. Here is the HTML code I used:

<div class="timelines">
    <div class="timeline_div" style=" width:65px; float:left; cursor:pointer;" data-count="1">
        <div style="width:100%; float:left;">
        <div class="timeline_circle">
        <div class="timeline_year">2015</div>
        <div class="timeline_month">Sep</div>
        </div>
        <div class="line"></div>
        </div>
        <div style="width: 100%; float: left; ">
        <h4 class="timeline_heading">heading</h4>
        </div>
    </div>

    <div class="timeline_div" style=" width:65px; float:left; cursor:pointer;" data-count="2">
        <div style="width:100%; float:left;">
        <div class="timeline_circle">
        <div class="timeline_year">2015</div>
        <div class="timeline_month">Oct</div>
        </div>
        <div class="line"></div>
        </div>
        <div style="width: 100%; float: left; ">
        <h4 class="timeline_heading" >BRICKWORKS, FLOORING, PLASTERING</h4>
        </div>
    </div>

    <div class="timeline_div" style=" width:65px; float:left; cursor:pointer;" data-count="3">
        <div style="width:100%; float:left;">
        <div class="timeline_circle">
        <div class="timeline_year">2015</div>
        <div class="timeline_month">Nov</div>
        </div>
        <div class="line"></div>
        </div>
        <div style="width: 100%; float: left;">
        <h4 class="timeline_heading" >BRICKWORKS, FLOORING, PLASTERING, ELECTRICAL, PLUMBING, HEATING, ALUMINIUM</h4>
        </div>
    </div>

    <div class="timeline_div" style=" width:65px; float:left; cursor:pointer;" data-count="4">
        <div style="width:100%; float:left;">
        <div class="timeline_circle">
        <div class="timeline_year">2015</div>
        <div class="timeline_month">Dec</div>
        </div>
        <div class="line"></div>
        </div>
        <div style="width: 100%; float: left; ">
        <h4 class="timeline_heading" >fvbfgb</h4>
        </div>
    </div>
...
</div>

Here is the CSS I applied:

.timeline_heading 
{
    transform: rotate(-90deg);
    moz-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    -webkit-transform: rotate(-90deg);
}

In the example above, the text in the third block rotates and overwrites other content. How can I fix this issue?

htmlcsstransform

Answer №1

.rotate-text {
    transform: rotate(270deg);
    transform-origin: top left 0;
}

Resource:

Answer №2

Give this method a shot:

<table>
    <tr>
        <th><div class="rotate horizSpace">Foo</div></td>
        <th><div class="rotate horizSpace">Bar</div></td>
         <th><div class="rotate horizSpace">doo</div></td>
        <th><div class="rotate horizSpace">carr</div></td>
    </tr>
    <tr>
        <td>10</td>
        <td>20</td>
        <td>30</td>
        <td>40</td>
    </tr>
</table>

Also, include this CSS:

td {border: 1px solid #ccc; padding:5px;}
th {background-color: #666; color: #fff; padding: 5px;}
table { border-collapse: collapse; }
body {font-family: verdana; font-size: 11px; }

.rotate {
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -ms-transform: rotate(90deg); 
  -o-transform: rotate(90deg);
  transform: rotate(90deg);

  /* also accepts left, right, top, bottom coordinates; not required, but a good idea for styling */
  -webkit-transform-origin: 50% 50%;
  -moz-transform-origin: 50% 50%;
  -ms-transform-origin: 50% 50%;
  -o-transform-origin: 50% 50%;
  transform-origin: 50% 50%;
}
.horizSpace
{
  padding: 5px 0;    
}
.rotate { filter:  progid:DXImageTransform.Microsoft.BasicImage(rotation=1)\9 } /* IE8 and below */
.rotate { filter /*\**/: progid:DXImageTransform.Microsoft.BasicImage(rotation=1)\9 } /* IE8 standards mode */
:root .rotate { filter: none; }  /* remove hack in IE9+ */

View the demo here

For more information, check out this page

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 a shape similar to an inverted circle be created using CSS and jQuery?

I'm stumped on how to create an inverted circle in the corners. I've included a picture for reference. https://i.stack.imgur.com/jeNdh.jpg Is it feasible to achieve this effect using CSS3 or maybe jQuery? ...

javascriptjquerycsscss-shapes

Utilizing Bootstrap 4 columns to control the height of a separate column

Is there a way in CSS to make one column in a bootstrap grid determine the height of another column within the same row? For example, consider the following scenario: <div class="row"> <div class="col col-sm-6" id="column1"> <!-- an e ...

csstwitter-bootstrap

Dropdown colorization

I want to create a dropdown menu in my black navbar, but the text color becomes blue and the background of the pop-up turns white, which clashes with my black background. I need it to be transparent while using Bootstrap v4.1.1 <nav className="navbar n ...

cssbootstrap-4react-bootstrap

What is the best way to add a one-column space between each item component in Material-ui Grid?

I'm just getting started with Material UI for React. In my design, I need to have a one-column gap between each item component, totaling 12 columns. For example, it should look like this: 3 column item + 1 column gap + 3 column item + 1 column gap + ...

cssreactjsmaterial-uicss-grid

The issue of slides overlapping in a Javascript slideshow during auto play mode

I encountered an issue while creating an automatic slideshow with 4 slides. Upon autoplay for the first time, slide 1 overlaps slide 4, as well as slide 2 and 3. This only happens once after the site loads. However, on subsequent playthroughs or when using ...

javascriptjquerycssslideshowoverlapping

Is there a way to enable hover functionality on mobile devices? I wish for the hover effect seen on desktop to be triggered automatically on mobile devices

I attempted to implement @media (hover: hover) without success. In my design, I have three images in a row that reveal a text overlay when hovered over with a mouse. However, the issue arises when I try to switch to a mobile view, as the images remain un ...

javascripthtmljquerycssbootstrap-5

Toggle Visibility of Elements with Javascript and Html

I've been working on implementing a "Show All / Hide All" feature. Currently, clicking on the text opens the image and text individually. However, I am looking to add a functionality for expanding all divs at once. To see how it currently functions, ...

javascriptjqueryhtmlhideshow

Gorgeous Stew encounters a cautionary message before encountering a glitch in the middle of the

Currently, I am systematically going through every Wikipedia page related to a specific date (from January 1 to December 31). My primary focus is to extract the names of individuals who celebrate their birthday on that particular day. However, as I reach A ...

pythonhtmlbeautifulsoup

A unique Javascript feature that switches the text on various buttons

As someone who is relatively new to Javascript and web development, I am currently working on a project that involves creating multiple text areas for users to input and save text. Each text area is accompanied by a button with a unique ID that functions a ...

javascripthtml

Adding Information to a Material Design Card

Currently, I am delving into frontend development and honing my CSS skills. In my latest project, I have incorporated a mat card which can be viewed in the linked image https://i.sstatic.net/TEDcg.png. Below is an excerpt of my code: <div class=&quo ...

htmlcssbootstrap-4angular-materialmat-card

Converting JSON into HTML format

Seeking guidance as a developer tasked with rendering JSON to HTML on a webpage. I've taken over for someone else and, despite feeling somewhat in over my head, have managed to build the basic structure using Catalyst/Template Toolkit and Dojo. Now th ...

htmljsondojoxmlhttprequest

How can the parent div's height be determined by the child div when using position: absolute?

I am struggling with setting the height of a parent div that contains a nested child div with absolute positioning. The child div has a fixed height of 652px, but I cannot seem to get the parent div to match this height. I have tried adjusting the clear an ...

htmlcsspositionheightabsolute

How can I prevent users from using the inspect element feature in Angular 4?

I have a collection of elements that I need to selectively display on a webpage. To achieve this, I am utilizing the following code snippet: [style.display]="!student.selected?'none':'block'" However, upon inspecting the element, a ...

htmlangularangular-ui

What is the method for creating a fixed position div that remains until a certain point?

Is there a way to prevent the position: fixed; property from being applied after a certain point on the screen scroll using only CSS? ...

csshtmlfixed

Difficulties when running Python scripts containing HTML on localhost or through the command line

I am encountering an issue with my python file that contains some HTML code. The file is intended to display "Hallo" when executed in the command line, and to show formatted HTML when opened in a browser. However, it only prints out the raw HTML code in ...

pythonhtmlcgi

"Enhance your website's loading speed with the Google Page Speed Up

Hi, I've been using the Google PageSpeed Module and have created a .htaccess file to optimize my website (www.anetoi.com). I tried using combine_css to merge my CSS files but it didn't work as expected. I followed Google's instructions but s ...

cssperformance.htaccessweb

Changing the format of PHP SQL results from vertical to horizontal

Is there a way to convert the vertical table generated by the following code into a horizontal one with stylish formatting? Additionally, is it possible to display certain columns in a popup window based on query parameters using jQuery or CSS? <html&g ...

phphtmlcsssql

I'm having trouble getting my text values to line up next to my slider bar

I've been troubleshooting this issue for a couple of hours now. (My CSS skills are not the best) Currently, I have two jQuery sliders with values. My goal is to position "Rooms: 0" and "Bathrooms: 0" right next to their respective slider bars. . ...

jqueryhtmlcsscss-float

The event listener function is not functioning properly on images generated by JavaScript

I'm currently working on placing multiple images on a grid in the center of the page and would like to include a function that triggers when each individual image is clicked. The images are dynamically created using JavaScript and inserted into the do ...

javascripthtmlcss

Unable to submit multiple forms simultaneously on the same HTML page

I have been encountering an issue with forms in a particular file. The problem arises when I click submit, rather than submitting the data from the filled form, it submits the data from the first form. Despite specifying unique ids for each form as shown i ...

phphtmlforms