Tips for properly positioning and rotating text in CSS and HTML!

My goal is to place a rotated headline next to some text, but I'm facing challenges with positioning when the page is resized. While absolute positioning works easily in a static scenario (left picture), it fails when the page size changes (right picture).

Current CSS (subject to change):

.headline {
  white-space: nowrap;
  position: absolute;
  top: 185px;
  left: -20px;
  transform: rotate(270deg);
}

Current HTML structure (subject to change):

<header>
    <h1 class="headline">About Me</h1>
</header>
<div class="text">
  <p class="introduction">....</p>
</div>

I'm looking for a solution to position the element so that it always stays 20px away from the paragraph. Are there any existing patterns or resources that can help me solve this issue?

A Javascript (and jQuery) workaround could be an option, although I would prefer a CSS-based solution.

htmlcss

Answer №1

I faced a similar issue and found a solution using pure CSS:

.container {
  position: relative;
}

.item {
  position: absolute;
  transform: translateX(-100%) rotate(-90deg);
  transform-origin: right;
  left: 30px; /* adjust as needed */
  top: 30px; /* tweak as needed */
}

Answer №2

After reviewing both Diego's answer and Smamatti's comment, I found a solution that worked for me:

I utilized the properties transform-origin:bottom and width:0, which quickly resolved most of my issues. However, I still struggled with positioning the text independently of its length, ultimately resorting to using javascript.

.header
{
    margin: 0;
    width: 0;
    white-space: nowrap;
    position: absolute;
    text-align: left;
    transform-origin: bottom; 
    margin-top: 280px;
    transform: rotate(270deg);
}

To handle variable text lengths dynamically, I incorporated the following javascript:

function adjustSideHeader() {

//check if the headline is visible
  if($('h1.headline').length > 0)
  {
    var headline = $('h1.headline')[0];
    var stringLength = headline.textContent.length;
    //add style tag to support media queries
    document.querySelector('style').textContent +=
       "h1.headline { margin-top: " + (stringLength*23.5) + "px; -webkit-transition: margin-top 2s; transition: margin-top 2s;}"
  }    
}

// fire it when document is loaded
$(document).ready(setTimeout(adjustSideHeader, 300));

The implementation resulted in:

Answer №3

Have you attempted to relocate

<h1 class="headline">About Me</h1>

within

<div class="text">?

and adjust

.text {
    position: relative;
}

so that the positioning is relative to the "text" division. Subsequently, consider shifting the About Me text to the left by decreasing its left value.

Answer №4

Have you experimented with using position:relative along with the margin property? It might look something like this:

.headline {
     white-space: nowrap;
     position: relative; //updated
     margin-top: 185px; //modified
     margin-left: -20px; //adjusted
     transform: rotate(270deg);
}

*Note: Consider moving the headline inside the paragraph element for better structure.

Answer №5

My solution may be delayed, but it worked wonders for me.

In typical scenarios, your text will have a specific class or id with absolute positioning values like this:

.TextClass{
    position:absolute;
    top:50%;
    left:55%;
    transform:rotate(-90deg);

However, the issue arises when you rotate the text and its positioning becomes relative.

I discovered that by enclosing the rotated text within a parent div, you can freely position the (unrotated, absolutely positioned) parent div however you want, and then apply the rotation to the text (now relatively positioned) inside the parent div, as shown below:

.divname{
    position:absolute;
    top:50vh;
    left:50vw;
}
.TextClass{
    position:relative;
    transform:rotate(-90deg);
}

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

Preventing attribute or tag cloning in Jquery: What you need to know

I'm having some trouble with JQuery. I want to clone an attribute or tag that is dragged from one div1 to another div2, which is working fine. But the issue arises when I drag or move the position of an existing tag on div2, then the cloning process s ...

javascriptjqueryhtmlcss

Image floating gracefully in the top corner of the screen

Check out this Picture I am trying to create a floating image similar to the one in the top left corner of the navigation bar. After searching for some code to achieve this, I came across the following: <html> <head></head> <bod ...

htmlcss

Updating the iFrame source using jQuery depending on the selection from a dropdown menu

I want to create a dynamic photosphere display within a div, where the source is determined by a selection from a drop-down menu. The select menu will provide options for different rooms that the user can view, and the div will contain an iframe to showca ...

javascriptjqueryhtmlcssiframe

I'm looking to properly position my logo, header, and paragraph within the jumbotron using Dash Bootstrap

While working with Dash in Python, I encountered an issue trying to align the logo header and paragraph horizontally within a jumbotron. Here is what I was seeing: https://i.sstatic.net/ZNTAr.png However, my aim was to achieve a design similar to the imag ...

pythonhtmlcssbootstrap-4plotly-dash

Distinguish between datalist selection and text input in BootstrapVue Autocomplete

When looking at the code snippet provided below, I'm trying to figure out the appropriate event/method to determine whether the value entered in the input field was manually typed or selected from the <datalist>. SAMPLE CODE: <div> &l ...

javascripthtmlvue.jsvuejs2bootstrap-vue

Issue with JavaScript function loading website homepage solely is functioning only for the first time

I am in the process of creating my own personal website. To ensure seamless navigation, I added a "home" button that, when clicked, triggers a JavaScript function called loadhomepage() to load the homepage. While this function works perfectly upon initial ...

javascriptjqueryhtmlcss

Using Angular/Typescript to interact with HTML5 Input type Date on Firefox (FF)

Are there any Angular/Typescript projects that are completely built without relying on third-party libraries? I am encountering problems with Firefox and IE11. It works fine on Chrome where the value can be read, but the calendar does not display when us ...

htmlangulartypescript

Tips for updating the chosen value with jquery or javascript

I am facing a situation where I need to change the selected option in a dropdown menu using a function triggered onClick later in the application. <select id="myselect"> <option value=aa>aa</option> <option value=bb>bb</option&g ...

javascriptjqueryhtml

Using data fetched from PHP in HTML via jQuery post: A step-by-step guide

I have created a function in jQuery that uses $.post to send data to a PHP file. The query in the PHP file is working fine and returning the data back successfully. JavaScript code: function send_agenda_data(cidade_data){ var data = {'cidade_dat ...

phpjavascriptjqueryhtmlpost

Struggling with incorporating elements into a dynamic CSS3 banner design?

Struggling to add up to 10 text items to the CSS3 animated banner. Having difficulty getting the items to display properly. I'm curious if there is a simpler way to achieve this with animations as shown in this example: http://jsfiddle.net/zp6B8/1/ & ...

javascriptjqueryhtmlcss

What strategies can be used to effectively structure CSS and JavaScript in a project for optimal organization?

In my NetBeans project, I currently have a large web project with CSS files included in the header. Some CSS codes are needed on all pages, while others are only necessary for specific pages. I am looking to optimize high-traffic pages by removing any ...

javascriptcssreorganize

Create a stylish navigation dropdown with MaterializeCSS

Incorporating the materializecss dropdown menu feature, I encountered an issue where only two out of four dropdown menu items were visible. Here is the HTML code snippet in question: <nav class="white blue-text"> <div class="navbar-wrapper con ...

javascripthtmlcssmaterialize

A guide on showcasing a value in an Input box using AngularJS

Recently, I started delving into AngularJS and I am determined to create a user info editing page where the old info is displayed in input fields. The goal is to allow users to easily see and update their information. I previously achieved this without usi ...

javascripthtmlangularjsfrontend

What is the best way to retrieve both the start and end date values from a React date range picker component

I have integrated a date range picker npm package called react-date-range into my code. On my screen, there is an "Apply Dates" button. When this button is clicked, I want to retrieve the selected date range value. How can I achieve this onclick event? ...

javascripthtmldatepickerreactjsnpm

How can I make an image the background on a webpage when clicking the mouse?

I find myself in a predicament without any code to guide me. The idea seems simple - I desire the ability to select an image from a collection and set it as the background image for the webpage. While I understand that JavaScript is essential for this tas ...

javascripthtmlcssbackground-image

Utilizing Google Chrome Developer Tools for JQuery console debugging

Just started using jQuery and was expecting to see [<li>my name</li>, in the Google Chrome console but got: [li, prevObject: r.fn.init(1)] 0 : li length : 1 prevObject : r.fn.init(1) proto : Object(0) <html> ...

jqueryhtmlcss

When hovering over it, an element within an li tag appears larger than its parent element

I'm currently working on a project for my school classes and running into an issue with CSS. I'm trying to enclose everything in boxes, but it's proving to be quite challenging. The main problem I'm facing is that when I hover over the ...

htmlcss

Steps for Implementing an Event Listener in JavaScript

While working on a page in Chrome, I encountered an issue where I wanted a modal to show up when a user clicked on an image. However, the functionality was not working as expected on my localhost. Upon further inspection, I believe there might be a problem ...

javascriptjqueryhtmlcss

Utilize a custom endpoint for Microsoft Graph Toolkit: "Implement a domain-specific endpoint"

I'm currently following the instructions provided at this Microsoft Graph Toolkit tutorial. My code is quite straightforward, including the script reference, the mgt-msal2-provider element with my client-id specified, and a basic login component < ...

htmlazuremicrosoft-graph-api

Building a Strong Foundation with Bootstrap's Scaffolding and Mixins

I'm a bit confused by the Bootstrap documentation's explanation of scaffolding and mixins. I tried looking up information on scaffolding in CSS, but couldn't find a clear answer. When it comes to mixins, different websites seem to have varyi ...

csstwitter-bootstrap