Is there a proper way to display a p tag with the count-names class on the right top corner without using margin-top: -20px?
To see my code, click here.
Here is the HTML code:
<p>First name: <input id="name" /></p>
<p>First name capitalized: <strong>NAME</strong></p>
<p class="count-names">1</p>
And here is the CSS code:
.count-names {
float: right;
top: 0;
}
Here is the solution for you:
HTML code:
<div>
<p>Enter your name: <input id="name" /></p>
<p>Your name in uppercase: <strong>NAME</strong></p>
<p class="name-counter">1</p>
</div>
CSS code:
.name-counter {
position:absolute;
top: 0;
right:0;
padding:3px;
}
Check out this helpful code snippet:
HTML:
<p>Your first name: <input id="name" /></p>
<p>Upper case first name: <strong>NAME</strong></p>
<p class="count-names">1</p>
CSS:
.count-names {
position: absolute;
top: 0;
right: 0;
}
The use of position: absolute ensures the element is positioned absolutely to the document, regardless of other elements.
With top and right, you easily define the distance from the top and right sides of the document.
For more information, visit this MDN resource on positioning.
View an example here.
Below is the CSS from the example for styling purposes:
.count-names {
position: absolute;
top: 0;
right: 0;
background: #eee;
margin: 10px;
padding: 10px;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
Always remember to place your p tag above the other lines of code for better organization:
I am a member of a CTF team that has a GitHub Pages website using Jekyll, but for some reason the markdown rich text is not displaying correctly. I believe the issue lies within the CSS rather than being related to Jekyll or the markdown renderer, but I&ap ...
Recently, I have been tasked with customizing a Bigcommerce theme for a client. While I am not very experienced with Bigcommerce and only have basic knowledge of php, I have encountered an interesting challenge with the current theme header setup. The exis ...
My form consists of inputs, and in AngularJS, I am looking to pass a parameter in the URL. However, I have managed to pass the parameter in the URL but not in the desired way. Below is my code snippet: <form action="#/report" method="get"> <sel ...
I'm currently developing a Chrome Extension that will replace the chat input box with the music I'm listening to by simply pressing "´". It's worth noting that the chat is designed using react and does not use the traditional input/textarea ...
I've designed a form that allows for adding or deleting rows, effectively cloning input fields. One of the input fields utilizes Jquery Ajax to retrieve its value. However, upon adding an extra row by cloning the parent row to generate a child row, th ...
As I work on developing a web app using Yeoman and the Angular generator on Windows 7, I go through the process of running 'yo angular' followed by 'grunt' to build the app for deployment. The index.html file in the dist folder gets upd ...
Currently, I am attempting to showcase a docx file on my webpage by converting it to HTML and then displaying it. However, this method generates CSS with rules that end up impacting the entire document. For instance, it changes all links to blue which co ...
I implemented keyframes to create a pulsating effect on text every 15 seconds. This effect works in Chrome but not in Firefox. I'm unsure how to introduce a 15-second delay between each pulse, so I experimented with using more percentages; however, I ...
Currently, my setup for the index.html file looks like this: <!doctype html> <html class="no-js" lang=""> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>Pra ...
I have limited knowledge of .NET as I work primarily as an ERP Implementation Consultant. My experience with C# .NET is minimal, but I encounter a strange CSS issue in my C# projects. While the CSS functions correctly in Internet Explorer when running the ...
Having some issues with this game functioning properly. Trying to create a dropdown menu that lists 20 EPL teams, and upon selecting a team, display that team's information in a form. Unfortunately, I'm encountering difficulties with the code. An ...
I'm struggling with a coding issue and can't seem to find a solution. Would appreciate it if someone could provide some guidance on what's going wrong. Essentially, this script is designed to fetch the HTML content of a URL, extract specific ...
Hello, I am currently working on jQuery. I have a code snippet to update the project name. It includes an input field and a save button. The process involves fetching the current project name, displaying it in the input field, allowing for edits, and the ...
As a newcomer to javascript, I am encountering some challenges when trying to implement form submit action onclick using javascript. The issue arises when I attempt to incorporate all the validation checks using if-else conditions. At that point, the fu ...
I am facing an issue where the cardTitle is overlapping the Card when the text is too long. Currently, I am manually setting a static maxWidth, but I would prefer for it to adjust based on the size of the Card. Is there a way to achieve this dynamically? ...
Every time I click on the button to display a message, I encounter an issue where one MessageBox appears as expected. However, when I open the Jquery Dialog for the second time, two MessageBoxes pop up and the same problem occurs with three MessageBoxes on ...
For this module, I am working on creating a flipbook (magazine) using images stored in a JavaScript array. However, I am facing an issue where the images are not loading up properly. Instead of displaying the image, it shows as [object" htmlimageelement]=" ...
I need help making images of different sizes appear as squares in a preview on my webpage. /* This is the CSS code which sets automatic height: */ .preview-img { width: 100%; height: auto; object-fit: cover; } How can I adjust the image height bas ...
I came across a code snippet that looks like this video { object-fit:fill; } <!DOCTYPE html> <html> <body> <video width="800" height="240" controls> <source src="http://www.w3schools.com/tags/movie.mp4" type="video/mp4" ...
I have 4 boxes, labeled a,b,c,d. When the user selects box a, specific content should be loaded: If image a is picked, load content 1 If image b is picked, load content 2 If image c is picked, load content 3 If image d is picked, load content 4 I want ...