Adjusting text to begin after a variable by two spaces (equivalent to 5 pixels)

When displaying the echoed text below, I noticed that "DURING" sometimes overlaps with the variable $submittor when there are not enough  s. On the other hand, if too many  s are added, there ends up being excessive space between $submittor and "DURING" for shorter values of $submittor.

Is there a method to ensure that "DURING" always begins two spaces (or 5 pixels) after the end of $submittor, regardless of the length of $submittor?

Thank you in advance,

John

The provided code snippet:

echo '<div class="sitename3name">SUBMITTED BY <a href="http://www...com/.../members/index.php?profile='.$submittor.'" >'.$submittor.'</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;  &nbsp;&nbsp;&nbsp;&nbsp; DURING '.$dt->format('F j, Y &\nb\sp &\nb\sp g:i a').'</div>';

The accompanying CSS style rules:

.sitename3name { 
   position:absolute;
         width:800px;
         left:31px;
            top:189px;
   color: #999999;
   font-family:Arial, Helvetica, sans-serif;
   font-size: 10px;
   font-weight: normal;
   height: 5px;
   padding-bottom: 0px;

}

.sitename3name a{ 
   position:absolute;
   color: #004284;
   text-decoration:none;
   font-family:Arial, Helvetica, sans-serif;
   font-size: 10px;
   font-weight: bold;
   height: 5px;
   padding-bottom: 0px;

}

.sitename3name a:hover{ 
            position:absolute;
   color: #FFFFFF;
   background-color:#FF0000;
   text-decoration:none;
   font-family:Arial, Helvetica, sans-serif;
   font-size: 10px;
   font-weight: bold;
   height: 5px;
   padding-bottom: 0px;

}

Answer №1

To enhance the appearance of "DURING," consider enclosing it in a span element, positioning it to the left with a float property, and adding a 5px margin to its left side:

<span class="during">DURING</span>

.during
{
   float: left;
   margin-left: 5px;
}

This technique may prove effective for your design.

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

What is the best way to disable the click function for <a> tags that have a specific class?

I am dealing with parent navigation items that have children, and I want to prevent the parent items from being clickable. Here is an example of how they currently look: <a href="parent">Parent Item</a> Is there a way to select the <a> ...

What is the best way to make the div inside the table cells expand to fill the available space?

I'm having trouble making the inner divs within table cell divs expand and fit their parent div without overlapping the next cell below it. Check out the sandbox for reference I've outlined the areas in grey where I want the cells to be filled. ...

How to retrieve the image source using jQuery

<img src="../img/arnold.png" alt="Arnold"> Is there a way to retrieve the absolute path of this image using jQuery? Currently, when I use img.attr("src"), it only returns "../img/arnold.png", but I need it to return something like "http://site.com/ ...

What could be causing media queries to not update values even after being changed through JavaScript?

I have a simple navigation bar on my website, featuring links to different subpages. To enhance the user experience on mobile devices, I added a hamburger menu icon that is displayed on smaller screens. The links in the navigation bar are hidden using CSS ...

Issue encountering with flex-wrap to shift to the next row once reaching the 5th element

Recently, I've been experimenting with creating an image gallery using flexbox and incorporating a flex-basis transition to control the growth and shrinkage of elements upon hover. However, I'm encountering difficulties in adjusting the gallery t ...

Struggling with the adaptability of my website's footer section

I'm facing a dilemma... No matter what I do, I can't seem to position my contact form over my Google iframe perfectly. It works fine if I don't mind sacrificing responsiveness, but as soon as I try to make it responsive, the absolute assign ...

Incorrect Arrow Direction of Bootstrap Popover on SVG Icon

I set up a bootstrap(v5.1) popover on an svg icon, but the arrow icon direction is incorrect. Check out the code snippet below to see how it's configured; @create text & @modifytext are placeholders for dynamic content. <svg height="20& ...

I am facing issues with utilizing if endif for my Internet Explorer stylesheet in HTML/CSS

<!--[if IE]> <link rel="stylesheet" type="text/css" href="ie.css" /> <![endif]--> <link rel="StyleSheet" href="style.css" /> Whenever I apply this code, the content in Internet Explorer is being influenced by both style.css and ie. ...

Exploring the potential synergy between the compass and blessings

Currently working on a Compass project and facing the issue of my final CSS output being too large, requiring it to be blessed. I am using Codekit to compile SCSS files but unfortunately, the bless option is not available for Compass projects as mentioned ...

Every time I rotate my div, its position changes and it never goes back to

Trying to create an eye test by rotating the letter "E" when a directional button is clicked. However, facing an issue where the "E" changes position after the initial click instead of staying in place. Here is a GIF showcasing the problem: https://i.stac ...

Using jQuery to modify the CSS of a div located outside of an iframe

Currently, I am developing a straightforward script. Firstly, here is all of the code that I have: <script src="//code.jquery.com/jquery-1.10.2.js"></script> <script type="text/javascript"> function SuperWebF1() { $("#outerd ...

Creating a transparent background for a Canvas animation with three.js and dat.gui

I'm struggling to set up a background animation on this canvas using three.js. However, the background renders as black instead of transparent. I attempted to adjust it with CSS by adding background-color:transparent;, but to no avail. I've searc ...

Utilizing Bootstrap 5: Breaking a Page into Two Separate Vertical Sections

I am looking to design a unique grid system that divides the page into either 2 columns or 2 rows that are completely separate from each other. This means that the content on one side of the page does not expand to match the height of the content on the ot ...

Default values for CSS variables: only apply if the variable has not been previously defined

My Web Component relies on the power of CSS variables. To set default values for these variables is crucial. With their wide usage across multiple files, it's essential to define them once and for all. The initial approach turns the text color to b ...

Steps for creating a fade effect between two different elements when the mouse is interacting with one of them

I want to create a unique effect with an image in the background and a button above it. When the mouse hovers over the button, I want its opacity to decrease while the image's opacity increases simultaneously. I have experience applying fade effects ...

What's the connection between CSS and frameset?

Currently, I have an .html document with XHTML 1.0 Frameset doctype and the following code: <frameset rows="20%, 80%" border="1"> ... </frameset> Upon validating this code on W3C Validator, it gives me the error message: there is no a ...

Making sure all items in the top row of Flexbox columns have the same height

Within my flex wrapper, I have multiple column components with various flex items inside. Each column displays content adjacent to each other. The challenge is to ensure that the top item in each column has an equal height, creating a row-like effect. I&a ...

Add a new string to a class within a Vue.js component

Hey there, currently working on a Vue component where I am iterating through a list of countries. Here's how it looks: <div v-for="i in countries" :key="i.id"> {{i.name}} <span class="flag-icon-gr"></span> I want to dynamically ...

the text input remains fixed in size and does not resize

Visit the page and scroll down to find a section located next to the "Directions" button that contains an input field. This input field allows you to enter an address and utilize Google Maps for navigation. One puzzling aspect is that regardless of what ...

Modify the design of the button in the CSS code

I am facing an issue with the layout of the Visible Columns button and unable to standardize it like the buttons above using CSS enter image description here The code snippet for the Visible Columns button is as follows: import React, { useState, useEffe ...