How to design a stylish footer using CSS and HTML

I need assistance in creating a footer for my website, which can be visited at mavenpvp.cu.cc. Can someone guide me on how to achieve this look? I want the footer design to resemble that of mineplex.com

Kindly note that I am a beginner in CSS and HTML.

Below are the contents of index.html and layout.css:

index.html:

<!DOCTYPE html>
<head>
<meta charset="utf-8">

<title>Minecraft</title>

<link rel="stylesheet" href="style/layout.css">
<link href='http://fonts.googleapis.com/css?family=Sanchez' rel='stylesheet' type='text/css'>

<script src="js/jquery00.js"></script>
<script src="js/ticker00.js"></script>
<script type="text/javascript">
    // jQuery code goes here
</script>
</head>

<body>
    // HTML structure goes here
</body>
</html>

layout.css:


// CSS styles go here

Answer №1

View live example on JSFiddle

To ensure that your footer stays at the bottom of the page, it should be placed just before the closing body tag (</body>). Additionally, you may need to adjust the code slightly. Clearing the floats is necessary to prevent the footer from slipping under the sidebar.

.footer {
    clear:both;
    list-style: none;
    margin-top: 8px;
    color: #fff;
    font-size: 15px;
    text-align: center;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.2);
    background-color:black;
    border-top:thick solid blue;
    padding-bottom:10px;
}

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

Change the background color of a Bootstrap dropdown when toggled

I recently created this code snippet: <div class="dropdown"> <button class="btn btn-secondary dropdown-toggle buttonForProfile" type="button" id="dropdownMenuButton" data-bs-toggle='dropdo ...

Automatically adjusting jQuery script now functions on all hyperlinks for seamless resizing

I am attempting to create a rollover script that will resize my social network links when hovered over. The desired effect is for the 32px square icon to expand and display the trailing address. For example, when hovering over the Facebook link, it should ...

Here is an example of how to transfer a value from PHP to a jQuery function in the code snippet provided

This is an example of my code. It is functioning properly even without passing a value. function displayMessage(text) { alert(text); } <button type="button" id="button" class="btn btn-success" onclick="displayMessage("Hello");"> Click Me </ ...

HTML5 Dragend event failed to trigger in Firefox

While working on my project, I encountered an issue where the 'dragend' event is not fired in Firefox 22.0 on Ubuntu but works perfectly fine in Chrome. I have written a logic to make changes on drag start and revert them if drop fails, triggered ...

What is the best way to achieve this Bootstrap design without copying the content?

Trying to achieve a specific Bootstrap layout without repeating content is my current challenge. Essentially, I aim to divide some content into 2 columns at the sm/md breakpoints and then switch to 3 columns for the lg breakpoint. The layout for sm/md bre ...

Is there a way to implement multiple "read more" and "read less" buttons on a single page?

I am currently working on a rather large project and I am encountering some issues with the read more buttons. As someone who is fairly new to JavaScript, I am still grappling with the concepts. While I have managed to make the function work for the first ...

The data type "100%" cannot be assigned to a number type in the kendo-grid-column

I need the columns in the grid to have a width of 100%. <kendo-grid-column field="id" title="id" [width]="'100%'"> </kendo-grid-column> However, when I hover over the code, I get this message: The value "100%" cannot be ...

Whenever I press a button, my desire is for each picture to seamlessly reposition itself in the exact same spot on the screen

Having some issues with my code. When I click a button, the plan is for the pictures to change one by one to simulate a traffic light sequence. However, when I run the code, all the pictures appear at once without any effect from the button. Any help in ac ...

Tips for aligning objects within a bootstrap column so that they all have the same starting point on the X axis

To recreate the issue I am facing, I created a basic HTML structure with 2 bootstrap columns. My aim is to have multiple <p> elements in the second column, stacked one below the other. However, the problem arises when these <p> tags contain tex ...

Using Javascript to Retrieve Icecast Metadata

I am currently developing a web radio application that utilizes AngularJS and Laravel 5 to read Icecast streams. Currently, I have implemented loading the stream into an html5 audio element which is working well. However, I am facing an issue where the vie ...

Unable to retrieve file path from image selection in JavaScript by clicking on a button

I am trying to create a simple browsing feature that only accepts images. However, after clicking the button, I am unable to retrieve the full path in JavaScript. All I can get is the filename. JavaScript <script type="text/javascript"> functio ...

How can I select a checkbox using jQuery?

I need help toggling a checkbox on and off using jQuery. Here is the HTML code: <input type="checkbox" id="isWorking" name="isWorking" /> I attempted to control it with jQuery like this: $('#isWorking').prop('checked', true); $ ...

The FontAwesome icon is not showing up on this particular view, but it displays correctly on a

I'm facing a strange issue: one of my FontAwesome icons is not appearing on the view, even though all the other icons are working fine. I've been trying to figure out why. <a class="add-img fa fa-plus-circle" title="@SharedResources.Index.Add ...

"Concealing specific choices in Autocomplete with reactjs: A step-by-step guide

I am looking for a way to hide the selected option in a Dropdown menu so that it does not appear in the next dropdown. For example, if "Hockey" is selected in the first dropdown, it should not be displayed in the second dropdown; only "Baseball and badmint ...

Implementing additional input with Jquery causes tooltips to malfunction

I am developing a form that allows users to add as many rows as needed. Each input is being treated as an array for easy data storage in the database, which is a new concept for me. $(document).ready(function() { var maxField = 10; //Limitati ...

Tips for enlarging an image by tapping on it in handlebars

I currently have the handlebars template engine integrated with node.js, and I'm facing an issue where thumbnail images from the database are displaying at a fixed width and height of 70. Is there a way to enable users to click on these images in orde ...

Ways to activate javascript following a PHP submission?

It's a bit tricky to explain. function m(val){ var element=document.getElementById('othermethod'); if(val=='others') element.style.display='block'; else element.style.display=&apo ...

The functionality of jQuery's $.inArray does not seem to be compatible with ASCII characters

I've demonstrated the issue in this jsfiddle. The scenario involves two black coins - when one black coin is placed on another, it should trigger an alert saying "can't kill your own kind" and return the coins to their original positions. However ...

Backend data displayed on carousel presents either all images or none at all

I am currently working on a Django project that involves displaying a list of images in a Carousel format within my template. I have encountered an issue with setting the active class for the Carousel items. When I include the "carousel-inner active" clas ...

Ellipsis malfunctioning in text overflow

It is known that the display type table-cell does not work with text-overflow ellipsis. However, this is where my issue lies. I am dealing with a file input control that appears like this: <div class="ui-select form-input" style="display:inline-block; ...