The header on my website is set to 768px for my menu size, but the menu display is appearing

I'm feeling frustrated with an issue that I can't seem to figure out.

The #topo section is supposed to have a width of 768px.

Similarly, the menu div should also have a width of 768px.

In my page, however, the logo (yellow div) and the menu (gray div) appear to have different widths, causing a scroll bar to appear on the page for horizontal navigation. Can you help me understand why this is happening?

Here's the jsfiddle link:

http://jsfiddle.net/ra3zc/10/

(In the jsfiddle example, the menu appears smaller than the "topo" div)

Here is my HTML code:

<header id="topo">
    <span id="logo">
        <a href="index.php" style="margin-left:350px;">LOGO</a>
    </span>
</header>

<section id="menu-container">
    <nav id="menu">
        <ul>    
            <li><a href="#">Link 1</a>
                <ul>
                    <li style="border-top:none;"><a href="#">Link 1.1</a></li>
                    <li><a href="#">Link 1.2</a></li>
                </ul>
            </li> 
            <li><a href="#">Link 2</a>
                <ul>
                    <li style="border-top:none;"><a href="#">Link 2.1</a></li>
                    <li><a href="#">Link 2.2</a></li>
                </ul>
            </li> 
            <li><a href="#">Link 3</a>
                <ul>
                    <li style="border-top:none;"><a href="#">Link 3.1</a></li>
                    <li><a href="#">Link 3.2</a></li>
                </ul>
            </li> 
        </ul>
    </nav>  
</section>

Answer №1

Check Out This Demo

In addition to what King King suggested, don't forget to include margin-top:0; in the #menu ul section for the desired outcome.

#menu {
  background:gray;
}

#menu ul {
  margin-top:0;
}

#menu-container {
  background:gray /* you can remove this line from #menu-container */
}


Regarding your other concerns,

Another Useful Demo Here

You should consider adding max-width: 768px and width:100%; as well.

Answer №2

It seems like there is a misunderstanding with the styling of your #menu. The actual element that should have the background:gray property is #menu, not #menu-container. By applying the background directly to #menu, you will achieve the desired outcome:

#menu {
  background:gray;
}

Here is a demo link for reference.

In regards to the issue with the vertical scrollbar visibility, setting the width of ul to 768px may cause it to overflow due to the default padding. One approach is to adjust the styling as follows:

/* Apply overflow:hidden to parent #menu */
#menu {
   ...
   overflow:hidden;
}
/* Reset the padding of ul to 0 */
#menu ul {
   ...
   width: 768px;
   padding:0;
}
/* Change box-sizing of ul to border-box */
#menu ul {
   ...
   width: 768px;
   box-sizing:border-box;
}
/* Alternatively, do not specify width for ul */
#menu ul {
   ...
   /*width: 768px; */
}

Please note: You may not need to explicitly set the width for ul, as it should automatically fill the #menu container when the parent has a specified width of 768px.

Answer №3

<div id="container">
header section
main content
<div>


#container {
width: 768px;
margin: 0 auto;
}

To ensure they are of equal dimensions, consider utilizing the container element so they occupy the same line.

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

Guide to implementing the onchange event in JavaScript for this specific scenario

How can the onchange event be utilized in this scenario using JavaScript? First, input data into the input with id="one". Subsequently, the data in the input with id="two" will be updated to match the data in the input with id="one". However, when the da ...

Dynamically linking a video URL to the <video> tag in real-time

How can I dynamically assign a video URL to the <video> tag so that the video will display in the player immediately? This is my current code: <script> jQuery( '#the-video' ).children( 'source' ).attr( 'src', &apo ...

Is it possible to convert PDF documents to HTML using languages such as C, C++, or Java?

My current project involves annotating HTML files using Javascript, and I need to convert PDF files into HTML files specifically for the IOS platform. While I have had some success in annotating HTML pages, I am unsure how to go about converting PDF to H ...

Tips for maintaining the size of child elements in a Bootstrap collapse as it collapses

I'm currently working on a page that requires a collapsible element using Bootstrap horizontal collapse. Within this collapsible element, there is a table that seems to squish and increase in height as the collapse animation occurs. The transition app ...

What is causing the overlap of the div elements in this specific location?

I am currently working on a page located at: https://developer.mozilla.org/ru/docs/Mozilla/Connect On the page, there is a yellow block of text that states "This translation is incomplete. Please help us to translate...", with another 'article' ...

Angular js is a powerful framework that allows for the seamless transition of views, except for the home

I am currently using the ng-animate module to implement sliding effects for my app views. Each route has its own unique slide animation. Take a look at my simple code below: HTML: <div ng-view ng-animate class="slide"></div> CSS: /*Animatio ...

Creating HTML email content in PHP by merging long strings

I am currently working on a project that involves receiving a JSON webhook and using it to send email notifications. While I have successfully sorted the JSON data, I am unsure of how to create a large HTML email. It seems that attempting to use an If sta ...

How to stop PHP code from running before it should in an HTML form script

I recently created a form where the PHP code is located directly underneath the HTML form code within the same file. The issue I am encountering is that when the user fails to fill out all required fields and submits the form, the page immediately displa ...

Is there a solution to prevent overflow-x auto from triggering a vertical scroll bar?

I'm currently dealing with a flex container that shows a horizontal scrollbar once the number of flex items surpasses the viewport's available width. Everything was working smoothly until I decided to add a pseudo element (down caret) to one of ...

Utilize image maps for dynamically displaying and concealing div elements

Here is the current state of my code... VIEW DEMO I am aiming to display the blue text to the user only when they click on the blue circle, etc... I believe I need to modify the attributes of the div elements, but I am not very familiar with jQuery and ...

Centering div elements in ASP.NET using C# and Javascript

I am looking to create a functionality on my website where, upon clicking a button, a DIV appears in the center of the browser, overlaying all other content. I have already created the DIV and managed its visibility toggle, but I'm struggling with the ...

Looking to style a <p> element with CSS?

In the div class index, there are two additional divs without any class or id names, along with two <p> tags. My goal is to style these two <p> tags. <div class="doubt"> <div> <p>Hello world</p> <div> ...

Guide on assigning Django variable to an HTML element's id

Currently, I'm populating numerous elements from a Python dictionary in my code snippet. The dictionary structure resembles something like {"id", "content", "id2": "content2"}. This data is then passed to an HTM ...

Is it possible to display a pop-up caption in the mobile view?

When I added a caption to my image, it only appeared when hovering over the symbol in the image. However, this feature doesn't work on mobile or tablet due to the image size. How can I make the caption appear when the image is clicked on mobile/tablet ...

Is it necessary to refresh the page in order to display the injected jQuery UI elements

I am currently developing a jQuery Plugin for a basic game. The game inserts all required HTML into the div where it is called and links its CSS file to the header. However, I have encountered an issue when trying to reload only specific elements, such as ...

Ensure that the following div remains positioned beneath the current one

After reading through this question on Stack Overflow, about creating a responsive table with both vertical and horizontal headers, I came across this particular issue, demonstrated in this codepen example: Currently, the second table appears directly bel ...

Steps to insert a style tag into the head using an AngularJS directive

Greetings! Users have the option to choose between printing reports in landscape or portrait format. I am interested in finding out if it is feasible to incorporate the following code snippet into the header of a web document using an AngularJS directive. ...

Corner of the Border Revealing a Clear Sky above

Looking to enhance my navigation bar (menu) by adding a cornered border when the user hovers over it. <nav> <a href="#home">Home</a> | <a href="#about">About</a> | <a href="#blog">Blog</a ...

A step-by-step guide on uploading a CSV file in Angular 13 and troubleshooting the error with the application name "my

I am currently learning angular. I've generated a csv file for uploading using the code above, but when I try to display it, the screen remains blank with no content shown. The page is empty and nothing is displaying Could it be that it's not ...

The footer is supposed to be at the bottom, but unfortunately, the clear float isn

Today seems to be a rough one without enough coffee, as I'm struggling to remember how to do this I am trying to achieve the following layout: header content float float footer The content section contains two floating elements. The problem is ...