Can someone guide me on how to align text to the bottom border of a page?

Is there a way to adjust the position of the header text ("bottom text") so that it appears just above the bottom border of the page? I have attempted modifying styles and classes within the footer, style, and h3 tags but have not had any success. Below is the relevant code snippet:

<footer>
<style>

h3 {position:fixed; solid white;
width:100%;
border-bottom:4px solid white; text-align:center;
}

.bottom-text {position:absolute; solid white; width:100%; text-align-center; color:white;}

</style>

<h3 class="bottom-text" style="border-bottom:5px; border-bottom-style:solid; 
border-bottom-color:white; padding-bottom:17em; color:white; font-family:arial;">bottom page</h3>

</footer>
</html>
htmlcsstextborder

Answer №1

body{
background:#000;
}

footer{
position:absolute;
border:1px solid #fff;
bottom:0px;
width:100%;
border:2px solid #fff;
}


.bottom-text{
text-align:center;
color:#fff;
}
<footer>
<p class="bottom-text">Bottom text</p>
</footer>

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

Transforming an interactive HTML webpage into React/JSX

Imagine a scenario where I have two files: example.html <!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta charset="u ...

javascripthtmlreactjs

What could be causing the horizontal scroll bar to appear on the Web Page, even though it should fit perfectly on

I've designed this website to perfectly fit within the browser window, but for some reason, there's a horizontal scrollbar appearing. When a site fits properly, there shouldn't be a need for a horizontal scroll bar. I double-checked my zoom ...

htmlcssbootstrap-4

Header fixed vertically

I am currently working on a webpage with a minimum width requirement of 1124px. This means that whenever the browser window is smaller than that, the content of the page needs to be scrolled horizontally instead of smoothly transitioning into a responsive ...

javascriptjqueryhtmlcss

Retrieve the name of the product from the corresponding parent element

My goal is to trigger an alert box with the product name when the "Buy now" button is clicked. I have added the necessary code in jquery to maintain the onclick event of the button. <h2 class="product-name"><a href="product1.php" title="Sample Pr ...

javascriptjqueryhtml

When typing in the textarea, pressing the return key to create a line break does not function as expected

Whenever I hit the return key to create a new line in my post, it seems to automatically ignore it. For example, if I type 'a' press 'return' and then 'b', it displays 'ab' instead of 'a b'. How can I fi ...

javascriptphphtml

Is Javascript automatically generated by asp.net?

If I were to initialize a fresh VS project and paste the subsequent sample code into a freshly created page default.aspx <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="default.aspx.cs" Inherits="WebApplication1._default" %> <!DOCTYPE ...

javascripthtmlasp.net

The WebView.HitTestResult method is currently only receiving <img src> elements and not <a href> elements

I am attempting to open a new window in the Android browser using "_blank". I have set up an event listener for this purpose. mWebView.getSettings().setSupportMultipleWindows(true); mWebView.setWebChromeClient(new WebChromeClient() { ...

javascriptandroidjqueryhtmlwebview

PHP - Working with Regular Expressions in Improperly Formatted

Struggling with Regex has always been a challenge for me, especially when I need to extract content from a malformed piece of code like the option tag. The website where this code is obtained from has poor programming and inconsistent label structures: I& ...

phphtmlregexpreg-match-all

Error in THREE.js: The function material.onBeforeRender is not defined

Can someone assist me with an error I'm encountering while trying to run my code in Three.js? The error message reads as follows: three.js:19528 Uncaught TypeError: material.onBeforeRender is not a function at renderObject (three.js:19528) at ...

javascripthtmlthree.js

What is the best way to create dynamic cards like the ones displayed here?

I am experiencing an issue with the black box displaying the date. I created it, but it does not adjust properly to different screen sizes. .date { width: 20%; height: 15%; background-color: black; z-index: 1; position: absolute; top: 45%; ...

htmlcssbootstrap-4

The margin of a single flexbox item is not aligned properly

The flexbox I have contains several items. All of them are displaying correctly except for the last one, which is expanding to the edge of the div. View the current appearance of the flexbox As shown in the image, the last element is extending to the con ...

htmlcssflexbox

Troubleshooting Cufon Compatibility with Internet Explorer - Investigating a CSS Problem

Currently facing an unusual issue. I am creating a Wordpress theme with Cufon and it works flawlessly in Chrome and Firefox, but refuses to render in IE. I decided to put this problem on hold and focus on it later as I am still in the development phase. Y ...

cssinternet-explorercufon

A guide to using jQuery to execute mathematical operations from a string

Currently, I am working on developing a calculator using jQuery. My main concern is how to carry out mathematical operations from a string and showcase the calculator actions in the output box. $(document).ready(function() { $("input[type='button ...

jqueryhtml

Learn how to fetch user-selected options in Node.js and display the corresponding file contents in a textarea after submission

Hello, I am new to Node.js so please be patient with me. I am struggling to figure out how to retrieve the selected option from a drop-down list after a user submits it and then perform an action based on that choice. Here is an example of what I have in m ...

javascripthtmlnode.jsweb-applicationsweb

Is it true that event.stopPropagation does not function for pseudoelements?

I am facing an issue with event handling in my ul element. The ul has three li children elements, and the ul itself has a useCapture event handler for click. In the click event handler, I successfully stop the event using event.stopPropagation(), and every ...

javascripthtmlcss

Looking for assistance in streamlining the code

On my Drupal page, I have multiple divs and a JavaScript function that checks for content inside each one: if ($('.accred').length) { $('#accred').show(); } else{ $('#accred').hide(); } // More code follows... T ...

javascriptjqueryshow-hidehtml

What are the best ways to stop jQuery events from propagating to ancestor elements?

I have a collection of nested UL's that follow this structure: <ul class="categorySelect" id=""> <li class="selected">Root<span class='catID'>1</span> <ul class="" id=""> <li>First Cat<span ...

javascriptjqueryhtmlcss

The method window.getComputedStyle retrieves the CSS max-height property containing an unresolved calc() function

Has anyone encountered a challenge with a function related to Angular in their project? Here is a snippet of the code causing issues: console.log(window.getComputedStyle(this.frontLayer.nativeElement).maxHeight); And within the component template: <di ...

javascriptcssangular

What is the best way to display numerical data within an inline list format?

Here is a list I have: <ol> <li>Login</li> <li>Address</li> <li>Shipping</li> </ol> The numbers in the list display correctly as decimals. However, when I change the <li> tag to inline or ...

csshtml-lists

What is the best way to conceal all lists except for the one that has been chosen?

Looking to enhance my sortable list with jQuery UI - currently it's functional, but I'd like to incorporate a dropdown menu for each item to designate the active one when clicked. Is there a way to modify the code so that upon selection, only th ...

javascriptjqueryhtmlhtml-lists