How can I position the ™ symbol slightly above the XYZ text?
<div>
<div style="display: inline-block; border: 1px solid red;">
XYZ
</div>
<div style="font-size: 0.6em; border: 1px solid red; display: inline-block; position: relative; bottom: 5px;">
™
</div>
</div>As you can see, they are aligned side by side. I want the TM to appear slightly above the XYZ text.
Using superscript to write something slightly above and subscript to write something slightly below is a common practice.
In HTML, these can be accomplished using the <sup> or <sub> semantic elements:
<p>Example<sup>®</sup></p>
<p>CO<sub>2</sub></p>Adjusting the vertical-align property allows you to customize it to your preferences:
div div {
display: inline-block;
border: 1px solid red;
}
div div:last-of-type {
font-size: 0.6em;
vertical-align: 2em;
}<div>
<div>XYZ</div>
<div>™</div>
</div>Please note that this response was crafted based on the assumption that the original markup in the question forms part of the site layout and any solution should accommodate it, considering that some issues stem from the initial markup choice:
<div>
<div style="display: inline-block;">XYZ</div>
<div style="font-size:0.6em;display: inline-block;">™</div>
</div>
XYZ™If you are searching for a general solution to present ™ as superscript, I suggest using the <sup> element as recommended in mx0's answer. While it may not meet all semantic requirements perfectly, it remains the most effective option available :)
Is there a way to transfer form data from an offline website to a Django view for database storage? I want to fill out a form, save it in local storage, and then upload the data to the database when I reconnect to the internet. Is there a tutorial or can ...
Update: Apologies for the previous issues encountered with offline hosting. Upon transferring everything to the domain, the problem has been resolved. However, a lingering question remains about why the website loaded incorrectly when all files were kept i ...
After carefully reviewing the setup of my folders and code structure, I am confident that I have correctly linked the CSS to the EJS file. Despite this, I am still facing issues as it is not working properly. To provide a visual reference, I have include ...
After struggling for hours, I'm finally throwing in the towel on this issue. I have an unordered list with no background at the top level and text color of #fff. When rolled over, the background turns #fff and the text color turns #000. The child ul ...
I currently have two PHP files: index.php show.php - index.php <ul> <li><a href="show.php?id=1">Show Div 1</a></li> <li><a href="show.php?id=2">Show Div 2</a></li> <li><a href="show ...
Currently, I am utilizing d3.js version 6 to generate a 3D representation of the 2D chart shown below. Within this circle are numerous squares, each colored based on its assigned value. The intensity of the color increases with higher values. https://i.ss ...
Having trouble selecting the HTML select element with JavaScript? You're not alone. Despite trying different solutions found online, like waiting for the window to fully load: window.onload = function(){ var opt = document.getElementsByName("prod ...
<div th:if="${tblUserList != null}"> --content-- </div> I'm having some trouble with the thymeleaf code provided above. The variable tblUserList is a list, and I need to check if it is empty instead of just checking if it is null. How ca ...
I need help with making my html table resizable in a vertical direction. The cells can overflow if there isn't enough space, so I want to allow users to stretch the table by dragging and extending the bottom edge. Can anyone provide guidance on how to ...
Is there a simple way to clear the cache of all players who have previously played my game? The game stats are stored in local storage, and some players experienced bugs when the stats were incorrect. This outdated data is now affecting the updated stats ...
I'm currently working on a project that involves handling the response of a CGI script located on a remote machine within a PHP generated HTML page on an apache server. The challenge I am facing relates to user authentication and account creation for ...
I'm currently in the process of learning Bootstrap, and I've encountered an issue with the height attribute in version 4 (for example: "row h-25") not functioning properly. I attempted to add another CSS rule that sets the height of "container-f ...
I am looking to create a website design similar to this where an image fills the window until you scroll down. I am not sure how to accomplish this. Would using jQuery be the best option? I haven't been able to find much information on this. While my ...
Is there a way to accurately count the number of dynamically added list items on a webpage using jQuery? While I can easily count list items that are already present on the page, I am unsure how to do so for items added after the initial load. HTML: < ...
I am struggling to create a small horizontal space between the "Away Team" and "Baseball Field" divs in my code. I have tried adjusting padding, margins, and even adding decimal column offsets without any success. The desired spacing effect can be seen in ...
I am currently developing an Android app for my book and I have created an HTML page. I would like to add a button on this page that is linked to the following Java code: public class MainActivity extends Activity { @Override public void onCreate(Bundle ...
For each product that a customer selects to purchase, I have set up a shopping cart to display these items. The requirement is to add each selected product as a separate row in the 'order_details' table with the same customer_id. Screenshot: htt ...
I'm struggling to create a mobile input box that separates the mobile number and country code with a divider or fixes the country code in the field without success. Something similar to this image: https://i.sstatic.net/6HwYdZrB.png But I don't ...
Looking for a solution to keep the carousel caption fixed when changing carousel images and to use a nav-tab in conjunction with the carousel. Is there a way to achieve this or a method to fix the nav-tab on the carousel? Thank you! ...
During development, everything appears to be working fine in my environment. I have a pie chart that uses canvas and animation, and it displays correctly when hosted through the browser. Additionally, I am utilizing Twitter Bootstrap and have a navigation ...