Tips for aligning the navigation bar, main content, and footer in the center

Exploring the realm of web coding for the first time, I find myself in need of some guidance. My current project involves creating a webpage for the local sports team to replace their outdated one on Wordpress. Finding the platform not very user-friendly, I decided to take matters into my own hands and attempt to code it from scratch.

However, I've encountered an issue with getting my Navbar, main content, and footer to display properly on the page. What I intend is for these elements to be contained within 80% width, allowing a portion of the background (which features a picture of the sports team players) to show through.

#footerWrapper { max-width: 80%;
     max-height: 5%;
 margin-bottom: 20px;
 line-height: 30px;
 font-size: 0.9em;
 border: 0 solid #ddd;
 border-bottom-color: #3F8444;
 border-width: 1px 0;}

.image {
 position: absolute; 
 top:100px; 
 left:100px;
}
.image-1 {
 position: absolute;
 top:20px;
 right: 100px;
}
header{
 text-align: center;
 margin-top: 100px;
 margin-bottom: 100px;
}
main{ width: 80%;
 display: flex;
 flex-direction: row;
 justify-content: space-evenly;
 align-items: center;}
footer{ 
   position: static;
left: 0;
   bottom: 0;
 width: 80%;
height: 5%;}
p {margin-left: 5px;
margin-right: 5px;}
...and so on

Experimenting with various CSS techniques such as float, margins, flexbox, and grid layouts hasn't yielded the desired results yet.

Answer №1

Impressive job! You're off to a great start and it looks like you're catching on quickly. I highly suggest exploring frameworks such as tailwindcss or bootstrap.

These frameworks can handle most of the nitty-gritty styling details for you, reducing the need for excessive CSS in your files. Instead, you simply add class names like

class="m-auto d-flex text-center"
, which streamline your code.

Utilizing classes, as these frameworks do, is crucial for maintaining clean and organized code. Consider creating classes or ids for all elements to enhance readability and structure:

<style>
   .nav_bar { }
</style>

<ul class="nav_bar">
 ...
</ul>

If you find yourself needing multiple similar elements with variations, using classes and ids becomes even more vital for customization.

To center your existing code effectively, adjust the margin settings on your navbar and main sections. Here's an example snippet to achieve centered alignment:

 main { 
        width: 80%;
        display: flex;
        flex-direction: row;
        justify-content: space-evenly;
        align-items: center;
        margin: auto;
 }

 ul { 
      display: flex;
      flex-direction: row;
      align-items: center;
      list-style-type: none;
      margin: 0;
      padding: 0;
      overflow: hidden;
      background-color: #04AA6D;
      width: 80%;
 }

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

Title slide on quarto featuring a captivating full coverage background image with a sleek row of icons at the bottom

I am currently working on creating a title slide for a reveal.js presentation in Rstudio using quarto. My goal is to have a background image covering the entire slide and include one or more small icons at the bottom (specifically on this slide only). I ha ...

Why is the 'a' element not clickable after the AJAX complete function has executed in JavaScript?

I have a small question regarding my use of AJAX. Everything is working fine, but after the AJAX request completes, I am trying to change the element attributes such as backgroundImage dynamically. Although this process works correctly, the element that wa ...

Ways to stop flask from automatically opening links in a new tab

I created a header that contains different links to various sections of my web application: <div class="collapse navbar-collapse" id="navbarSupportedContent"> <!-- Left --> <ul class="navbar-nav mr-auto"> <li ...

Is it possible to absolutely position an element using its own bottom edge as a reference point?

Looking to achieve precise positioning of an element just off the top of the screen, specifically a sliding menu. Utilizing position: absolute and top: 0px is straightforward, but this aligns the element based on its top edge. Is there a way to achieve th ...

"Incorporate Bootstrap drop-down and button together for a stylish group feature

I am looking to format the code below to resemble the layout shown in the image using Bootstrap 3.3. When there isn't enough space to show all elements in a single line, I want them to stack vertically so that each element utilizes the entire width of ...

Can anyone suggest a more efficient method for implementing jQuery toggle?

Summary: I have a customized javascript calendar that offers different viewing options such as day, week, and month. These views display events with specific class names. My current challenge is finding an effective method to toggle the visibility of thes ...

What is the process of uploading a video and showcasing it on an HTML page?

I have successfully uploaded images and displayed them on an HTML page. Now, I am looking to do the same for videos. Here is my current code: $('#addPhotosBtn').click(function() { $(this).parents().find('#addPhotosInput').click(); }) ...

The hyperlink element is failing to load in a particular frame

I've been attempting to load the URL of an anchor tag in a specific frame. I've tried various methods through online searches, but have not found a satisfactory solution. Can someone please assist me with how to load the href URL in a particular ...

How can SQL data be loaded following the selection from a dropdown menu?

I have a pressing query that I need assistance with. I am aiming to achieve a certain task, but due to lack of prior experience in this area, I am unsure about how to proceed. My current situation involves populating a dropdown menu with names retrieved f ...

Excessive form inputs extend beyond the modal when utilizing Bootstrap 3

Having an issue loading a modal with Angular and populating it with a template. The main problem I'm facing is that the inputs are extending beyond the boundaries of the modal - attached below is a screenshot illustrating the problem: Below is the c ...

Creating text input without borders using HTML and CSS

I have managed to create text inputs without borders using HTML and CSS, but I am facing an issue. Whenever I click on the input field, a yellow border appears instead of the one I removed. It seems like this is coming from the default stylesheets, and I&a ...

Ensure that clicking on various links will result in them opening in a new pop-up window consistently

I am facing an issue with my HTML page where I have Four Links that are supposed to open in separate new windows, each displaying unique content. For instance: Link1 should open in Window 1, Link2 in Window 2, and so on... The problem I'm encounter ...

Hover state remains persistent even after modal window is activated in outouchend

One of the buttons on my website has a hover effect that changes its opacity. This button is used to share information on Facebook. It's a simple feature to implement. Here is the CSS code: .social_vk, .social_fb { height: 38px; obj ...

What is the best way to center align all elements using a wrapper in CSS grid?

I am working on designing a layout that looks like this: https://i.sstatic.net/jAaXL.jpg I have set the wrapper as a class and aim to center everything on the screen. Aside from the wrapper, I also want to make the text and form equal sizes. Here is th ...

What is the best way to integrate a ttf custom font into my Rails application?

Despite following the instructions in this thread, I am unable to achieve the same results. main.css h1 { font-family: 'Shadows Into Light', serif; src: url('/assets/fonts/shadows.ttf') format("Shadows Into Light"); font-size: 4 ...

Ways to patiently wait in a for loop until the ajax call is completed

I am a beginner in web development and currently working on a small website project that involves using ajax to display new comments. Below is the function I have created: function show_comments() { $('div#P_all_posts>div').each(function () { ...

Result of mixing CSS colors

Is there a way to retrieve the result of blending two colors using the color-mix function? In cases where the color-mix feature is not supported, is it possible to set a fixed value instead? ...

Unlocking the power of setting dynamic meta content

When using EJS for templating in my node.js webserver, everything has been running smoothly except for one issue. After integrating the head file into a page, I encountered the following error: SyntaxError: Unexpected identifier in /home/runner/superstrap/ ...

Issue with border radius in MUI 5 affecting table body and footer elements

Currently, I am diving into a new project utilizing React version 18.2 and MUI 5.10.3 library. My main task involves designing a table with specific styles within one of the components. The table header should not display any border lines. The table body ...

What is the best way to align background shapes within a specific section on a webpage using CSS?

I've been attempting to strategically place multiple shapes in the background using CSS, but I'm facing challenges. While I was successful with my hero section at the top of the page, positioning elements in a section halfway down has proven prob ...