To enhance the homepage layout, my goal is to split it into three distinct adaptive sections horizontally: a header, a body, and a footer. Additionally, the body section should be further segmented into three equally responsive vertical parts.
Please provide recommendations on how to achieve this design.There are various methods to achieve this, with HTML elements typically stacked on top of each other by default. However, if you want to keep a fixed header at the top and a persistent footer at the bottom even when scrolling, you can utilize the position: fixed property with adjustments to top, left, bottom, and right values based on your design requirements. In the example below, we fix the div with the class header to the top of the screen with top: 0, spanning the full width with left: 0; and right: 0; properties. The same applies to the .footer, which is fixed to the bottom using bottom: 0;. The div with class body contains the remaining content, requiring a margin-top equal to the height of .header to prevent content from being hidden beneath it, as well as a similar adjustment for margin-bottom according to the height of .footer.
This can be achieved by setting element widths in percentages. For instance, if you want to divide the .body into three columns, each should take up one-third (33.33%) of the total width via width: 33.333%. To display inner divs on the same line, set the display property to inline (or another inline value) while ensuring margin is zero since it does not factor into the width calculation.
While there are numerous alternatives available, here's an example:
.header {
position: fixed;
top: 0;
left: 0;
right: 0;
height: 70px;
background: #4286f4;
text-align: center;
}
.footer {
position: fixed;
bottom: 0;
left: 0;
right: 0;
height: 70px;
background: black;
color: white;
text-align: center;
}
.body {
background: green;
margin: 70px 0;
padding: 0;
width: 100%;
text-align: center;
}
.body_v1, .body_v2, .body_v3 {
height: 100px;
width: 33.333%;
border: 0;
display: inline-block;
margin: 0;
float: left;
padding: 0;
text-align: center;
}
.body_v1 {
background: #42f465;
}
.body_v2 {
background: #108928;
}
.body_v3 {
background: #034210;
}<div class="header">header</div>
<div class="body">
<div class="body_v1">a</div>
<div class="body_v2">b</div>
<div class="body_v3">c</div>
</div>
<div class="footer">footer</div>In conclusion, my recommendation would be to utilize a third-party framework for such layouts instead of starting from scratch. There are various options available online, enabling you to select the one that best suits your needs. Check out multiple examples and find the most suitable solution for you.
Is there a way to manipulate an element when another element is being hovered over, with the two elements structured like this: <div id="parent_element"> <div id="class-open-1"></div> <div id="class-close-1"></div> < ...
The JSON output of my API looks like this: [{"UserName":"xxx","Rolename":"yyy"}] I am trying to extract the values for Username and RoleName separately using JSON.parse, but it is giving me [Object Object]. Can someone please assist? Your help is much ap ...
I'm attempting to trigger an action when certain keys are pressed simultaneously. The keys I need to detect are bltzr, but my browser only registers bltz without the final r. I've tried this on both Windows and OSX, but still can't capture ...
Is there a way to completely disable the sorting property in the dataTable API? I tried using bsort:false to disable sorting in all columns, which works fine, but the first column still displays the sort icon. Why is that? $("#reportgrid").DataTable({ ...
After adding Google reCAPTCHA to my form for increased security, I encountered an error due to the reCAPTCHA not being whitelisted. It seems that HTML5 does not support assigning the name attribute to a div element, such as <div name="myName"></di ...
How can I make a textarea have a visible border around it when the string is empty, without needing to first input and delete text? Here is my current code: $("#message-box").on("keyup", function(){ var charCount = $("#message-box").val().length; ...
I am seeking a more efficient way to retrieve names from a database using PHP and MySQL. Currently, I have multiple if isset statements in my code, one for each button that retrieves a specific name. Is there a better approach to achieve the same result ...
My attempt to replace the input value when deleting a row is not functioning as expected in this dynamic example. <script src="./edit_files/prototype.js" type="text/javascript"></script> <script src="./edit_files/application.js" type="text/ ...
I'm currently developing a calendar software and I want to store events in a JSON file. My strategy involves nesting arrays within arrays in the JSON format, allowing for easy iteration and loading during program initialization. My main question is: ...
Currently, my form requires users to input a username that cannot start or end with a period (.). I have implemented some code but I believe there is an issue with the .value[0] parts. //Checking Username if (document.getElementById("uName&quo ...
I am looking to implement a drag and drop function where I can move elements from one div to another, each containing different images. However, I want the image displayed in the second div to change based on the element being dragged. For example: When d ...
I am currently working on a script that is well-known, and everything is functioning perfectly. However, I want to change it so that when the page is first opened, it displays the second tab instead of the first one (the first tab being a mail compose tab ...
Apologies for not finding a suitable topic to discuss. Is it possible to place an image next to a jQuery dialog, similar to the following example? If so, how can this be achieved? ...
I am trying to display the content of a textarea in my div with the ID #result. I want to maintain the line breaks from the textarea and append 1 at the end of each line. Here's my current attempt, but it only adds 1 to the last line. <!DOCTY ...
When I hover over the 'click me' button, I want an image to appear on the webpage. When I stop hovering, the image should disappear using the mouseover option. This is what I attempted in my app.component.ts and my.component.ts files: Here is t ...
I have a ViewModel that includes a collection of strings that I intend to use for dynamically displaying images on a Razor view. public List<string> States { get; set; } = new List<string>() { "ACT", "NSW", "NT", ...
My understanding was that using font-size: 4em; would result in a relative size, but I am facing an issue where the font size remains constant regardless of window size. This causes overlap and makes the text look unattractive. Specifically, the text in qu ...
When I apply a width-transition to a div element, the animation works perfectly. However, if I provide both height and width to the same div in CSS, the animation stops working. What could be the issue? On hover, neither color nor animation changes. How c ...
I am struggling to make my JavaScript code work with the input from my HTML input tag. The purpose of this program is for the user to input a number, and then the program will determine whether the number is positive, negative, or zero. Below is the code ...
I am wondering if there is a way to display certain user data in a datatable without showing the user id in the table itself. Here is my table: <table id="mitabla" class="display"> <thead> <tr><th>Last Name</th> ...