Setting Up One Stylesheet Based on Local Preferences

I am working on positioning translated text on a webpage. The word NEW in English and NOUVEAU in French need to be centered below a graphic. Since the words have different lengths, I am considering using absolute positioning. The challenge is setting the left value based on the locale, either en or fr.

Below is the code in my view:

<p class="header-new1"><%= "#{t :new_landing}" %></p>

My current CSS code correctly positions NOUVEAU:

.header-new1 {
    text-transform: uppercase;
    text-align: center;
    padding-top: 5px;
    color: @red;
    font-size: 143%;
    font-weight: bold;
    position: absolute;
    top: 450px;
    left: 652px;
}

I have explored various solutions, but none seem to address my specific requirements. I am hoping to find a cleaner method that does not involve creating separate CSS for each locale and instead dynamically adjusts based on the locale in the view. Any advice on achieving this would be greatly appreciated.

Answer №1

Just to clarify:

So, you have an image (graphic) that you want to center a paragraph (p) underneath? Have you tried setting the width of the paragraph to match the image/graphic and applying text-align: center in your CSS? That approach should solve the issue. Or am I misunderstanding the situation?

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

Issues with the parallax zooming out effect

Delving into the world of parallax effects, I'm on a quest to achieve a captivating zoom-out effect while scrolling. However, I'm encountering an issue where the image shrinks beyond the browser width and the div's height. In the example pr ...

Is it possible to launch an Electron application by clicking a run button in the VSCode

I'm new to using VSCode and am currently working on an HTML5 app with Electron. I'm finding it cumbersome to switch between windows and enter a command each time I want to test my application. Is there a way to configure VSCode to run my Electron ...

Determine the height of the left div, which is set to auto, and apply the same height to the right div, which has overflow set

I am facing an issue that needs a solution. I need to ensure that two div elements have the same height. The left div should have 'auto' height while the right one must match it. Moreover, the right div contains 14 nested divs that need to be scr ...

Email sending through PHP AJAX can be done without refreshing the page. The email action is handled in email.php and incorporated into

I am having trouble sending this with AJAX. The error message I keep getting is: Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more assistance, please visit @ jquer ...

WebGL annotations failing to display on the webpage

I'm currently working on displaying a 3D model using Three.js in a web browser and looking to incorporate annotations like the ones shown in this Sketchfab model: Interactive 3D Test. I came across a helpful guide at this link, but I'm facing iss ...

Determining if an HTML dialog was closed using the escape key

Wondering about detecting when an HTML dialog is closed using the ESC key. Specifically referring to the HTML dialog, not jQuery. ...

Position the scroll down arrow at the center bottom of a full-screen div using WPBakery Visual Composer

I have a series of full-screen sections in Visual Composer and I am trying to add an arrow at the bottom of each one to indicate to users that they should scroll for more content. However, my attempts with absolute positioning on the divs containing the ic ...

Experience the classic game of rock-paper-scissors brought to life through JavaScript and HTML,

I've been working on a rock, paper, scissors game in JavaScript and I'm struggling to get the wins and losses to register correctly. The game keeps resulting in a draw even though I've checked my code multiple times. It's frustrating be ...

The gaps separating rows

I'm struggling with getting my divs to look like a table, especially when it comes to highlighting a selected row. I've tried adjusting padding and margins without success. Does anyone have any suggestions on how I can achieve this effect? .ta ...

Vuetify's data table now displays the previous and next page buttons on the left side if the items-per-page option is hidden

I need help hiding the items-per-page choices in a table without affecting the next/previous functionality. To achieve this, I've set the following props: :footer-props="{ 'items-per-page-options':[10], &apo ...

Navigating to a specific div within a container with vertical overflow in an Angular application

I am working on an angular application where I have a left column with a scrollable div that has overflow-y: auto;, and a right column with bookmark links that jump to sections within the scrollable container. I am currently facing two challenges: 1 - Co ...

What is the best way to deactivate unclicked href links within a loop?

https://i.sstatic.net/sUufY.png Looking at the template image, my goal is to disable all links that were not clicked when one of the links from 'number1' to 'number3' is clicked. For example, if 'number2' is clicked, then &ap ...

Exploring an Array Based on User's Input with JavaScript

Looking to implement a search functionality for an array using AJAX. The array is pre-populated with values, and the user will input a value in a HTML text box. If the entered value is found in the array, it should display "Value found", otherwise "not f ...

What are the best ways to utilize dynamic CSS on a smartphone browser for optimal performance?

Struggling to optimize my web application for mobile devices, I've encountered challenges with consistent display across different browsers. My idea is to utilize device capability detection to adjust widths and font sizes dynamically based on screen ...

Prevent accordion expansion triggered by the More button click

When the More button is clicked, it should NOT expand and collapse. https://i.sstatic.net/toV1b.gif If the accordion initial state is open, it must stay open even if button is clicked, if initial state is collapsed then after the more button the accordio ...

What is the best way to align a div with a fixed width in the center, when it is positioned between two other divs within a parent

I have this HTML (technically JSX) code snippet here: https://i.sstatic.net/jXYz0.png The center div with the class domain-input-parent is supposed to have a fixed width of 400px and stay centered horizontally on the screen. This arrangement ensures that ...

What is the solution to the error message "cannot find specified file or directory, lstat 'scss/'"?

I am currently following a tutorial on YouTube here where the instructor is demonstrating how to run an npm script "sass" file using the terminal. When I try executing the command npm run sass, it gives me an error message: Error: ENOENT: no such file o ...

Implementing a rail ajax remote form to automatically update a text field after submission

My main goal is to dynamically update a text field on my webpage with a specific value after submitting a remote form using Rails. If you are interested, you can find all the source code on github at this link: https://github.com/iamliamnorton/fasdac The ...

Using HTML and CSS to generate an alpha mask on top of an image

I am currently working on a website and I am looking to create an effect where an image is masked by an overlay. The goal is to achieve a "fade out" effect, without any actual animation, but rather make it appear as if the image is gradually fading into th ...

Enhancing the layout of a bootstrap table: Creating space between rows while maintaining borders

table{ width: 100%;max-width: 100%; margin-bottom: 20px;border:solid 1px #000; border-collapse: collapse;} tbody tr{border:2px solid #256ac4;} td{ color: #8d9097; vertical-align: top; font-size: 14px;} th{text-align:left} <table> <thead> ...