What is the best way to center my menu/logo instead of having it all the way to the right?

I am facing an issue with centering my menu and logo on my website. You can view the page here:

Currently, the logo and menu appear to be aligned to the right instead of being centered. I have tried adjusting margins and other settings, but it does not seem to work.

Menu / Logo CSS:

#header2 h1 { /*Logo*/
  display:block;
  float:left;
  width:320px;
  height:125px;
  background:url('resources/images/logo.jpg') no-repeat 0 0;
  text-indent:-10000px;
}
/*#header2 h1 a:hover {
  background:url('resources/images/logo.jpg') no-repeat 0 -125px;
}*/
#header2 h1 span.bg_fade { /*Logo hover*/
   position: absolute;
   top: 0;
   left: 0;
   height: 125px;
   width: 320px;
   background:url('resources/images/logo.jpg') no-repeat 0 -125px;
}
#header2 ul { /*Menu*/
  display:block;
  float:right;
  width:640px;
  height:125px;
  background:url('resources/images/menu.jpg') no-repeat 0 0;
  list-style:none;
}
#header2 ul li { /*Menu part*/
  display:block;
  float:left;
  height:125px;
  text-indent:-10000px;
}
#logo-nav {
  margin-right:10px;
}
#home {
  width:160px;
}
#about {
  width:137px;
}
#work {
  width:129px;
}
#contact {
  width:210px;
}
#header2 ul li a {
  display:block;
  width:100%;
  height:100%;
  outline: 0 !important;
  -moz-outline-style: 0 !important;
  -webkit-outline: 0 !important;
  -webkit-outline-style: 0 !important;
}
#home a:hover {
  background:url('resources/images/menu.jpg') no-repeat 0 -125px;
}
#about a:hover {
  background:url('resources/images/menu.jpg') no-repeat -160px -125px;
}
#work a:hover {
  background:url('resources/images/menu.jpg') no-repeat -297px -125px;
}
#contact a:hover {
  background:url('resources/images/menu.jpg') no-repeat -426px -125px;
}

Menu / Logo HTML:

<div id="header2" style="height:465px;">
    <div id="logo-nav" style="float:left;margin:0;">
      <h1><a href="index.php">WeeBuild Web Design</a></h1>

    <ul id="nav">

      <li id="home"><a href="index.php" title="Click here to go to our homepage.">Home</a></li>

      <li id="about"><a href="about.php" title="Learn more about us.">About</a></li>

      <li id="work"><a href="work.php" title="Check out some of the work we've done.">Work</a></li>

      <li id="contact"><a href="contact.php" title="Any questions? Click here to contact us.">Contact</a></li>

   </ul>
    </div>

If anyone has suggestions on how to properly center the menu and logo, please share them!

htmlcss

Answer №1

The alignment issue is not with the header itself, but rather a few elements causing layout problems

Firstly, in the HTML there is a style tag on the div with the id #logo-nav.

It currently looks like this:

style="float:left;margin:0;"

It should be changed to this:

style="margin:0 auto;"

This adjustment will center the logo and menu perfectly. Currently, the menu is pushed against the right side of the container on that particular page while the logo is aligned to the left.

Next, in the CSS for the footer, there is a class defined as follows:

#footer {
  clear:both;
  width:955px;
  border-top:1px dashed #094e64;
}

It should be updated to:

#footer {
  clear:both;
  border-top:1px dashed #094e64;
}

After this modification, the footer will correctly occupy 100% of its parent container.

Returning to the HTML, wrap #boxContainer, #leftCol, and #newsletter within a single div element.

Assign a fixed width to this div, matching precisely the horizontal space occupied by the enclosed elements.

Add margin: 0 auto; as a style attribute to this div.

These adjustments should align everything centrally.

A helpful tip: The misalignment occurred due to excessive markup used for certain aspects of the page (numerous wrappers/containers) and insufficient markup for other layout elements (the main content div lacking additional grouping divs, relying on
tags for spacing between elements)

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

Combining two kebab-case CSS classes within a React component

import React from 'react'; import styles from './stylesheet.moudle.css' <div className={styles['first-style']} {styles['second-style']}> some content </div> What is the correct way to include styles[&ap ...

javascripthtmlcssreactjs

Tips for creating a custom Menu with content overflow in a single direction

What is the goal of this task? I have developed a custom Menu in my application with 8 options. There is a need to dynamically disable certain menu options based on specific conditions (e.g. disabling the last 4 options). When a user hovers over a disable ...

javascripthtmlcssoverflow

Tips for effectively redirecting traffic to another website

Is there a way to redirect someone from a page URL like example.com/2458/233 to example2.com/2458/233? The first URL contains only a file that redirects to the other domain. Can anybody provide instructions on how to achieve this process? To clarify furt ...

javascriptphphtmljson

Remove border on mobile display

Hello everyone, I have a question regarding CSS styling in Bootstrap framework. I am currently using Bootstrap to create a simple webpage with gray borders on certain div elements. However, when viewing the page on mobile, some of these divs are hidden and ...

javascriptjqueryhtmlcsstwitter-bootstrap

Stacking SVG elements can lead to distortion effects

Currently experimenting with the innovative SVG stacking method to integrate multiple icons into a single file, reducing the browser's HTTP requests. The details of this technique can be found in depth here. In essence, it involves placing numerous S ...

htmlcsssvg

Placing a larger container inside a smaller one and perfectly centering it

I am trying to find a solution to center a 1600px container within a 940px container on my webpage. The goal is to keep the page centered at all times, with the main content being 940px wide. When I add an image that is 1600px, it aligns left with the 940p ...

htmlcss

The error message "Angular formGroup requires a FormGroup instance. Kindly provide one."

I used angular reactiveforms to create a form. The default data is successfully printed on the form, however, I am facing an error in the console that says "formGroup expects a FormGroup instance. Please pass one in." Can someone guide me on how to resolve ...

htmlangular

What could be the reason that the results of my quick sort function are not appearing on the screen

I'm having trouble getting any output from this code. Can someone help me figure out what's wrong? function Ascending() { var array = new Array(); array[0]=parseInt(document.getElementById("1").value); array[1]=parseInt(document.getElementById(" ...

javascripthtmlsortingquicksort

How to position div elements in the center on screens smaller than 768px?

Issue: Facing trouble centering my product grid under 576px. Question: How can I adjust the CSS to ensure the products are centered under 576px? My goal is to have the products centered when the screen size is under 768px, particularly for mobile devices ...

htmlcsstwitter-bootstrapbootstrap-4

How can you use jQuery to select and manipulate multiple form inputs with a common class?

I am currently working on a program that requires at least one of various form inputs to have data in order for the user to submit the form. I was able to successfully code for a scenario with only one input field, but I am facing a challenge when it comes ...

jqueryhtmlforms

Maintain the fixed position of the table header while scrolling

I am facing an issue with my table setup - I want the header to stay fixed while scrolling through the body. Here is how my table structure looks: <table> <thead> <tr> <th>Header 1</th> ...

jqueryhtmlcsshtml-tablecss-position

How come my header is not spanning the full width of the page?

Hey there, I've been struggling with a specific issue on my website and can't seem to find a solution anywhere else. The header on my site is supposed to stretch across the entire width of the screen, but for some reason, there's always a ga ...

htmlcss

Layer one image on top of another using z-index

I'm having trouble layering one image on top of another in my code. Here is my code: body { background: #000000 50% 50%; height: 100% width:100%; overflow-x: hidden; overflow-y: hidden; } .neer { z-index: 100; position: absolute; } ...

javascripthtmlcssimageoverlay

The layout option is not specified within the ejs-mate package

error boilerplate I am baffled as to why the layout is not being defined. I have installed ejs-mate and ejs, yet it still gives this error. <% layout('layouts/boilerplate') %> <h1>All campgrounds </h1> <div> <a ...

javascripthtmlnode.jsejs

Creating a dynamic webpage where multiple images are displayed on a single canvas using

I'm currently working on a chess project where I'm using a canvas to create the game board and draw 32 chess pieces on it. To update the screen when a piece moves, I've implemented requestAnimFrame. However, I'm facing an issue where th ...

html

Issues with HTML5 file uploads causing delays in iOS Safari mobile browsers

I developed a simple HTML5 file upload script using $.ajax(). I also attempted to use xhr, but encountered the same issue. The script successfully uploads an image to imgur.com and works flawlessly on desktop browsers as well as iOS Safari. However, in iOS ...

ajaxhtmlfile-uploadmobile-safari

Is there a way to detect when the user closes a tab or browser in HTML?

I am currently developing a web application using the MVC architecture and I need to find a way to detect when a user closes their browser tab so that I can destroy their session. My tech stack includes jsp (html, js) and java. Any suggestions on how to ...

javascriptjavahtmljsp

Issue with Bootstrap dropdown menu not closing correctly when clicked on mobile devices

On my Bootstrap website, I have a mobile menu that looks like this: <a class="nav-link" href="#" id="shop_submenu" role="button" data-bs-toggle="dropdown" aria-expanded="true" data-bs-auto-close="true"> Rent Costumes ...

htmljquerycssbootstrap-4drop-down-menu

Customizing material-ui-next: Adjusting image dimensions to perfectly fit within a specified container

Struggling with Material-ui-next, I'm facing difficulties in making images take up the entire size of a container. Here's an example of my code: const styles = theme => ({ Card: { width: 300, margin: 'auto' }, Media: { ...

cssreactjsmaterial-uiimage-size

The image for our "About Us" section is not loading

I'm facing a challenge with displaying an image in the about us section of my website. Even though the image is present in the folder, it doesn't show up on the site. I've tried various methods such as moving the picture to different locatio ...

htmlcss