Check out my website:
There's a div styled with the color #D9D9D9
This is the CSS code:
#full_bar {
background: #D9D9D9;
width: 100%;
height: 100px;
}
I want the div to span across the full width of the website and be stuck to the footer.
Any advice on how I can achieve this?
The site is built on WordPress using a specific theme.
Appreciate the help!
By setting the position to fixed, you can be sure that it will stick with the user as they navigate your website.
#full_bar {
background: #d9d9d9;
width: 100%;
height: 100px;
position: fixed;
bottom: 0;
left: 0;
}
By incorporating position:absolute; left: 0; into the CSS, you can achieve a similar effect with the bar, although this method is considered a quick fix.
The main issue lies in the fact that the 'full_bar' element is being inserted in an improper location (within a width-restricted div). Personally, I would recommend placing the full-bar inside your <footer> tag for better results.
Placing #full_bar within the class="container" is causing it not to take up the full width, as the container is its parent element.
Try moving your code outside of the container class to see the desired changes in width.
Check out the attachment for a visual representation of what I believe you are asking for.
To achieve the desired effect of placing a gray bar below your section in HTML, you have a couple of options. You can position the gray bar outside the section, between the section and the footer, or directly on the footer.
If you prefer using CSS, here's a solution: set the parent section to position relative and place the gray bar at the absolute bottom with full width:
section {
position: relative;
padding-bottom: 100px; // Adjust this value to match your bar height
}
#full_bar {
background: #D9D9D9;
width: 100%;
height: 100px;
position: absolute;
bottom: 0;
left: 0;
}
Recently, I had some email signatures designed and they appear great when sent out, but encounter issues upon receipt or reply: The logo gets distorted and occasionally enlarges significantly during replies. The font color switches to black when receivin ...
Struggling to create an expandable sidebar menu using Vuetify2, following the documentation, but unable to prevent the expanded menu from overlapping other elements on the page. The current behavior causes items to be pushed away and wrap onto the next ro ...
I'm currently working on a feature that involves highlighting a ListItemButton with a specific background color when selected. However, I now want to take it a step further and add an outline or border color around the ListItemButton when it is select ...
Whenever the desktop website is zoomed above 150%, it automatically switches to mobile responsive mode. Is there a way to disable this feature? You can find the website in question here: Give it a try by zooming to 150 percent and see for yourself. Appr ...
Previously, I stored my component data within the element's data parameter. Should I continue doing this or switch to using an Ajax call to fetch the data? 1. Using data parameter: <a href="#" data-core="{JSON-data}" id="item-1"> <a href ...
I've been trying to use this code to load the ie.css file specifically for IE browsers, but for some reason it's not working. I'm feeling a bit confused here - can anyone help me figure this out? <html> <head> <titl ...
Welcome to my website! If you visit , you'll notice a feature I've added that clears form field values after submission. However, I'm encountering an issue where the fields remain filled when revisiting the page for another appointment. I at ...
I'm facing some issues with implementing a responsive navbar that collapses into a 'hamburger bar' on mobile devices and in split view. I have managed to display the hamburger bar, but when I click on it nothing happens. Here's my curre ...
I've successfully implemented a footer with several buttons that remains positioned at the bottom of the page, 60px above the very bottom, regardless of the content or window size. The CSS I'm using is as follows: #container { min-height: 10 ...
When using Selenium Webdriver, I am trying to select the "802.11n" option from a drop-down menu where the "sbSelector_xxx" id changes each time the page is reloaded. <div id="RADIO_5GHz_adv" style="display: block;"> <table class="block" border="0 ...
XML contains HTML tags that need to be removed using XDocument. Is there a way to identify nodes with HTML tags and replace them throughout the entire document? Below is a sample of the XML structure: <?xml version="1.0" encoding="utf-8"?> <myFie ...
I have a styles object let styles = { step_div:{ height:'150px', } } I'm trying to display multiple div elements with different colors using React class Layout extends React.Component{ constructor(props) { super(props); ...
Related: ContentEditable Alternative I am curious about the timeline of online WYSIWYG editors prior to the existence of contentEditable. I remember using GDocs and GMail with rich-text features that functioned similarly to contentEditable. I would appre ...
I've tried everything, but I can't seem to change the button text when selecting an item in the "Requirements" dropdown. You can view the issue on this site. Located at the bottom of the page is the "Requirements" dropdown. Each item has an oncl ...
I can't seem to crack this puzzle. When you navigate to the following link: click here, and select 'Accordian' from the topbar menu, where exactly does the dropdown menu width originate from? Upon inspecting it, I only see a computed value w ...
Currently, I am utilizing a template with multiple pages and I need to use one of them. I followed all the necessary steps correctly, but I encountered an error in the console that says Uncaught ReferenceError: jQuery is not defined. Below is my HTML scrip ...
I have a client who has provided us with a vast library of UI elements that they want incorporated into our project. These elements are stored in javascript and css files on a CDN, and unfortunately I do not have access to the source code. All I have at my ...
In my application, I am using Android Map V3 and have encountered a bug specific to the Kit-Kat version. The chromium kit throws up an error message - nativeOnDraw failed; clearing to background color, which prevents the map from being displayed. Despite ...
I tried using the activeLink directive to apply an active class to a specific id on the page, but it didn't work as expected. .directive('activeLink', ['$location', function (location) { return { restrict: 'A', ...
Is there a way to automatically format the text retrieved from a VARCHAR variable in a MySQL database via PHP so that it displays correctly with line breaks? Currently, when I display it on an HTML page, it appears as one long string. I've considered ...